Started January 21, 2025
Personal Portfolio Website
A modern, responsive portfolio website built with Astro, featuring dark mode, frontmatter-based content management, and real-time activity feeds.
Overview
A comprehensive portfolio website (This Website) built from scratch using modern web technologies (Astro, TypeScript, Tailwind CSS), showcasing data engineering expertise and project work. The site was designed with a focus on performance, accessibility, and maintainability.
It demonstrates:
- Modern web development with Astro
- TypeScript for type safety
- Responsive design with Tailwind CSS
- Dark mode implementation
- Content management with frontmatter
Architecture
- Astro for static site generation
- TypeScript for type-safe development
- Tailwind CSS for styling
- Content Collections for data management
Status
This project is complete and deployed.
Challenges
- Implementing smooth dark mode transitions
- Creating responsive layouts for all screen sizes
- Setting up content collection schemas
Lessons Learned
- Astro's island architecture is excellent for performance
- TypeScript catches many errors early in development
- Tailwind CSS speeds up development significantly
Related Services
- Web development and design
- Frontend architecture consulting
- Performance optimization
Recent Activity
Refactored project content management from markdown rendering to structured frontmatter-based system. Updated content collection schema to include dedicated fields for overview, architecture, challenges, and lessons learned. This ensures consistent formatting across all projects while maintaining type safety and eliminating markdown rendering issues.
TypeScript 
Astro 
Schema Enhanced navigation UX by implementing a dynamic projects dropdown menu in the header. Added hover-activated desktop dropdown and tap-to-expand mobile functionality, displaying all project titles with descriptions for quick navigation. Replaced generic 'View Project' links in activities with actual project titles for better user experience.
JavaScript CSS Astro Redesigned contact page to focus on personal information display rather than form submission. Removed services section (now has dedicated page), widened layout, and integrated personal data from frontmatter. Contact page now shows name, contact methods, and availability status dynamically.
CSS Astro Updated technology icons to use proper devicons for better visual consistency. Replaced generic Apache icons with specific Airflow and Spark icons. Improved technology bubble styling with white backgrounds and dark text for better icon visibility and contrast.
Apache Airflow 
Apache Spark Built frontmatter-based content management system for personal information. Created personal data collection with TypeScript schema validation, utility functions for data access, and updated all components to use centralized personal information instead of hardcoded values.
TypeScript Astro Implemented comprehensive dark mode system with theme persistence and flash prevention. Updated all components to use consistent color schemes - orange highlights for light mode, blue highlights for dark mode. Fixed navigation flash issue by adding pre-render theme detection script.
CSS JavaScript Initialized new portfolio website project with Astro framework. Set up TypeScript configuration, Tailwind CSS integration, and basic project structure with content collections for activities and projects.
Astro TypeScript Tailwind CSS