https://github.com/nk-works/portfolio
A visually stunning and interactive portfolio website built with React, Three.js, and Tailwind CSS to showcase my skills, projects, and creativity. This project combines modern web development practices with immersive 3D experiences to leave a lasting impression on the viewer.
https://github.com/nk-works/portfolio
emailjs nodejs npm portfolio reactjs tailwindcss threejs vercel-deployment
Last synced: 3 months ago
JSON representation
A visually stunning and interactive portfolio website built with React, Three.js, and Tailwind CSS to showcase my skills, projects, and creativity. This project combines modern web development practices with immersive 3D experiences to leave a lasting impression on the viewer.
- Host: GitHub
- URL: https://github.com/nk-works/portfolio
- Owner: NK-Works
- Created: 2024-11-19T20:48:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-29T17:22:47.000Z (6 months ago)
- Last Synced: 2026-01-01T20:51:03.572Z (6 months ago)
- Topics: emailjs, nodejs, npm, portfolio, reactjs, tailwindcss, threejs, vercel-deployment
- Language: JavaScript
- Homepage: https://anneshunag.vercel.app
- Size: 16.6 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Anneshu's Portfolio
Welcome to my portfolio, a personal website designed to stand out with immersive 3D experiences, seamless interactivity, and elegant design. This project is a showcase of modern web development techniques and serves as a platform to display skills, projects, and creativity.
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Links](#links)
Built with React.js for handling the user interface, Three.js for rendering 3D elements, and styled with TailwindCSS, the 3D Minimalistic portfolio is a website project. The primary goal is to demonstrate the developer's skills in a unique manner that creates a lasting impact.
- Node.js
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- Email JS
- Vite
- Tailwind CSS
## 🔋 Features
👉 **Immersive Hero**: An eye-catching 3D hacker room that responds to mouse movements, surrounded by animated mini-models.
👉 **Interactive About Me**: A sleek bento grid layout featuring personal info, a 3D globe pinpointing location, tech stack icons, and a one-click email copy option.
👉 **Dynamic Project Showcase**: Browse through projects while watching live demos inside a 3D computer model, seamlessly switching between different projects.
👉 **Engaging Experience Timeline**: Hover over career milestones to trigger interactive 3D animations that bring your professional journey to life.
👉 **Client Testimonials**: A dedicated section highlighting satisfied clients and their feedback.
👉 **Easy Contact Form**: A user-friendly email form for visitors to reach out directly from your portfolio.
👉 **Clean Footer**: A minimalist design featuring social media links for easy networking.
👉 **Fully Responsive**: Optimized layout ensuring a smooth experience across all devices, from desktop to mobile.
👉 **Magic Cursor**: A intuitive magic cursor that adds a sense of excitement to the user as he/she moves the cursor.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/NK-Works/Portfolio.git
cd Portfolio
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
VITE_APP_EMAILJS_SERVICE_ID=your_emailjs_service_id
REACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id
VITE_APP_EMAILJS_PUBLIC_KEY=your_emailjs_public_key
```
Replace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the [EmailJS website](https://www.emailjs.com/).
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🔗 Links
Here is the list of all the resources used in the project video:
- [Hacker Room](https://sketchfab.com/3d-models/hacker-room-stylized-a0cfe6edf2dd494c8a95addf6bb13a10)
- [Computer](https://sketchfab.com/3d-models/3d-computer-sketchfab-weekly-11-mar23-d9931a9aba7c4ea1bc12b2a59dcef16e)
- [Target Model](https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/target-stand/model.gltf)
- [React Logo](https://sketchfab.com/3d-models/react-logo-76174ceeba96487f9863f974636f641e)
- [gltfjsx](https://gltf.pmnd.rs/)
- [ReadyPlayerMe](https://readyplayer.me/)
- [Mixamo](https://www.mixamo.com/)
Consider 🌟 the repository to show some love 🙏