Portfolio 2.0 - Cinematic 3D Portfolio

A premium, cinematic 3D portfolio website built with React, Three.js, and Framer Motion. This project features a modern dark aesthetic, smooth scrolling transitions, and a fully functional contact system.

🚀 Architecture Overview

The project follows a Client-Server architecture:

• Frontend: A high-performance React application powered by Vite, utilizing Three.js for 3D renderings and GSAP/Framer Motion for complex animations.
• Backend: A Node.js Express server that handles form submissions and sends automated email notifications using Nodemailer.

🛠️ Tech Stack

Frontend

• Framework: React 19
• Build Tool: Vite
• 3D Engine: Three.js with React Three Fiber & Drei
• Animations: Framer Motion & GSAP
• Styling: Tailwind CSS v4
• Smooth Scroll: Lenis
• Icons: Lucide React

Backend

• Runtime: Node.js
• Framework: Express
• Email Service: Nodemailer
• Security: Dotenv for environment variables
• CORS: Cors for cross-origin resource sharing

📂 Project Structure

finalPortFolio/
├── frontend/             # React application source code
│   ├── src/
│   │   ├── components/   # UI Components (Sections, Layout, Common)
│   │   ├── fonts/        # Custom typography
│   │   └── App.jsx       # Main application entry
│   └── vite.config.js    # Vite configuration
├── backend/              # Node.js server source code
│   ├── server.js         # Express server & Mail logic
│   ├── .env              # Environment variables (not tracked)
│   └── package.json      # Backend dependencies
└── README.md             # Project documentation

⚙️ Setup and Installation

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

1. Clone the repository

git clone <repository-url>
cd finalPortFolio

2. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file based on env.example:

   PORT=5000
   EMAIL_USER=your-email@gmail.com
   EMAIL_PASS=your-app-password
   

4. Start the server:

   npm start

3. Frontend Setup

1. Navigate to the frontend directory:

   cd ../frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

✨ Features

• Cinematic Experience: Immersive 3D elements and background effects.
• Dynamic Navigation: Smooth scrolling with section-aware updates.
• Interactive Tech Stack: A premium grid of skills with hover interactions.
• Functional Contact Form: Real-time validation and email delivery.
• Responsive Design: Optimized for all screen sizes.

---

Developed by Ansh raj Singh Thakur