Dhruv Sharma - Portfolio Website

A stunning, retro-themed immersive portfolio website designed to showcase my journey, projects, and skills. Built with modern web technologies, this application features a unique neo-brutalism design aesthetic, interactive 3D elements, and smooth animations.

🚀 Features

• Retro Neo-Brutalism Design: A unique visual style combining bold borders, vibrant colors, and mono-spaced typography.
• Interactive Experience:
  • Keyboard Navigation: Navigate the site using custom shortcuts (Press ? to view keybinds).
  • 3D Elements: IP integrated using React Three Fiber.
  • Smooth Animations: Powered by Framer Motion.
• Dynamic Sections:
  • timeline: A tree-structured visualization of my professional journey.
  • Projects: Showcase of my work with GitHub integrations.
  • Experience: Detailed breakdown of my career path.
• Resume Viewer: Built-in PDF viewer for easy resume access.
• Floating Socials: Quick access to my social profiles.

🛠️ Tech Stack

Frontend

• Framework: React + Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• 3D Graphics: Three.js + React Three Fiber
• Icons: React Icons & Tabler Icons
• PDF Handling: React-PDF

Backend

• Runtime: Node.js
• Framework: Express.js
• Email Service: Nodemailer (For contact form submissions)
• Utilities: Cors, Dotenv

📦 Installation & Setup

Follow these steps to get the project running locally on your machine.

Prerequisites

• Node.js (v16.0.0 or higher)
• npm (v7.0.0 or higher)

1. Clone the Repository

git clone https://github.com/dhruv14122004/Dhruv-Website.git
cd Dhruv-Website

2. Backend Setup

Navigate to the backend directory and install dependencies:

cd backend
npm install

Create a .env file in the backend directory with the following variables:

EMAIL_USER="your-email@gmail.com"
EMAIL_PASS="your-app-specific-password"
EMAIL_TO="recipient-email@gmail.com"
PORT=5000

Note: For Gmail, use an App Password generated from your Google Account security settings.

Start the backend server:

npm start

The server will start on http://localhost:5000.

3. Frontend Setup

Open a new terminal, navigate to the frontend directory, and install dependencies:

cd frontend
npm install

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

🎮 Keyboard Shortcuts

The website supports keyboard-first navigation for power users:

• H: Scroll to Hero/Home
• E: Scroll to Experience
• P: Scroll to Projects
• C: Scroll to Contact
• R: Toggle Resume Modal
• ?: Show/Hide Keybinds Help

📂 Project Structure

Dhruv-Website/
├── backend/                # Node.js/Express Backend
│   ├── server.js           # Entry point
│   └── package.json
├── frontend/               # React Frontend
│   ├── public/             # Static assets
│   ├── src/
│   │   ├── assets/         # Images, fonts, PDFs
│   │   ├── components/     # Reusable React components
│   │   ├── App.jsx         # Main application component
│   │   └── main.jsx        # Entry point
│   └── package.json
└── readme.md               # Project documentation

---

Built with ❤️ by Dhruv Sharma