KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

Portfolio

★ 6 Open GitHub ↗

This is an immersive 3D developer portfolio website built with React, Three.js, and Tailwind CSS. The application features a highly interactive user interface with 3D graphics powered by React Three Fiber, including a floating desktop, rotating planets, and interactive technology spheres. It utilizes Framer Motion

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 𝕋𝕒𝕟𝕞𝕒𝕪 | 𝟯𝗗 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗣𝗼𝗿𝘁𝗳𝗼𝗹𝗶𝗼

<h3 align="center">✦ Ａｎ Ｉｍｍｅｒｓｉｖｅ ３Ｄ Ｗｅｂ Ｅｘｐｅｒｉｅｎｃｅ ✦</h3>
</div>

## 🤖 𝕀𝕟𝕥𝕣𝕠𝕕𝕦𝕔𝕥𝕚𝕠𝕟

Welcome to my **3D Developer Portfolio**. This project isn't just a showcase of work; it's a demonstration of modern web capabilities. Built with **React** and **Three.js**, it features a fully immersive 3D environment, interactive elements, and a high-end "cyber-tech" aesthetic.

The design system has been heavily customized to move beyond standard templates, introducing a unique typographic hierarchy and "*glowing*" visual effects that make every interaction feel premium.

> **Note**: This project is an advanced enhancement and modification of the original [3D Developer Portfolio](https://github.com/adrianhajdin/project_3D_developer_portfolio) by [Adrian Hajdin](https://github.com/adrianhajdin).  @adrianhajdin

## ⚡ 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

### 🌌 𝗜𝗺𝗺𝗲𝗿𝘀𝗶𝘃𝗲 𝟯𝗗 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀
- **Interactive Hero**: Features a 3D desktop model that users can rotate and explore.
- **3D Stars Background**: A particle system that simulates depth and movement as you scroll.
- **Floating Shapes**: Geometric 3D objects in the "Works" section.
- **Physically Based Rendering**: Realistic lighting and shadows powered by **Rᴇᴀᴄᴛ Tʜʀᴇᴇ Fɪʙᴇʀ**.

### 🎨 𝒜𝒹𝓋𝒶𝓃𝒸𝑒𝒹 𝒯𝓎𝓅𝑜𝑔𝓇𝒶𝓅𝒽𝓎 𝒮𝓎𝓈𝓉𝑒𝓂
We have implemented a custom multi-font system to create a distinct visual hierarchy:
- **Orbitron**: Used for tech keywords (e.g., "React", "Node.js") to give them a futuristic, glowing "token" look.
- **Oswald**: Strong, industrial sans-serif for main section headings.
- **Space Mono**: Monospace font for data-heavy elements like dates, skills, and tags, creating a "technical dashboard" feel.
- **Playfair Display**: Elegant italic serif used for subtext to provide a sophisticated contrast.
- **Sacramento**: A handwriting script used for the personal signature.

### ✨ 𝕀𝕟𝕥𝕖𝕣𝕒𝕔𝕥𝕚𝕧𝕖 𝕌𝕀 ℂ𝕠𝕞𝕡𝕠𝕟𝕖𝕟𝕥𝕤
- **Experience Timeline**: Vertical timeline cards with a special "Current" badge that pulses for your present role.
- **Project Cards**: Tilt-enabled cards that respond to mouse movement, with consistent iconography (`FaLaptopCode`).
- **Testimonials**: Feedback cards with integrated dates and author details.
- **Contact Form**: Functional 3D earth model accompanying a working email form.

## 🛠️ 𝚃𝚎𝚌𝚑 𝚂𝚝𝚊𝚌𝚔

- **Core**: [React 18](https://reactjs.org/), [Vite](https://vitejs.dev/)
- **3D & Graphics**: 
  - [Three.js](https://threejs.org/)
  - [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber)
  - [@react-three/drei](https://github.com/pmndrs/drei)
  - [Maath](https://github.com/pmndrs/maath) (Math tools for UI)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **Animation**: [Framer Motion](https://www.framer.com/motion/)
- **Utilities**: 
  - [EmailJS](https://www.emailjs.com/) (Form handling)
  - [React Vertical Timeline](https://github.com/stephane-monnot/react-vertical-timeline)
  - [React Tilt](https://github.com/jonathandion/react-tilt)

## 📥 𝘐𝘯𝘴𝘵𝘢𝘭𝘭𝘢𝘵𝘪𝘰𝘯 & 𝘋𝘦𝘱𝘦𝘯𝘥𝘦𝘯𝘤𝘪𝘦𝘴

This project requires **Node.js** (v16 or higher) to manage dependencies.

1.  **Clone the repository**
    ```bash
    git clone https://github.com/your-username/3d-portfolio.git
    cd 3d-portfolio
    ```

2.  **Install all dependencies (Precise Method)**
    The project uses `npm` to manage packages. Run the following command to strictly install all required modules listed in `package.json`:
    ```bash
    npm install
    ```
    This command reads the `package.json` file and installs the exact versions of the libraries needed.

<details>
    <summary>Click to view all installed modules</summary>

**Core Dependencies (`dependencies`):**
    - `react`, `react-dom`: Core UI library.
    - `three`, `@react-three/fiber`, `@react-three/drei`: 3D rendering engine and helpers.
    - `framer-motion`: For complex 2D and 3D animations.
    - `maath`: Mathematics library for 3D interactions.
    - `react-vertical-timeline-component`: For the Experience timeline.
    - `react-tilt`: For interactive card effects.
    - `react-icons`: Icon pack.
    - `@emailjs/browser`: For the contact form functionality.

**Development Dependencies (`devDependencies`):**
    - `vite`, `@vitejs/plugin-react`: Fast build tool and development server.
    - `tailwindcss`, `postcss`, `autoprefixer`: CSS styling framework.

</details>

3.  **Set up Environment Variables**
    Create a `.env` file in the root directory to configure the contact form (EmailJS).
    ```env
    VITE_APP_EMAILJS_SERVICE_ID=your_service_id
    VITE_APP_EMAILJS_TEMPLATE_ID=your_template_id
    VITE_APP_EMAILJS_PUBLIC_KEY=your_public_key
    ```
    *Note: You can get these keys by signing up locally at [EmailJS](https://www.emailjs.com/).*

4.  **Run the development server**
    Start the local server to view the website:
    ```bash
    npm run dev
    ```
    The application will launch at `http://localhost:5173`.

## 📂 𝕻𝖗𝖔𝖏𝖊𝖈𝖙 𝕾𝖙𝖗𝖚𝖈𝖙𝖚𝖗𝖊

```
3d-portfolio/
├── public/                 # Static assets (favicons, textures)
│   └── desktop_pc/         # GLTF 3D models and textures
├── src/
│   ├── assets/             # Project assets
│   │   ├── company/        # Company logos (Meta, Shopify, etc.)
│   │   ├── tech/           # Tech stack icons (React, ThreeJS, etc.)
│   │   └── ...             # Miscellaneous images
│   ├── components/         # React UI Components
│   │   ├── canvas/         # 3D Scenes & Wrappers
│   │   │   ├── Ball.jsx    # Interactive 3D Ball
│   │   │   ├── Computers.jsx # Hero 3D Desktop Scene
│   │   │   ├── Earth.jsx   # 3D Earth Contact Model
│   │   │   ├── Stars.jsx   # Background Starfield
│   │   │   └── index.js    # Canvas Exports
│   │   ├── About.jsx       # About Section
│   │   ├── Contact.jsx     # Contact Section
│   │   ├── Experience.jsx  # Work Experience Timeline
│   │   ├── Feedbacks.jsx   # Testimonials Section
│   │   ├── Hero.jsx        # Landing Page 3D Hero
│   │   ├── Navbar.jsx      # Navigation Bar
│   │   ├── Works.jsx       # Project Portfolio Section
│   │   ├── Loader.jsx      # 3D Loading Spinner
│   │   ├── Tech.jsx        # Skills Section
│   │   └── ...             # Inputs, Buttons, etc.
│   ├── constants/
│   │   └── index.js        # Central Data (Text, links, configs)
│   ├── hoc/
│   │   └── SectionWrapper.jsx # Higher-Order Component for animations
│   ├── utils/
│   │   └── motion.js       # Framer Motion variance configs
│   ├── App.jsx             # Main Application Entry
│   ├── main.jsx            # React DOM Root
│   └── index.css           # Global Styles & Typography Import
├── .env                    # Environment Variables (EmailJS)
├── index.html              # HTML Entry Point
├── package.json            # Project Dependencies
├── tailwind.config.cjs     # Tailwind Configuration
└── vite.config.js          # Vite Configuration
```

## 🛠️ ᑕᑌᔕTOᗰIZᗩTIOᑎ

### 𝐔𝐩𝐝𝐚𝐭𝐢𝐧𝐠 𝐂𝐨𝐧𝐭𝐞𝐧𝐭
All text content is centrally managed in `src/constants/index.js`. You can easily update:
- **Nav Links**: Navigation menu items.
- **Services**: Cards shown in the About section.
- **Technologies**: Skills icons.
- **Experiences**: Work history (add `skills: []` array for new entries).
- **Testimonials**: Client feedback (add `date` field for timestamps).
- **Projects**: Portfolio items.

### 𝐂𝐡𝐚𝐧𝐠𝐢𝐧𝐠 𝐅𝐨𝐧𝐭𝐬
Fonts are imported in `src/index.css`. To change them, simply update the Google Fonts import URL and modify the Tailwind classes in the respective components.

---

<div align="center">
  Made with ❤️ by <b>Tanmay</b>
</div>

Portfolio

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README