Personal Portfolio Website

👨‍💻 Author Profile

Here is the step-by-step process I used to deploy this static website using GitHub Pages on my personal account:

Create a New Repository: I logged into my personal GitHub account and created a new public repository named meonnn.github.io.
Upload the Code: I committed and pushed my index.html, style.css, and the assets folder into the main branch of this new repository.
Access Settings: I went to the repository on GitHub and clicked on the Settings tab.
Navigate to Pages: On the left sidebar, I clicked on Pages (under the "Code and automation" section).
Select the Source & Deploy: Under the "Build and deployment" section, I selected the main branch from the dropdown menu and left the folder as / (root). After clicking Save, GitHub automatically built the site and generated the live URL.

Building this website from scratch without the help of frameworks like Bootstrap or Tailwind was a great learning experience. My main takeaways are:

CSS Layouts: I gained a much deeper understanding of how to use CSS Flexbox and Grid to structure elements and align them cleanly without relying on pre-built framework classes.
Scroll Math & UI Bugs: I learned how sticky headers can mess with anchor link scrolling. I had to troubleshoot an issue where clicking a nav link would scroll down, but the target section was hidden behind the header. I fixed this by understanding and applying scroll-padding-top to the root HTML.
Animation Quirks: I discovered that applying CSS animations (like transform: translateY) to large container blocks can throw off the browser's scroll position calculations. Limiting the animations strictly to the inner cards fixed the issue.
Working with Constraints: By following the project limitation to ignore the mobile view, I learned how to focus entirely on solidifying the desktop layout. It taught me to prioritize core requirements and build a strong foundation before worrying about cross-device scaling.