Fullstacking It Up

Its done! 2024-06-13 20:15:31 been quite the while since i worked on this, especially with the super great and NOT stressful at all university experience. there wasnt much visual changes to the website, except people can actually expand texts like these instead of being cliffhanged by ellipses. although this was overkill, this website is officially full stack now! i can boast all about it on my resume (which i already have, linked on the navbar). you are able to create new entries once you login, as well as create new chapters. since this is now much more convenient to add entries, ill try to update my other projects on this website as well. if it wasnt obvious enough, i am writing this entry through the website itself, which feels so rewarding. huge credits to net ninja, who has an amazing php and mysql tutorial, and dave hollingworth who has an amazing tutorial on how to create an account system using php and mysql. hopefully, see you guys later! Read More

Smoothing Things Out

Honestly Embarrassing 2023-11-20 20:23:05 This is a monumental day for me, since I have finally fixed an issue on my website that has actually been plaguing me since I made the blog section, which was like half a year ago? Anyway, the issue was that I need anchor links for sections in the scrollbox, but everytime you click the link it would scroll the entire webpage then goes to the designated section. I thought at first, easy peasy scroll margin fix, give it a 1 2 punch and onto the next disastrous bug but nooooooo. Whatever I did, these scroll margins would not prevent the entire webpage from scrolling. In some miracle I got it to work one time but it only works for anchor link (why alwijuodnlawj). My stroke of brilliance was simply to make it so that the scrollbox scrolls are exclusive to that section alone, but there is no way i knew how to do that. After relearning the entire html and css functions, i ran into this: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior. The try it section was EXACTLY what i needed. I scoured through the chrome dev tools to see if I could find the source code for that section but no luck. I pretty much gave up at this point, and I made a stackoverflow account just to ask how to recreate that. God bless these internet strangers, they gave a perfect explanation and it only required some lines of javascript to get what I needed. This is the post: https://stackoverflow.com/questions/77509763/how-can-i-recreate-this-scrollbox/77509963#77509963. Read More

Splash Screen 2023-08-09 08:28:08 Originally i wanted to have my intro squares fade in when the website first loads but an issue came such that an element is assigned two animations and thus clashed with each other. I again pulled out my "avoid the issue" card and found a splash screen animation that runs on load. Create an Animated Website Intro / Splash Screen With HTML /CSS / JavaScript. This video actually is phenomenal and makes me want to actually learn javascript instead of stealing from the internet. (i will learn it properly but a bunch of other stuff is going on) Read More

Scroll Snap Fiasco 2023-08-08 13:49:05 As a quality of life addition to my website, i wanted to have sections that would cleanly snap to so that users can see the section of my website perfectly aligned. I mentioned this scroll snap before in the blog section but this is for the entire website. Most things went smoothly except this ONE part. There are some places that mysteriously scrolled twice when using the scrollwheel. Thats odd, I thought. This turns out to be unequivicoaly perplexing, and the next best method to solving a problem is to find an alternative to it. Turns out the issue lied in this one scroll snap section, so what i did was make an invisible line that the website would snap to, instead of having that snapping section surround the entire content. Read More

Start Of Website

Projects Section 2023-08-06 23:41:16 This was the first time I had to make a real compromise on the website. Originally, i was going to do a carbon copy of this website: https://www.martinemyrup.com/cv.html, but i just couldnt get the horizontal lines to work for the life of me. When i made the screen smaller, i noticed that the website also changed its format, a much easier one that still looked quite nice. And so, I carbon copied that one instead. The main issue with the original idea as that the horizontal lines need to be cut off if theres more than one event that happened that year, which I just couldnt figure out. Read More

Education Section 2023-08-06 17:23:42 This one was relatively easy. At first i wanted it to slide down for all 3 panels but then I thought what if I make each one slide out differently so that it would be incredibly cool. This was an easy task, where I just flipped the animation for one and have another slide out horizontally. Read More

The Blog Section 2023-07-29 15:20:45 This is a pretty scary part for me, since no online help gave me exactly what i wanted, so im entering the dangerous place of coding without any help (extremely scary). Im starting out with a scrollbox since i want all of my blog entries to be available to the user but not have the older entries visible since it takes up a bunch of space. With a scrollbox, the most recent entries are on the top and if the user wants to see older entries, they can scroll down. The fading effects were completely stolen from this: https://stackoverflow.com/questions/70970529/css-div-fade-scroll-styling Update: the bookmarks caused a little bit of incredible suffering. The issue was that when you click on the bookmarks, it does scroll to the specified location within the blog but it also scrolls the entire website such that the blog section is at the top of the page. For one, the header is blocking some blog content. For second, the blog section would be not centered if you wanted to use those bookmarks. To solve this, I had to do something I was planning on doing in the future, which is scroll snapping. This causes you to snap to a certain part of the screen when you are scrolling. When I put a scroll snap on the entire blog section, it would snap to where I need it to be. I used this tutorial. Learn CSS Scroll Snap In 6 Minutes. Read More

The Front Page 2023-07-28 12:40:42 This front page mainly is for anyone to get to know me. The releasing of emojis is to make the website more interesting and for some sections provide more context. For example, I'm canadian and chinese so the emojis for my name will have those emojis. Theres no canada or china flag emoji for websites so it is unbelievely cringe. I had to go with alternatives. Big thanks to loonywizard for the emoji function library. Read More