8 devlogs
7h 42m 49s
making a cute vday website for my boyfriend :3
editable figma file for assets in the github repo if you wanna make for your valentine too~
Shipped this project!
i built a cute valentineās website for me and my boyfriend! but made it cats on the main branch instead. I made all of the assets on figma and exported into the project. the hardest part was maintaining 2 branches at the same time. I didnāt actually try it yet, but I think a solution would be to create a pull request and only merge the necessary items (?) I also learnt how to use āariaā and āroleā html elements. this is my first time making a very javascript heavy website and I learnt a lot about dom manipulation like adding onto classlists and removing them to edit the same contents all in one page. laslty, i learned a little about music in javascript by adding my own audio and calling 1 function .play()!
overall, iām really really happy with creating this website right before valentineās day āŖ(^ā^*)
added a readme and learnt how to make ācode blocksā to add in ascii art hehe. also created an editable figma file for others wanting to edit the assets and clone the repo for their valentine <3
0
Log in to leave a comment
fixed some media responsiveness so it looks better on phones/tablets? itās still a little wonky, but it looks better :)
created a music loop in javascript and loaded audio so the site is more fun! lastly, added some clamps for width so the heart modal fits in screens better?
0
Log in to leave a comment
added yes or yes interactions to the final pageeeeee!
was literally fighting for my life with the modal logic, but somehow figured it out and fixed some nasty bugs. iām going to add more media responsiveness and add a few more css transitions for easing and smooth animations :3
but website is almost ready for my bf!
0
Log in to leave a comment
added a time-based wait for the text to change and appear 1 more candy heart. once pressed the modal bg becomes transparent and displays a question with 2 options: yes or yes :D
it was a little hard trying ot maintain both branches at the same time to do 2 different things, but the personal pranch has the same updates too!
next iām gonna add click interactions to the yes heart candies to go the final screen section!!!
website almooooost done yippeeee
0
Log in to leave a comment
Added media responsiveness for the first few sections so everything is in frame and not missing :ā)
0
Log in to leave a comment
I made 2 separate branches for the cat photos and for personal photos and created more animations and a modal overlay to open and close the heart closeups! used a lot of js to manipulate the dom by changing the text attributes and images. i also learned how to use the data attribute to easily access and edit things in js/css. lastly, iāve been experimenting a little with html aria and role tags. this is the first time iāve done a mostly js dependant project with no extra pages for routing, so iām learning a lot!
0
Log in to leave a comment
added landing page styling and a few animations so the box and candy hearts move smoothly while falling out~! Used javascript to toggle the box pressed states and to update the subtitles. I have 2 versions of the website, one with cute cat photos and one specifically for my bf. I think I might need to use branches? to host the 2 diff sites. Iāll keep researching how to do that :))
0
Log in to leave a comment
started by creating all my assets on figma and made screen design layouts. next, I started making the base html structure for the home page.
0
Log in to leave a comment