Portfolio Website Design

Project Overview

This portfolio website is a modern, fully responsive web application designed to showcase my projects, skills, and professional journey in RF engineering and embedded systems. The site features a contemporary glassmorphism design aesthetic with smooth animations and interactive elements that create an engaging user experience.

Built entirely from scratch using vanilla HTML5, CSS3, and JavaScript without any frameworks, this project demonstrates proficiency in fundamental web technologies and responsive design principles. The clean, modular code architecture ensures maintainability and easy updates as new projects are completed.

Key Features

Dark/Light Theme Toggle

Seamless theme switching with smooth transitions and persistent user preference using localStorage

Fully Responsive

Optimized layouts for all devices from mobile phones to 4K displays with fluid breakpoints

Glassmorphism UI

Modern frosted-glass aesthetic with backdrop filters, subtle shadows, and gradient accents

Project Filtering

Dynamic filtering system to view ongoing vs completed projects with smooth animations

Smooth Animations

CSS transitions and JavaScript-driven animations for hover effects and page interactions

Certificate Viewer

Modal-based certificate display with external Coursera link integration

Technical Implementation

HTML5 Structure

Semantic HTML5 markup ensures accessibility and SEO optimization:

Semantic Tags: Proper use of <header>, <nav>, <section>, <article>, and <footer>
Accessibility: ARIA labels, alt text for images, and keyboard navigation support
SEO Meta Tags: Descriptive titles, meta descriptions, and Open Graph tags for social sharing
Project Detail Pages: Individual HTML pages for each project with consistent templates

CSS3 Styling & Design System

Advanced CSS features create the polished, modern interface:

CSS Custom Properties: CSS variables for theming (colors, spacing, fonts) enable easy theme switching
Glassmorphism Effect: backdrop-filter: blur() with semi-transparent backgrounds and subtle borders
Flexbox & Grid Layouts: Modern layout techniques for responsive, flexible component arrangements
Smooth Transitions: transition: all 0.3s ease for hover effects and theme changes
Media Queries: Responsive breakpoints at 768px for tablet/mobile optimization
Gradient Accents: Linear gradients (cyan → purple) for headings and CTAs
Box Shadows: Layered shadows with color tints for depth and modern aesthetics

JavaScript Functionality

Vanilla JavaScript adds interactivity without framework overhead:

Theme Toggle: Light/dark mode switching with localStorage persistence across sessions
Smooth Scrolling: Animated navigation to page sections using scrollIntoView()
Project Filtering: Dynamic show/hide of project cards based on status (ongoing/completed)
Dropdown Menus: Click-to-expand navigation for categorized project links
Mobile Menu: Hamburger menu with slide-in navigation for small screens
Certificate Modal: Popup viewer for certificates with close on overlay click
Active Link Highlighting: Current page indicator in navigation menu

Design Philosophy

Visual Identity

Color Palette:
- Primary Accent: Cyan (#00f5ff) for tech-forward feel
- Secondary Accent: Purple (#a855f7) for creative energy
- Dark Theme: Deep navy backgrounds with cyan highlights
- Light Theme: Clean whites with subtle gray tones
Typography: Inter font family for clean, modern readability; Fira Code for code snippets
Spacing System: Consistent 8px grid system for harmonious layouts
Icon Library: Font Awesome 6.4.0 for consistent, scalable iconography

User Experience (UX)

Clear Navigation: Fixed header with dropdown project categories for easy access
Progressive Disclosure: Summary cards expand to full project pages with detailed information
Visual Feedback: Hover states, active states, and loading indicators guide user interactions
Fast Load Times: Optimized images, minimal external dependencies, efficient CSS
Mobile-First Approach: Touch-friendly targets, readable text sizes, simplified layouts on small screens

Site Structure

Main Sections

Hero Section: Name, title, and CTA with animated circuit background
About: Professional summary with education, research interests, and background
Skills: Categorized technical skills (RF Design, PCB, Programming, Tools, Firmware)
Projects: Filterable grid of project cards (ongoing/completed) with detailed pages
Certificates: Professional certifications with modal viewer and external links
Contact: Social links, email, and professional network connections

Project Detail Pages

Each project has a dedicated page with consistent structure:

Project title, status badge, and metadata (date, technology, type)
Comprehensive overview and technical description
Key features and specifications
Design methodology and implementation details
Images, diagrams, and simulation results
Learnings, challenges, and outcomes
References and external resources

Responsive Design Strategy

Breakpoint System

Desktop (> 768px): Multi-column grid layouts, expanded navigation, large images
Tablet/Mobile (≤ 768px): Single-column stacks, hamburger menu, optimized spacing

Mobile Optimizations

Hamburger menu with slide-in navigation drawer
Stacked project cards (1 column) instead of grid layout
Larger touch targets (minimum 44×44px) for buttons and links
Reduced padding and margins to maximize screen real estate
Simplified dropdown menus that expand vertically
Font size adjustments for readability on small screens

Performance & Optimization

No Framework Overhead: Vanilla JS keeps bundle size minimal (~50KB total)
Optimized Images: Compressed PNGs/JPGs with appropriate dimensions
CSS Efficiency: Single stylesheet with organized sections, minimal redundancy
Font Loading: Google Fonts with display=swap to prevent FOIT (Flash of Invisible Text)
Lazy Loading: Images load on-demand as user scrolls (future enhancement)
Caching Strategy: Static assets cached by browser for repeat visits

Development Workflow

Code Editor: VS Code with live server extension for hot-reload development
Version Control: Git/GitHub for code management and deployment
Browser DevTools: Chrome DevTools for debugging, responsive testing, and performance profiling
Cross-Browser Testing: Verified compatibility on Chrome, Firefox, Safari, and Edge
Validation: HTML validator and CSS validator to ensure standards compliance

Key Learnings

Modern CSS Techniques: Mastered glassmorphism, backdrop filters, CSS Grid, and custom properties
Responsive Design: Mobile-first approach, fluid layouts, and adaptive breakpoints
JavaScript DOM Manipulation: Event handling, localStorage API, and dynamic content updates
UI/UX Principles: User-centered design, visual hierarchy, and interaction feedback
Performance Optimization: Efficient CSS selectors, minimal reflows, and optimized assets
Accessibility: Semantic HTML, ARIA attributes, and keyboard navigation
Git Workflow: Branch management, commit messages, and GitHub hosting

Technologies Used

HTML5 CSS3 JavaScript (ES6+) Font Awesome 6.4 Google Fonts Git & GitHub VS Code Chrome DevTools

Future Enhancements

Blog Section: Technical articles and project deep-dives
Contact Form: Direct message functionality with backend integration
Project Search: Full-text search across all projects
Animations Library: More sophisticated scroll-triggered animations
Analytics Integration: Google Analytics for visitor insights
PWA Features: Service worker for offline access and installability
Multilingual Support: English and Sinhala language options