TEAMSTRAWHATS

Team Strawhats | Digital Collective Portfolio

“Cyberpunk Noir” meets “Cinematic Modernism”
An immersive, high-performance 3D portfolio featuring a deep animated gradient environment, glassmorphism UI, and sophisticated typographic interplay.

✨ Features

• 3D Core Engine: Built with React Three Fiber.
  • Custom Particle System (Noise-driven & performance optimized).
  • Post-Processing Effects: Bloom, Noise, Chromatic Aberration, and Glitch.
  • Animated Background Shader.
• “Cinematic Modern Noir” Aesthetic:
  • Typography: A mix of Cormorant Garamond (Elegant Serif) and Syncopate (Futuristic Sans).
  • Glassmorphism: High-blur, dark-glass UI components.
  • Magnetic Cursor: Physics-based trailing cursor with magnetic snap and “VIEW” text reveal.
• Interactions:
  • Scroll-Driven Transitions: Seamless 3D model switching tied to native window scroll.
  • Hover Effects: Stacks/Skills trigger 3D model reactions (spin + glow).
  • Floating Text: Names feature a “Glass & Floating” animation logic.
• Performance: Optimized for 60FPS using Lenis smooth scroll.

🛠 Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• 3D: Three.js, @react-three/fiber, @react-three/drei, @react-three/postprocessing
• Styling: Tailwind CSS
• Animation: GSAP, Framer Motion
• State Management: Zustand
• Hosting: Firebase Hosting (Dynamic)

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

1. Clone the repository:

   git clone https://github.com/SarmaHighOnCode/TEAMSTRAWHATS.git
   cd TEAMSTRAWHATS/team-strawhats-portfolio
   

2. Install dependencies:

   npm install
   # or
   npm i --legacy-peer-deps
   

3. Run Development Server:

   npm run dev
   

   Open http://localhost:3000 to view it.

📦 Deployment (Firebase)

This project is configured for Firebase Dynamic Hosting (Next.js server functions supported).

1. Install Firebase Tools (if not installed):

   npm install -g firebase-tools
   

2. Login to Firebase:

   firebase login
   

3. Deploy:

   npm run build
   firebase deploy
   

📂 Project Structure

src/
├── app/                  # Next.js App Router (Layout, Page)
├── components/
│   ├── canvas/           # R3F 3D Components (Scene, MemberModel, Effects)
│   ├── dom/              # HTML UI Components (Overlay, Cursor)
│   └── layout/           # Layout Utilities (SmoothScroll)
├── store/                # Zustand State (useStore.ts)
└── styles/               # Global CSS

🤝 Contribution

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

Built with ❤️ by Team Strawhats