kritansh-3d-portfolio

Kritansh — 3D Portfolio

A dark, futuristic, 3D interactive portfolio built with React, Vite, Three.js
(React Three Fiber + drei), GSAP, and Tailwind CSS.

Run it locally

npm install
npm run dev

Open the URL Vite prints (usually http://localhost:5173).

To build for production / deploy:

npm run build
npm run preview   # preview the production build locally

The dist/ folder is what you deploy (Vercel, Netlify, GitHub Pages, etc).

---

Where to edit your own content

1. Projects → src/data/projects.js

Each object in the array is one project card + its modal detail view.
Edit title, description, problem, solution, features, tech,
github, demo. Drop real project screenshots into public/projects/
and point image at them, e.g. image: "/projects/my-shot.jpg" — if an
image is missing, the card automatically falls back to a styled
placeholder, so nothing breaks while you're still adding assets.

2. Poster / graphic design work → src/data/posters.js

Same idea — add/remove entries, drop poster images into public/posters/,
and reference them as /posters/your-file.jpg.

3. Tech stack badges → src/data/techstack.js

Add, remove or re-group technologies under Development / Design / Hardware.

4. Profile / bio copy → src/components/About.jsx

The paragraph under "A developer with a creative side" — edit directly.

5. Hero name & tagline → src/components/Hero.jsx

"KRITANSH", the role line, and the supporting sentence are plain text
near the top of the component — edit directly.

6. Contact links, email, resume → src/components/Contact.jsx

• Email: the mailto: link in the links array near the top of the file.
• GitHub / LinkedIn / Instagram: swap the placeholder href values in the
  same links array for your real profile URLs.
• Resume: drop your PDF at public/resume/resume.pdf (create the file
  with exactly that name) and the "Download Resume" link will work as-is.

7. Favicon → public/favicon.svg

Replace with your own icon (keep the filename, or update the <link> in
index.html if you rename it).

---

Folder structure

src/
 ├── components/
 │   ├── Navbar.jsx          floating glass nav + mobile menu
 │   ├── Hero.jsx            headline + 3D hero scene
 │   ├── About.jsx           bio + floating 3D chip
 │   ├── TechStack.jsx       tilt badges by category
 │   ├── Projects.jsx        project grid + detail modal
 │   ├── ProjectCard.jsx     single 3D-tilt project card
 │   ├── DesignGallery.jsx   draggable 3D poster carousel + lightbox
 │   ├── PosterCard.jsx      single poster panel
 │   ├── CreativeSkills.jsx  animated statement + skill pills
 │   ├── Contact.jsx         links + footer
 │   ├── CustomCursor.jsx    desktop-only custom cursor
 │   ├── Scene.jsx           shared 3D primitives (shapes, particles)
 │   ├── icons.jsx           GitHub/LinkedIn/Instagram glyphs
 │   └── scenes/             lazy-loaded Three.js scenes (code-split)
 ├── data/
 │   ├── projects.js
 │   ├── posters.js
 │   └── techstack.js
 ├── useMediaFlags.js        mobile + prefers-reduced-motion detection
 ├── App.jsx
 ├── main.jsx
 └── index.css               design tokens (colors, fonts, utility classes)

public/
 ├── projects/                put project screenshots here
 ├── posters/                 put poster/design images here
 └── resume/                  put resume.pdf here

Notes on performance

• The Three.js scenes for each section (src/components/scenes/*.jsx) are
  lazy-loaded with React.lazy + Suspense, so the page shell (text, nav,
  buttons) paints immediately and the 3D chunk streams in right after —
  this keeps the initial JS payload small.
• Particle counts and extra floating shapes are automatically reduced on
  mobile (useMediaFlags).
• All ambient motion (floating shapes, particle drift, mouse parallax,
  scroll reveals) is disabled when the visitor's OS has
  prefers-reduced-motion turned on.
• The custom cursor is disabled on touch devices automatically.