Portfolio & Technical Archive Platform
A content-driven Astro platform that unifies hardware builds, research papers, and software case studies into a single static, edge-deployed portfolio.
Motive & Problem Gap
Scattered Technical Work
Hardware write-ups, research papers, and source files lived across course submissions, local folders, and messaging threads. The gap was a single, durable archive where each project could be read in context instead of hunted down file by file.
Readability Over Spectacle
Most portfolio templates prioritize motion and visual effects over technical clarity. This platform was built around documentation: schematic labels, methodology, measured results, and source files should stay legible on any screen.
Technical Implementation Steps
1. Typed JSON Content Model
Modeled projects, research entries, and singleton copy as typed JSON imported eagerly through import.meta.glob. Content stays portable and separate from presentation, while TypeScript catches malformed fields at build time.
2. Composable Astro Component System
Built shared page headers, entry cards, section headers, tag filters, and category-specific detail layouts with Tailwind CSS v4 tokens so every route inherits the same typographic scale and slate-based visual language.
3. Static Delivery & Edge Caching
Prerendered every route at build time, added View Transitions for navigation continuity, and deployed through the Cloudflare adapter with immutable asset caching for scripts, styles, and fonts.
Tech Stack Used
Framework & Language
Static-first routing with typed content models and zero client framework runtime.
Interface & Styling
One document-like visual system built from Google Sans, IBM Plex Mono, and slate neutrals.
Content Pipeline
Project and research content is versioned with the code and loaded at build time.
Delivery & Hosting
Immutable asset headers and edge delivery without a runtime database or CMS.
Interaction Layer
Filtering, lightboxes, mobile navigation, and tag ranking without a UI dependency.
Project Gantt Chart
Information Architecture
Routes, navigation, content schema
Visual System
Type scale, tokens, shared components
Content Migration
Projects, research, singleton copy
Responsive Refinement
Mobile menu, grids, detail layouts
Build & Deployment
Cloudflare adapter, cache headers
Gallery & Showcase
Fig 1.1 — Landing Page
Home hero with the rotating status line, snapshot panel, and featured research highlights.
Fig 1.2 — Project Archive
Frequency-ranked tag pills and the hardware collection; software projects follow in their own dedicated section.
Fig 1.3 — Software Case Study
Category-specific detail layout with motive, implementation steps, tech stack, and a development Gantt chart.
Fig 1.4 — Research Archive
Research listing with responsive tag pills and publication cards sharing the same design language.
Project Access & Repository
Live deployment, downloadable builds, and source files.