Timothy DeHof - 3D Portfolio Website by Tim DeHofTimothy DeHof - 3D Portfolio Website by Tim DeHof

Timothy DeHof - 3D Portfolio Website

Tim DeHof

Fullstack Engineer

React

Tailwind CSS

three.js

Computer Software

Like this project

Posted Sep 28, 2025

Created a 3D portfolio website using React and Three.js.

Likes

Views

Timothy DeHof - Portfolio Website

A modern, interactive 3D portfolio website showcasing my work as a Full-Stack Developer. Built with React, Three.js, and cutting-edge web technologies to create an immersive user experience.

✨ Features

3D Interactive Elements - Immersive 3D models and animations using Three.js and React Three Fiber

Responsive Design - Optimized for all devices with Tailwind CSS

Smooth Animations - GSAP-powered animations and transitions

Interactive Globe - 3D globe visualization showing global reach

Project Showcase - Dynamic project gallery with video previews

Contact Form - Integrated email functionality with EmailJS

Performance Optimized - Lazy loading and code splitting for fast load times

🚀 Tech Stack

Frontend: React 18, Vite

3D Graphics: Three.js, React Three Fiber, React Three Drei

Styling: Tailwind CSS

Animations: GSAP, Framer Motion

Email: EmailJS

Development: ESLint, TypeScript support

📦 Installation

Clone the repository:

git clone https://github.com/timDeHof/website.git
cd website

Install dependencies:

npm install

Create a .env file in the root directory and add your EmailJS credentials:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Start the development server:

npm run dev

🛠️ Available Scripts

npm run dev - Start development server

npm run build - Build for production

npm run preview - Preview production build

npm run lint - Run ESLint

🎯 Project Structure

src/
├── _components/          # Reusable 3D components
│   ├── Cube.jsx         # Interactive 3D cube
│   ├── Developer.jsx    # 3D developer model
│   ├── HackerRoom.jsx   # 3D room scene
│   └── ...
├── _sections/           # Page sections
│   ├── hero.jsx        # Hero section with 3D scene
│   ├── about.jsx       # About section
│   ├── projects.jsx    # Projects showcase
│   └── ...
├── constants/          # Static data and configurations
├── data/              # JSON data files
└── utils/             # Utility functions

🌟 Key Sections

Hero Section

Interactive 3D scene featuring a developer workspace with animated elements and responsive camera controls.

Projects

Showcase of 5 major projects including:

Podcastr - AI-powered podcast platform (work-in-progress)

LiveDoc - Real-time collaborative document editor (work-in-progress)

CarePulse - Healthcare management system (work-in-progress)

YumyumYes - Recipe discovery platform

Reelwatch - Movie watchlist application

Experience

Professional journey from Mechanical Engineer to Full-Stack Developer, featuring work with Chingu and various client projects.

🎨 3D Models & Assets

The project includes custom 3D models and textures:

Developer character with animations (idle, clapping, salute, victory)

Interactive workspace elements (computer, desk, smartphone)

Environmental models (hacker room, cube, rings)

High-quality textures and materials

📱 Responsive Design

Fully responsive across all devices with optimized 3D element positioning and scaling for:

Mobile devices (< 768px)

Tablets (768px - 1024px)

Desktop (> 1024px)

🔧 Performance Optimizations

Lazy loading of components with React.lazy()

Code splitting for better load times

Optimized 3D model loading with proper error handling

Responsive image loading

Efficient animation management

🤝 Contributing

This is a personal portfolio project, but feedback and suggestions are welcome! Feel free to open an issue or reach out directly.

📄 License

This project is open source and available under the MIT License.

Built with ❤️ by Timothy DeHof