Skip to content

Repository files navigation

🎨 John 3D Portfolio

A modern, animated, and fully responsive 3D creator portfolio built with React, Vite, Tailwind CSS, Framer Motion, and Firebase.

This project showcases a cinematic hero section, smooth animations, a floating 3D portrait, and a clean dark theme.
It is designed to match a premium portfolio layout with pixel‑perfect alignment and responsive behavior across all devices.


🚀 Features

🎭 Hero Section

  • Centered heading: "HI, I'M JOHN" (always on one line)
  • Free‑floating 3D portrait (never clipped or duplicated)
  • Cinematic spacing and alignment
  • Responsive layout that matches the reference design exactly
  • Right‑aligned Contact Me button with gradient styling

🌀 Animations

  • Smooth fade‑ins using Framer Motion
  • Floating portrait with subtle motion
  • Clean transitions between sections

🎨 UI / Theme

  • Dark theme (#0C0C0C)
  • Premium typography
  • Gradient accents
  • Fully responsive on mobile, tablet, and desktop
  • Layout stays consistent with the reference image on all screen sizes

📁 Project Structure

src/ ├── components/ │ ├── Hero/ │ ├── About/ │ ├── Services/ │ ├── Projects/ │ └── UI/ ├── firebase/ │ └── firebase.ts ├── App.tsx ├── main.tsx └── index.css

live demo: https://mock-portfolio-6b004.web.app

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages