- Personal portfolio website, built to showcase my skills, projects, and web development practices.
- The navigation bar and footer are each maintained in a single source file.
- Both are loaded dynamically using JavaScript across the site.
- This approach ensures:
- Consistent layout across all pages
- Easier future updates
- Reduced duplication of HTML
- The hero section is inspired by parallax scrolling.
- While it is not controlled by user scrolling, it uses a multi-layered effect to create a sense of depth.
- Each layer moves at a different speed, and the movement is adjustable, allowing fine control over the visual experience.
- Includes a light and dark theme toggle.
- Colors change dynamically based on the selected theme.
- Implemented using:
- JavaScript for theme switching logic
- CSS custom properties such as
--primaryand--secondaryto manage color variables efficiently
- Built using semantic HTML best practices.
- Improves accessibility, readability, and maintainability.
- Fully responsive layout that adapts to mobile, tablet, and desktop screen sizes.
- A slideshow component built using JavaScript.
- Adds interactivity and dynamic content presentation.
- Reflection grid data is loaded dynamically from a JSON file.
- JavaScript fetches and renders the content, making updates easy without modifying HTML.
- The contact form does not submit data to a backend.
- Includes client-side validation to ensure proper input formatting and required fields.
This project was created to demonstrate:
- Front-end development fundamentals
- Semantic and accessible HTML structure
- Dynamic UI features using JavaScript
- Responsive and visually engaging design