Portfolio (TeamPortfolio)
A high-performance, interactive portfolio website built with Next.js, NextUI, and Framer Motion.
Featuring a 3D magnetic hero section, glassmorphism aesthetics, and a smooth side-drawer navigation.
- 3D Magnetic Hero: Interactive card that follows mouse movement with 3D perspective and parallax depth.
- Glassmorphism UI: Modern frosted glass effects using backdrop-blur.
- Smooth Animations: Powered by Framer Motion (Spring physics, exit transitions).
- Side Drawer Navigation: Accessible, animated off-canvas menu.
- Responsive: Fully optimized for Mobile, Tablet, and Desktop.
- Dark Mode: Built with a dark-first aesthetic.
- Framework: Next.js (App Router)
- Styling: Tailwind CSS v3 & NextUI
- Animation: Framer Motion
- Icons: Lucide React
- Environment: Windows Subsystem for Linux (WSL 2)
Code is organized inside the src folder for a clean root directory.
TeamPortfolio/
├── public/ # Static assets (images, fonts)
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── layout.tsx # Root layout (Providers included here)
│ │ ├── page.tsx # Main Landing Page
│ │ └── globals.css # Global styles (Tailwind directives)
│ ├── components/ # Reusable UI Components
│ │ ├── FloatingHero.tsx # 3D Mouse-tracking Hero
│ │ ├── SideDrawer.tsx # Navigation Menu
│ │ └── Navigation.tsx # (Optional) Top Navbar
│ └── lib/ # Utility functions
├── .gitignore
├── next.config.js
├── tailwind.config.js # Configured for NextUI & Tailwind v3
└── tsconfig.json
- Node.js (LTS version recommended) installed via NVM.
- WSL 2 (if on Windows) is recommended for best performance.
-
Clone the repository:
git clone https://github.com/your-username/TeamPortfolio.git cd TeamPortfolio -
Install dependencies:
npm install -
Run the development server:
npm run dev -
Open the app: Visit http://localhost:3000 in your browser.
We follow a 3-branch workflow to ensure code stability.
| Branch | Role | Description |
|---|---|---|
dev |
Development | Work here. All new features and commits go here first. |
qa |
Testing | Merge dev into qa for final testing before release. |
main |
Production | Stable code only. Deployed to the live website. |
Workflow:
- Checkout dev:
git checkout dev - Write code & commit.
- Push to remote:
git push origin dev - Create Pull Request to merge
dev→qa.
This project uses Tailwind CSS v3 to ensure compatibility with NextUI.
- Do not upgrade to Tailwind v4 unless NextUI releases official support.
- If you see
Cannot find module, ensure yourtailwind.config.jsusesmodule.exportssyntax (CommonJS).
If you see a "Hydration Mismatch" error in the console, it is likely caused by browser extensions (like Grammarly) injecting code into the HTML body.
- Fix: The
<body suppressHydrationWarning>tag has been added tolayout.tsxto prevent these warnings.
This project is open source and available under the MIT License.