Days and Years

Hello!

I created this website to hold things I find fun and entertaining such as photographs of my sewing projects, recipes, or codes I made. Hope you enjoy looking around! (I suggest the Codes page, it actually has something useful in there!)

March 8, 2025

Guestbook has been added to the site. Please feel free to leave me nice comments :D

March 4, 2025

I added my falling stars code in the codes section!

Hi! I go by Choco and am an extreme hobbyist.

I like making things that are pretty and cute through any means possible.

My favorite color (currently) is mint blue.
I've been on the internet making websites since I was 11, -- years ago.
My hobbies are cooking, baking, sewing, drawing, music, language learning, reading, etc. Anything that I can 'make from scratch' in a sense I will probably like.

I created codes on this page. Feel free to use them! It would be nice to be given credit for them though 😸

Jumping Letters

Hello! 你好! 안녕하세요! こんにちは!

HTML <span class="jumping-word">Hello!</span>
Javascript var jumpingWords=document.querySelectorAll(".jumping-word");let animationDelayWord=0;jumpingWords.forEach((n=>{var a=n.textContent.length;n.innerHTML=n.innerHTML.split("").map((n=>`<span class='jumping-letters'>${n}</span>`)).join("");var e=1e3*Math.random();n.querySelectorAll(".jumping-letters").forEach((n=>{n.style.animationDuration="1800ms",n.style.animationDelay=e+"ms",e+=1800/a})),animationDelayWord=e}));
CSS .jumping-word{display:inline-flex}.jumping-letters{animation-name:jumpingLetters;animation-iteration-count:infinite}@keyframes jumpingLetters{0%,100%,30%,45%{transform:translate(0,0)}50%{transform:translate(0,2px)}55%,65%{transform:translate(-1px,-3px)}60%{transform:translate(1px,-3px)}70%{transform:translate(0,-3px)}}

Falling Stars

HTML <div class="star-container"></div>
Javascript let starRate=100;requestAnimationFrame(starAnimation);let starIntervalAnimation;function starAnimation(){var starDiv=document.querySelector('.star-container');let starDivWidth=starDiv.clientWidth;starIntervalAnimation=setInterval(function(){let starElement=document.createElement('span');let starLeftPos=Math.random()*starDivWidth;starElement.classList.add('star');var y=Math.random();starElement.style.opacity=(Math.floor(y*10)+1)/10;let starDuration=y*10000+7000;starElement.style.animationDuration=starDuration+'ms';let starSize=Math.floor(Math.random()*4)+1;starElement.style.height=starSize+'px';starElement.style.width=starSize+'px';starElement.style.left=starLeftPos+'px';starDiv.appendChild(starElement);setTimeout(function(){starDiv.removeChild(starElement)},starDuration)},starRate)}
CSS .star-container{height:100%;width:100%;margin:0;overflow:hidden;position:absolute}.star{background-color:#ff0;animation-name:fallingStar;animation-iteration-count:infinite;position:absolute}@keyframes fallingStar{0%{top:-10px}100%{top:calc(100% + 1000px)}}

Might rename this!!!