about

Personal portfolio/about page for micr.dev. Part portfolio, part personal archive — a static site listing interests, tastes, and references in a two-column layout.

Tech Stack

• HTML/CSS/JS — vanilla, no frameworks, no build tools
• Custom font — DecimaMono (self-hosted)
• Data-driven — all content lives in data.json, rendered client-side
• Hosted on Netlify

Project Structure

.
├── index.html          # Main page (skeleton loader, two-column layout)
├── script.js           # Fetches data.json, renders all content sections
├── style.css           # Layout, skeleton shimmer, grids, custom cursor
├── data.json           # All profile content (intro, series, music, etc.)
├── fonts/
│   └── DecimaMono.ttf  # Primary monospace font (preloaded)
├── images/             # Game covers, album art, designer logos, hero image
├── favicon.png
├── robots.txt
├── sitemap.xml
└── netlify.toml        # Netlify build config (publish = ".")

How It Works

1. index.html loads with skeleton placeholder UI.
2. script.js waits for fonts and the hero image, then fetches data.json.
3. Content is rendered dynamically based on each section's type:
   • intro — bio text with name header
   • T — timed items (title + year), sorted by year
   • R — rows with dot leaders (title·········right), optional links
   • P — picture grid (album art, game covers), optional Spotify links
   • designerImages — fashion designer logo grid
   • colours — hex values with inline color swatches
   • fonts — font name rows with dot leaders
   • runways — runway show rows
   • lastUpdated — footer timestamp
4. A custom floating cursor shows labels on image hover.
5. Desktop-only — mobile visitors see a blocker overlay.

Local Development

No build step required. Serve the directory with any static file server:

# Python
python3 -m http.server 8000

# Node (if npx available)
npx serve .

# PHP
php -S localhost:8000

Open http://localhost:8000 in your browser.

Customization

All content is in data.json. Edit it directly to add, remove, or reorder sections.

Section types

Type	Fields	Display
intro	text	Bio paragraph
T	items[].title, items[].year	Title·········Year
R	items[].title, items[].right?, items[].spotify?, items[].link?	Title·········Right
P	items[].name, items[].image?, items[].spotify?	Image grid
designerImages	items[].name, items[].image?	Logo grid
colours	items[].title (hex)	Hex·········[swatch]
fonts	items[].title, items[].right	Font·········Right
runways	items[].runway, items[].designer	Runway·········Designer
lastUpdated	text	Small footer text

Each section uses displayName for its heading (defaults to the object key). Add new images to images/ and reference them by filename.

Styling

CSS variables in style.css (:root) control column widths and positioning:

--left-col-min: 480px;
--left-col-ideal: 36vw;
--left-col-max: 880px;

Deployment

Configured via netlify.toml:

[build]
  publish = "."

Push to the repository's main branch — Netlify auto-deploys from the root directory with no build command.

License

All rights reserved.