Web Engineering & UI/UX

Personal Portfolio Website

A responsive showcase of skills, projects, academic notes, and professional experience.

Portfolio Website Showcase

Project Overview

This personal portfolio website serves as a comprehensive showcase of my skills, projects, educational background, and professional experience. Built with a focus on clean design, responsive layout, and smooth user experience, the site effectively communicates my capabilities as a computer science student and web developer.

Key Features

Responsive Framework: Grid and flexbox layouts crafted to support a seamless experience on all viewports.
Dual Themes: Smart theme swapper syncing system settings with manual user preferences.
Scroll Trigger Animations: Custom Intersection Observers adding premium micro-reveal animations.
Protected Area: Password-verified library for academic notes storing key data temporarily.
Interactive Contact: Dynamic form submissions supported via Formspree API layers.

Technical Implementation

The portfolio is built using pure HTML, CSS, and JavaScript without any frameworks, ensuring fast loading times and minimal dependencies. The responsive design is implemented using CSS Grid and Flexbox, with media queries for different screen sizes. The dark mode feature uses CSS variables that are dynamically updated via JavaScript based on user preference or system settings. Animations are implemented using CSS transitions and JavaScript Intersection Observer API for scroll-triggered effects.

Challenges & Solutions

One of the main challenges was implementing a consistent dark mode that worked across all components while maintaining accessibility standards. This was solved by using CSS variables for all color values and creating a comprehensive dark mode color palette. Another challenge was optimizing performance while maintaining visual appeal, which was addressed by minimizing external dependencies, optimizing images, and using efficient CSS techniques. The password protection for the notes section was implemented using client-side JavaScript with session storage for temporary access.