Personal portfolio site for OSU CS406 — industrial dossier UI, project archive, and case-study detail pages.
Stack: React 19 · Vite · Tailwind CSS 4 · Framer Motion · React Router
Deploy target: Vercel (connect this repo after push).
npm install
npm run devOpen http://localhost:5173
npm run build
npm run preview # optional — test production build locally| Path | Purpose |
|---|---|
src/pages/ |
Home, About, Projects, Project detail, Contact |
src/data/projects.js |
Single source of truth — 4 live projects |
src/components/project-cards/ |
Production card styles (SpecTag, Plate) |
src/me_draft_ver/ |
Archived drafts, card labs, placeholder data |
public/projects/ |
Project screenshots |
- Push this repo to GitHub
- vercel.com → Add New Project → import Portfolio-Project
- Framework: Vite · Build:
npm run build· Output:dist - Deploy —
vercel.jsonhandles client-side routing
Primary Direction: Futuristic Industrial Luxury UI
Alternative Labels:
- Future Minimal Luxury
- Tech Editorial
- Cyber-Lux Minimal
- Industrial Futurism
Concept: The portfolio should feel like a premium digital dossier — a futuristic identity system, high-end technology archive, cyber-industrial interface (no neo), luxury product, classified project database, digital identity archive.
- Minimal
- Expensive
- Controlled
- Technical
- Editorial
- Structured
- Futuristic but believable
- Gamer cyberpunk
- RGB neon overload
- Flashy sci-fi
- Generic SaaS glassmorphism
- Generic developer template
- Over-animated portfolio
Motion should feel: elegant, cinematic, restrained, smooth, expensive.
- Fade-up reveals
- Staggered entrance animations
- Soft hover lift
- Blur transitions
- Subtle parallax
Use sparingly for texture and detail:
- Metadata labels
- Fake serial numbers
- Interface dividers
- Status indicators
- Corner brackets
- Barcode-inspired lines
- Scan frames
- Technical indicators
1 base card component. 4 visual styles max.
Each style shares the same content structure but changes shape, cutout, or border treatment slightly.
Think of it as:
- Component = reusable template
- Variant = style version of that template
- State = hover, active, expanded
State 0: Default
- Base card appearance
State 1: Hover
- Subtle lift, glow, border, or color shift
State 2: Expanded Preview
- Short summary
- Key feature/function
- What problem it solves
- One image or visual
- "See Project" button
Layout Type: Bento grid
Key Principles:
- Grid of cards with different sizes and emphasis
- One unified visual system
- Curated, scannable, modular — not a random list
- Cards can differ in width, height, corner style, theme color, detail level
- Typography, spacing rhythm, and overall mood stay consistent
- 1 featured large card
- A couple medium cards
- Maybe one smaller supporting card
Each project can have its own theme color.
- Theme flows through card styling as an accent, not changing the whole system
- Project data defines the theme
- Card component reads theme and applies to borders, badges, hover accents, preview highlights
project.jsx— page layout and placement- Card component(s) — actual project tiles
- Data file — project content, theme color, card type
- Shared styling rules/tokens — spacing, type, radius, motion
Treat cards as a family of reusable variants that share foundations but can evolve into different shapes/layouts when needed.
*One visual system, multiple card treatments when useful.
- Keep the page same family, different details
- Use theme colors per project
- Keep hover state subtle
- Make expanded state short, useful, and clean
- Don't force rigid templates — allow flexibility for future growth
Direction:
- Project page = bento layout
- Cards = same family, different design/detail
- States = default, hover, preview
- Theme = project-specific accent color
- Architecture = flexible enough for future growth