"Consciousness-responsive interfaces that anticipate, breathe, and resonate."
A high-performance, immersive software engineering portfolio built with Next.js 16 and React 19. This project demonstrates advanced frontend architecture, WebGL integration, and a custom "living" design system.
- Next.js 16 (App Router): Utilizing the latest React Server Components architecture.
- Living Interface: UI elements that "breathe" and react to cursor velocity and proximity.
- GSAP Animation Engine: Complex, timeline-based entry and interaction animations.
- Hybrid Rendering: Seamless blend of standard DOM and WebGL (Three.js) elements.
- Bento Grid Layout: Fluid, responsive grid system with neighbor-aware physics.
- MDX Content Layer: Type-safe blog and project portfolio management.
- Core: Next.js 16.1, React 19.2, TypeScript 5
- Styling: Tailwind CSS 4, CSS Modules
- Motion: GSAP 3.14, @gsap/react, Lenis Scroll
- Graphics: React Three Fiber, GLSL Shaders
- Testing: Vitest, React Testing Library
- Node.js 20+
- npm 10+
# Clone the repository
git clone https://github.com/minipuft/portfolio.git
# Enter directory
cd portfolio
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to view the application.
Detailed architectural documentation is available in the docs/ directory:
- Stack Overview: Deep dive into the "Year 3000" architecture and hooks.
- Animation Standards: Guidelines for the GSAP animation pipeline.
This project uses Vitest for unit and integration testing.
# Run tests
npm run test
# Run type check
npm run typechecksrc/
├── app/ # Next.js App Router pages
├── components/ #
│ ├── effects/ # Visual effects (Shaders, Distortion)
│ ├── home/ # Homepage specific components (Bento)
│ └── ui/ # Shared primitives (ScrambleText, Buttons)
├── lib/ #
│ ├── animations/ # GSAP presets
│ ├── hooks/ # Physics & interaction hooks
│ └── shaders/ # GLSL shader code
└── content/ # MDX content (Blog, Projects)This project is open source and available under the MIT License.