Live Preview: jihed-hagui.vercel.app

Elevate Your Digital Presence

Forget generic, flat portfolio websites.

A cinematic, interactive portfolio template built for developers, designers, creative technologists, and digital artists who want their work to feel like an experience.

Powered by Next.js 14, Three.js, React Three Fiber, GSAP, and Lenis combines real-time 3D, immersive motion, interactive sound, and carefully crafted transitions into one unforgettable digital experience.

Built to capture attention, showcase your work with impact, and create the kind of first impression that sets you apart.

Key Features

Real-Time 3D WebGL

Interactive 3D experiences powered by Three.js and React Three Fiber, featuring custom scenes including the Skull, Chess Knight, and The Thinker.

Optimized rendering keeps the experience responsive while preserving the visual quality of the 3D environments.

Cinematic Animations

GSAP ScrollTrigger, Lenis smooth scrolling, Framer Motion, custom physics-inspired interactions, card-fanning effects, and cinematic transitions create a portfolio that feels alive from the first scroll to the final section.

Immersive Soundscape

A built-in Web Audio system adds an atmospheric layer to the browsing experience.

Interactive audio feedback and carefully integrated sound design make the portfolio feel more like a digital experience than a traditional website.

Effortless Customization

Designed to be customized without fighting the codebase.

Update your personal information, projects, colors, links, and other content while keeping the underlying architecture intact.

Ready-to-Use Contact Form

Integrated with Resend API for reliable contact form delivery.

Connect your email credentials and start receiving inquiries directly from your portfolio.

Responsive Performance

Built with desktop and mobile performance in mind.

Adaptive 3D settings, responsive layouts, optimized rendering, and device-aware performance controls help keep the experience smooth across different screen sizes.

Clean & Well-Commented Code

Built entirely with TypeScript and organized with a clean, modular architecture.

The code is carefully commented throughout the project, making it easier to understand how the different systems work and where to make changes.

No exposed API keys. No unnecessary complexity. No messy source code.

Complete Documentation

A dedicated README file is included with the project.

It covers the essential steps for installing dependencies, configuring the project, running the development server, setting up environment variables, and getting the portfolio ready for deployment.

Technology

Framework
Next.js 14
React 18
TypeScript

3D
Three.js
React Three Fiber
@react-three/drei

Animation
GSAP
ScrollTrigger
Framer Motion
Lenis

Styling
Tailwind CSS

State & Audio
Zustand
Web Audio API

Email
Resend API

Built For

Creative developers
Frontend developers
Full-stack developers
3D artists
UI/UX designers
Creative directors
Digital agencies
Freelancers

Whether you're showcasing engineering, design, 3D artwork, experimental projects, or creative development, it gives your work the visual environment it deserves.

Setup

Getting started takes only a few steps.

1. Download the source code.

2. Follow the included README.

3. Install the dependencies.

4. Configure your environment variables.

5. Add your personal content.

6. Start the development server.

7. Deploy your portfolio.

The Experience

Its not another portfolio built around a hero section, project grid, and contact button.

It's designed around a different idea:

The portfolio itself should become part of the work.

A cinematic digital environment where technology, motion, sound, and visual storytelling come together to make your work impossible to overlook.

Don't just showcase your work.
Create an experience around it.