Personal Portal

The architecture and design decisions behind this very website.

Meta Design System Static

Overview

This portal is a static, hand-crafted personal website designed to be deployed on any lightweight server. No build tools, no JavaScript frameworks — just vanilla HTML, CSS, and a sprinkle of JS for theme switching and scroll animations.

The design system is inspired by the awesome-design-md collection, specifically the Vercel design language: shadow-as-border technique, aggressive negative letter-spacing, achromatic palette with functional accent colors, and a multi-layer shadow system for depth.

Site Structure

The portal follows a clean, flat URL structure:

my-space/
├── index.html                          ← Portal Home
├── about/index.html                   ← About Me
├── resume/index.html                  ← Online Resume
├── projects/index.html                ← Project Gallery
│   ├── ai-explainer/index.html        ← AI Explainer (migrated)
│   └── personal-portal/index.html     ← This page
├── blog/index.html                    ← Blog List
│   └── launching-a-personal-portal/   ← Sample article
├── assets/
│   ├── css/global.css                 ← Design tokens & components
│   └── js/site.js                     ← Theme, nav, scroll animations
├── DESIGN.md                          ← Design system reference
└── README.md

Architecture Decisions

📦 Zero Dependencies

No npm, no webpack, no React. Every page is a self-contained HTML file that links to shared CSS and JS. This means instant deployment — just copy the folder to any static server (Nginx, Caddy, GitHub Pages, S3, etc.).

🎨 DESIGN.md Driven

The visual language follows the DESIGN.md format from Google Stitch / awesome-design-md. All tokens (colors, spacing, shadows, typography) are defined as CSS custom properties in a single file, making the design system easy to modify and maintain.

🌓 Dark Mode

Theme switching is handled via a data-theme attribute on the root element, with CSS custom properties swapping colors. Preference is persisted in localStorage and respects the system's prefers-color-scheme.

📱 Responsive

Every page uses CSS Grid and Flexbox with fluid sizing. A single breakpoint at 768px handles the mobile ↔ desktop transition, with a mobile nav overlay for smaller screens.

♿ Accessibility

Semantic HTML throughout (<header>, <nav>, <main>, <article>), ARIA labels on interactive elements, keyboard-navigable, and respects prefers-reduced-motion.

🔗 Extensible

Adding a new page is as simple as creating a new folder with an index.html, linking the shared CSS/JS, and adding a nav entry. No build step, no config files. The flat URL structure means clean permalinks out of the box.

Deployment

Copy the my-space/ directory to your server's web root. For Nginx, point the root to the folder and ensure index.html is served for directory requests. That's it.

# Example Nginx config
server {
    listen 80;
    server_name example.com;
    root /var/www/my-space;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

← Back to Projects