Personal Website V1
The first iteration of my personal website and portfolio.
2 min read
Project Overview
As my experience grew, a traditional single-page resume was no longer enough to showcase the full scope of my software engineering projects, technical depth, and personal style. During the summer of 2022, I set out to design and build a personal portfolio website entirely from scratch.
Having previously focused heavily on backend systems and relying on Bootstrap for quick user interfaces, this project served as my hands-on transition into full-stack and modern front-end engineering.
Technical Journey & Architecture
1. UX/UI Design & Fundamentals
- Studied core UI/UX design theory, layout composition, and visual hierarchy prior to writing code.
- Transitioned away from UI component frameworks (like Bootstrap) to build custom, tailor-made interface components.
2. Modern CSS & Responsive Layouts
- Mastered vanilla CSS, including Flexbox, Grid, custom properties, and fluid typography.
- Developed responsive layouts that adapt seamlessly across screen sizes without conflicting CSS rules.
3. React Application Development
- Built a single-page application architecture using React component patterns and state management.
- Structured reusable UI components to prevent code redundancy and keep the bundle lightweight.
4. Interactive Animations with Framer Motion
- Integrated Framer Motion to craft smooth page transitions, entrance animations, and interactive elements.
- Implemented optimized image handling, lazy loading, and custom carousels to maintain visual polish without sacrificing load performance.
Challenges Overcome
- Zero-to-Hero Front-End Learning Curve: Learning UI design principles alongside modern CSS and React simultaneously without prior front-end experience.
- Responsive Architecture: Mastered writing maintainable, structured CSS that works with the browser rather than against it.
- Animation State Management: Balancing rich UI animations in Framer Motion with application performance and clean component structure.
Key Takeaways
This project completely shifted my perspective on front-end development. Building a portfolio from the ground up provided a strong foundation in modern JavaScript, clean CSS architecture, and user experience design, transforming me into a confident full-stack developer.
It also proved that, despite my clear preference for Backend development, I’m really up to any task if my interest and willpower are fully there!
Project Gallery