My Portfolio Website
This project is the very website you are currently viewing – a personal portfolio meticulously designed and developed from scratch to showcase my skills and projects. Built with the static site generator Eleventy and templated using Nunjucks, it features a unique, custom-crafted aesthetic. Heavy emphasis was placed on creating an engaging and interactive user experience through custom CSS animations and JavaScript-driven dynamic elements.
Features
- Unique, fully custom-coded visual design and layout.
- Interactive home page card carousel with scroll-driven highlighting.
- Custom page transition: white circle wipe originating from mouse click.
- Hover-activated sidebars with smooth expansion animation.
- Interactive "pop-out" effect for sidebar navigation links on hover.
- Multi-page architecture: Home, Work Experience, Projects, Community/Service.
- Dedicated individual pages for each featured project.
- Static site generation using Eleventy for performance and security.
- Templating with Nunjucks for modular and maintainable code.
- Deployment via GitHub Pages.
Gallery
Technical Details
The foundation of this website is Eleventy, a flexible static site generator. Nunjucks was utilized as the templating language to manage reusable layouts and components, such as headers, footers, and page structures. The visual styling, including the responsive design, complex animations for the card carousel, page transitions, and interactive sidebars, was implemented entirely with custom CSS3. Vanilla JavaScript was employed to add interactivity and dynamic behaviors, such as managing the state of the carousel highlighting based on scroll position, triggering the page transition animations from the point of click, and handling the hover effects for the pop-out sidebars. The final static site is efficiently hosted on GitHub Pages.