3D Interactive Developer Portfolio

Professional, modern portfolio showcasing work, technical skills, and a custom 3D Spline keyboard with polished animations and responsive design.

View Live Preview »

Table of Contents

• Table of Contents
• About The Project
• Tech Stack
• Getting Started
  • Prerequisites
  • Install
  • Environment Setup
  • Running Locally
• Project Structure
• Deployment (Vercel)
• Contributing
• License
• Contact
• Acknowledgements

About The Project

This repository hosts my personal 3D portfolio website, designed to reflect my creativity and technical expertise through immersive, responsive design and fluid animations.

At its core lies a custom-built 3D interactive keyboard (download here) made in Spline. Each keycap maps to a skill and reveals a title and short description on hover, offering visitors a fun and engaging way to explore my skillset.

Key Features

• Custom 3D Spline Keyboard: interactive keycaps implemented with Spline Runtime; hover to reveal skill metadata.
• Smooth Motion & Interactions: GSAP + Framer Motion power scroll-triggered reveals and micro-interactions.
• Space-inspired Visual Theme: subtle particle system and dark, minimal aesthetic.
• Responsive & Accessible: Tailwind CSS and component-driven UI for consistent behavior across devices.
• Validated Contact Flow: contact form handled via Resend API, input validated with Zod.
• Realtime Utilities: Socket.io integrated for realtime features where applicable.

(back to top)

Tech Stack

Layer	Tools
Framework	Next.js, React
Styling & UI	Tailwind CSS, Shadcn UI, Aceternity UI
3D & Animations	Spline Runtime, GSAP, Framer Motion
Utilities	Resend, Socket.io, Zod
Hosting	Vercel

(back to top)

Getting Started

Prerequisites

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

Install

# clone
git clone https://github.com/syedharif/project_3D_developer_portfolio.git
cd project_3D_developer_portfolio

# install dependencies
npm install
# or
yarn install

Environment Setup

Create a .env.local file in the root directory and add your environment variables:

# .env.local
RESEND_API_KEY=your_resend_api_key_here

Security Tip: Never commit your .env.local file. Use Vercel’s Environment Variables section for deployment secrets.

Running Locally

# Start development server
npm run dev
# or
yarn dev

Open http://localhost:3000 to view your local build.

Build for Production

npm run build
npm run start
# or
yarn build
yarn start

(back to top)

Project Structure

+---public
|   \---assets
|       +---icons
|       +---nav-link-previews
|       +---projects-screenshots
|       |   \---portfolio
|       \---seo
\---src
    +---app
    |   +---about
    |   +---api
    |   |   \---send
    |   +---blog
    |   +---contact
    |   \---projects
    +---components
    |   +---footer
    |   +---header
    |   |   \---nav
    |   |       +---body
    |   |       +---footer
    |   |       \---image
    |   +---logos
    |   +---preloader
    |   +---realtime
    |   +---sections
    |   +---social
    |   +---theme
    |   \---ui
    +---contexts
    +---data
    +---hooks
    +---lib
    |   \---lenis
    +---types
    \---utils

(back to top)

Deployment (Vercel)

1. Push your repository to GitHub.

2. Go to Vercel → New Project.

3. Import your repository.

4. Add your environment variables under Settings → Environment Variables.

5. Deploy — Vercel automatically handles builds, previews, and production updates.

Note: You can enable automatic deployments for commits pushed to the main branch.

(back to top)

Contributing

This is a personal project, but performance, accessibility, and security suggestions are welcome.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

⭐ Don’t forget to star the repository if you found it inspiring!

(back to top)

License

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

(back to top)

Contact

Syed Harif Fayaz | LinkedIn - Twitter - dev.syedharif@gmail.com

(back to top)

Acknowledgements

• Naresh Khatri - for open-sourcing his 3D portfolio

• The open-source community for the tools that make creative web experiences possible.

(back to top)