Imamul Hoque Ishmam | Visual Storyteller & Film Director Portfolio

Welcome to the official repository of Imamul Hoque Ishmam's Portfolio, a high-end, immersive personal website designed to showcase a professional filmmaker, editor, and photographer's visual journey.

This project is built using a modern full-stack architecture featuring Next.js (App Router), TypeScript, and Tailwind CSS v4, combined with powerful creative libraries like Three.js for background graphics, GSAP and Framer Motion for state-of-the-art animations, and Lenis for custom smooth scrolling.

---

🚀 Live Demo

Check out the live website: Imamul Hoque Ishmam Portfolio (Deployed on Vercel)

---

✨ Key Features

• 🌌 3D Interactive Background: Powered by Three.js, featuring a dynamic particle/star field that realistically responds to mouse movements, creating an atmospheric, cinematic depth.
• ✨ Silky-Smooth Scrolling: Utilizes Lenis Smooth Scroll to ensure consistent, inertia-based scroll experiences across all modern web browsers.
• 🎬 Premium Micro-Animations: Features complex timeline-based entry animations via GSAP and interactive, fluid micro-interactions using Framer Motion.
• 📧 Serverless Contact Form: Integrated with the Resend API and Next.js Route Handlers (app/api/contact/route.ts) to validate and send message submissions directly to the inbox without managing external mail servers.
• 📱 Fully Responsive & Adaptive UI: Mobile-first grid-based design, featuring a smooth, sliding navigation overlay optimized for all devices.
• 🎨 Curated Aesthetics & Typography: Employs premium dark mode color schemes paired with Google Fonts (Outfit & Geist) to convey high-end, professional branding.

---

🛠️ Tech Stack

This project leverages some of the most powerful modern tools for front-end developers:

Core Framework & Logic

• Next.js 16 (App Router): Framework for React 19 apps providing server-side rendering, static generation, and API routes.
• React 19: For component lifecycle, state, and UI.
• TypeScript: Type-safety and enterprise-grade architecture.

Animations & Creative Media

• Three.js: Renders WebGL-based interactive backgrounds.
• GSAP (GreenSock Animation Platform): Timeline-based orchestration for entrance animations.
• Framer Motion: Handles react-native-like declarative animations and transitions.
• Lenis & @studio-freight/lenis: Lightweight smooth scroll library for uniform scroll dynamics.

Styling & UI Utilities

• Tailwind CSS v4: Next-generation utility-first CSS framework.
• Tailwind Merge (twMerge): Safely resolves class naming conflicts dynamically.
• Lucide React & React Icons: Modern, lightweight SVG icon libraries.

Backend Integrations

• Resend: Email delivery platform for Node.js.

---

📁 Directory Structure

Below is an overview of the directory structure and the core files making up the codebase:

imamul-hoque/
├── app/                        # Next.js App Router root
│   ├── api/
│   │   └── contact/
│   │       └── route.ts        # Resend API email submission endpoint
│   ├── favicon.ico
│   ├── globals.css             # Main styling entry file with Tailwind & design tokens
│   ├── layout.tsx              # Application shell (integrates Three.js, Lenis, & Fonts)
│   └── page.tsx                # Home page (stitches sections together)
├── components/                 # Reusable UI component layer
│   ├── About.tsx               # Filmmaker bio & visual storyteller narrative
│   ├── Contact.tsx             # Responsive form with API integration & status alerts
│   ├── Footer.tsx              # Copyright notice & social links
│   ├── Hero.tsx                # Entrance section introducing Ishmam
│   ├── Navbar.tsx              # Interactive sticky header with mobile menu drawer
│   ├── Services.tsx            # Showcases skillsets (Direction, Editing, Color Grading, Foley)
│   ├── SmoothScroll.tsx        # Lenis wrapper initializing the scroll hook
│   └── ThreeBackground.tsx     # WebGL canvas displaying the star field particles
├── public/                     # Static assets (images, vectors, etc.)
│   ├── imamul_Hoque_Ishmam.jpeg
│   └── window.svg
├── .env.example                # Template for required environment variables
├── eslint.config.mjs           # ESLint setup for code style
├── next.config.ts              # Next.js compiler & server config
├── package.json                # Project dependencies and script runner configurations
└── tsconfig.json               # TypeScript path mapping & compiler rules

---

⚙️ Environment Variables

The contact form functionality requires connection details for the Resend API.

To configure these variables:

1. Create a copy of the .env.example file and rename it to .env:

   cp .env.example .env

2. Open .env and configure the following variable:

   # Obtain your API key at https://resend.com
   RESEND_API_KEY=your_resend_api_key_here

---

💻 Local Installation & Setup

To run this project on your local machine, follow these steps:

Prerequisites

Make sure you have Node.js (v20+ recommended) and npm installed.

1. Clone the Repository

git clone https://github.com/Islamul-Hoque/Client-Portfolio.git
cd Client-Portfolio

2. Install Dependencies

npm install

3. Set Up Your Environment

Create your .env file as described in the Environment Variables section.

4. Run the Development Server

npm run dev

Open your browser and navigate to http://localhost:3000 to view the application in action.

5. Production Build

To build and test the production-ready optimized build locally:

npm run build
npm run start

---

🚀 Deployment Guide

This project is fully optimized to run on Vercel with Next.js zero-configuration hosting.

Deploying via Vercel Git Integration

1. Push your code repository to GitHub, GitLab, or Bitbucket.
2. Log in to the Vercel Dashboard.
3. Click New Project and import your repository.
4. In the Environment Variables section of the configuration screen, add:
   • Key: RESEND_API_KEY
   • Value: [Your Resend API Key]
5. Click Deploy. Vercel will automatically run npm run build and provision your SSL-secured live site!

---

🛠️ Code Quality

Linting and code formatting rules are checked via ESLint. Before committing changes, make sure to test your code:

npm run lint

---

👤 Author

Islamul Hoque

MERN Stack Developer | Backend Enthusiast | Problem Solver

Get in touch or check out my profiles:

---

📄 License

This project is licensed under the MIT License - see the license file for details.