Black/White Polished Portfolio Design

Overview

A minimal TypeScript + React frontend for a portfolio with an Apple-inspired aesthetic. It includes a full-screen animated canvas background (particles, grid, orbs, spotlights), a fixed navigation, sectioned content (Hero, Projects, About, Skills, Contact), and a lightweight loading screen. Built for Vite + React 19 and intended to be dropped into a static frontend project.

Features

• AnimatedBackground component
  • Canvas-driven visuals: multi-layer particles, connection lines, drifting grid, soft orbs, and spotlights.
  • Particle count scales with viewport area (capped).
  • Responsive canvas sizing and animation loop managed with requestAnimationFrame.
• App layout
  • Composes AnimatedBackground, Navbar and content sections: Hero, Projects, About, Skills, Contact.
  • Subtle fixed radial gradients overlay to create depth.
  • Footer with small copyright/design note.
• Loading overlay
  • index.html includes a centered loading spinner and message that gets removed once root has content.
• TypeScript-first with ESLint + TypeScript configuration hooks in package.json scripts.
• Vite-powered dev experience and build pipeline.

Tech stack

• TypeScript
• React 19
• Vite
• Tailwind CSS (dev dependency present; classes used in components)
• ESLint + @typescript-eslint
• react-router-dom (installed but not shown used in provided files)

Project structure (provided)

• index.html — root HTML with loading overlay and script to mount app
• package.json — scripts and dependencies
• src/
  • App.tsx — main application composition
  • components/
    • AnimatedBackground.tsx — full-screen animated canvas background
    • Navbar.tsx (referenced, not included)
  • sections/
    • Hero.tsx (referenced, not included)
    • Projects.tsx (referenced, not included)
    • About.tsx (referenced, not included)
    • Skills.tsx (referenced, not included)
    • Contact.tsx (referenced, not included)
  • main.tsx — entry (referenced from index.html, not included in snippet)

Note: Several referenced component/section files and main.tsx are not included in the snippet; the README reflects only what is present.

Setup / Usage

1. Install dependencies
   • npm install
   • or yarn install
2. Run development server
   • npm run dev
   • open http://localhost:5173 (Vite default) or follow console output
3. Build for production
   • npm run build
4. Preview production build
   • npm run preview
5. Typecheck and lint
   • npm run typecheck
   • npm run lint
   • npm run lint:fix

Files of interest:

• index.html mounts the app into <div id="root"></div> and includes a loading overlay (id="tetrees-loading") removed when children appear under #root.
• AnimatedBackground.tsx attaches a canvas to the DOM, sizes it to window.innerWidth/innerHeight and implements drawing routines (particles, grid, orbs, spotlights). Particle count is min(80, floor((width*height)/15000)). The component uses requestAnimationFrame and window resizing handling (see source).

Customization notes

• Visual tuning: AnimatedBackground defines particle layers, speeds, radii, opacities, orb and spotlight parameters — tweak these constants to change density, movement, and color accents.
• Tailwind classes are used throughout (className in App.tsx). Ensure Tailwind is configured in your project for styles to apply.
• The index.html loading overlay is purely CSS/JS; you can replace the spinner/logo/message with your own branding.
• If integrating router/links, react-router-dom is available in package.json but not wired up in the provided code.

API endpoints

This code block is a static frontend; there are no backend or API endpoints included.

Limitations / Missing pieces

• Several referenced UI files are not included in the snippet: Navbar, section components (Hero, Projects, About, Skills, Contact), and src/main.tsx. You will need to provide/implement these to run the full app.
• Tailwind configuration and global CSS are not included — Tailwind classes will not style correctly until set up.
• AnimatedBackground.tsx in the snippet is truncated in the provided source; verify the full file includes cleanup (cancelAnimationFrame, resize listeners) and complete connection line drawing logic.

License / Attribution

No license file is included in the snippet. Add your project license as needed.