Dribbble Archive

1. Product Overview

This project is a single-page React + Vite + Tailwind v4 website powered by MDX files. It showcases Edward Battistini’s selected work, projects, and experiments through a performant, modern, and SEO-friendly interface.

The site will function as a lightweight CMS: each MDX file defines a project (metadata + content). The app dynamically builds a projects grid, and clicking a card loads a project’s detail view.

Design direction: high contrast, monochrome minimalism — all content sits on either shades of black (dark mode) or shades of white (light mode).

2. Core Objectives

1. Speed — Lighthouse 95+ scores for Performance, SEO, Accessibility.
2. Simplicity — No backend, no database, content from MDX files only.
3. Scalability — Easily add new projects by dropping new MDX files.
4. SEO Ready — Metadata, sitemap, Open Graph, semantic structure.
5. Design First — Smooth transitions, typography focus, subtle motion.

3. Technical Requirements

Tech Stack

• Vite — build system (fast dev + SSR/SSG-ready)
• React 18 — component-based SPA
• Tailwind CSS v4 — utility-first design system
• MDX — content format for projects
• React Router — for navigation between pages
• React Helmet Async — for SEO metadata
• Remark/Rehype plugins — for GFM, frontmatter, slugs
• Optional: vite-ssg or prerendering for static SEO export

MDX Structure

Each file in /content/ defines one project:

---
title: "Wakey Wakey"
summary: "A macOS Wake on LAN scheduler"
year: 2024
tags: ["macOS", "SwiftUI", "Automation"]
thumbnail: "/images/wakeywakey-thumb.jpg"
order: 1
---

import { Image } from "../src/components/Image.jsx"

# Wakey Wakey

A minimal macOS app that schedules Wake-on-LAN signals.

<Image
	src="/images/wakeywakey-hero.png"
	alt="Wakey Wakey interface"
/>

Frontmatter fields:

• title
• summary
• year
• tags
• thumbnail
• order (sort index)

4. Information Architecture

Pages & Routes

5. Functional Requirements

Home Page

• Hero Section
  • Large intro headline (e.g. “Designer. Builder. Curious Human.”)
  • Short description paragraph
  • CTA to “View Work” or scroll down
• Projects Section
  • Displays cards for each MDX project
  • Card includes thumbnail, title, summary, tags
  • Clicking opens /project/:slug
• About Section
  • Simple paragraph + optional photo or signature
  • Mention skills, design philosophy, or selected highlights
• Contact / Connect Section
  • Minimal contact text
  • Icons linking to email, LinkedIn, GitHub, Instagram, etc.

Project Page

• Dynamic route loaded from MDX file.
• Hero banner: uses thumbnail or hero image.
• Content body: renders MDX (text, images, embeds, or React components).
• Optional React playgrounds embedded inline.
• Back button or breadcrumb to return to home/projects.

MDX Content Types Supported

• Markdown (text, headings, lists)
• Inline images/videos
• Custom React components (<Image />, <Video />, <Playground />)
• Code blocks and syntax highlighting (optional)

6. UI / UX Requirements

Theme

• Two visual modes:
  • Dark Theme: shades of black, gray, white text
  • Light Theme: shades of white, gray, black text
• Tailwind palette used consistently (gray-950 to gray-50)
• Theme toggle optional (can hardcode dark/light variant)

Layout

• Fixed width content container (max-w-6xl mx-auto p-6)
• Sticky or fading top navigation (Home, Work, About, Contact)
• Smooth scroll between sections
• Subtle transitions on hover and navigation

Typography

• Clean sans-serif (e.g. Inter or Geist)
• Headings: bold, tight letter spacing
• Body: high legibility, ~18px base
• Consistent rhythm between headings and paragraphs

Components

7. SEO / Performance Requirements

Meta + Structured Data

• Title + meta description per page (from frontmatter)
• Open Graph + Twitter cards
• Canonical links
• robots.txt + sitemap.xml
• JSON-LD person schema (Edward Battistini)

Performance

• Lazy-load all images (loading="lazy")
• Use AVIF/WEBP with JPG fallback
• Preload critical font
• Responsive images with aspect-[4/3]
• No blocking scripts

Accessibility

• Semantic HTML (main, nav, header, footer)
• Focus-visible outlines
• Proper heading hierarchy
• Alt text for all media

8. Non-Functional Requirements

• Hosting: Netlify, Vercel, or GitHub Pages
• Build: vite build → static files in /dist
• Maintainability: adding new project = new MDX file
• Scalability: future blog or “Now” section can reuse MDX loader
• Version control: GitHub repository

9. Deliverables

1. Vite + React + Tailwind base project configured
2. MDX pipeline (import.meta.glob with frontmatter)
3. Home + Project routes fully working
4. SEO setup (Helmet, sitemap, robots.txt)
5. Placeholder content for 3 projects
6. Light & dark theme variant
7. Ready-to-deploy build

10. Stretch Goals (Phase 2)

• Add theme toggle (dark/light)
• Animated page transitions with Framer Motion
• Search or tag filter for projects
• RSS or JSON feed export
• Optional blog section using same MDX system
• MDX “Playground” React live component

11. Success Metrics