Portfolio Site

Overview

This portfolio site represents my approach to building modern, performant web applications. It showcases my experience across the Software Development Life Cycle—from Product Management to QA, SDET, and Software Engineering—through a carefully designed, content-driven architecture.

Design Philosophy

The “Mediterranean Nocturne” design system captures the Amalfi Coast at twilight—where the sky is heavy velvet navy and the sea reflects distant, shimmering lights. Key principles:

• Intentional Asymmetry over rigid grids
• Tonal Layering using surface color tokens
• Glass effects with subtle backdrop blur
• No 1px borders—sections use background shifts instead

Architecture

Frontend

Built with Astro using static site generation with islands architecture:

• Routing: File-based routing covering experience, projects, travel, and contact
• Content: Markdown-based content collections for projects, travel, books, and video games
• Styling: Tailwind CSS v4 with custom design tokens
• Icons: Material Symbols Outlined via Google Fonts

Backend

Deno runtime with Hono framework:

• Static Files: Astro build output served by Hono
• API Endpoints: Contact form and resume download
• Deployment: Ready for Deno Deploy

Content Pipeline

Markdown files with YAML frontmatter are processed at build time:

• Projects, travel entries, books, and video games as content collections
• Type-safe content schemas with Zod validation

Key Components

• Sidebar: Desktop navigation with smooth transitions
• Mobile Drawer: Slide-in navigation for mobile devices
• Bottom Nav: Fixed bottom bar with primary navigation
• Mobile Header: Compact header with contact icon

Performance

• Static site generation via Astro
• Optimized font loading with font-display: swap
• Minimal JavaScript through Astro islands architecture
• Reduced motion support for accessibility

Testing

• Vitest for component and utility testing
• Navigation path matching tests
• 38 tests covering frontend functionality

Future Enhancements

• CMS integration for non-technical content updates
• Blog section with MDX support
• Dark/light mode toggle