Modern Space Theme Portfolio using Next.js 15 and Three.js

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

space-portfolio/
  |- .github/
    |-- images/
        |--- img_main.png
        |--- img1.png
        |--- img2.png
        |--- img3.png
        |--- img4.png
        |--- stats.svg
  |- app/
    |-- favicon.ico
    |-- globals.css
    |-- layout.tsx
    |-- page.tsx
  |- components/
    |-- main/
        |--- contact-us.tsx
        |--- encryption.tsx
        |--- experience.tsx
        |--- footer.tsx
        |--- hero.tsx
        |--- navbar.tsx
        |--- projects.tsx
        |-- skills.tsx
        |-- star-background.tsx
    |-- sub/
        |--- hero-content.tsx
        |--- project-card.tsx
        |--- skill-data-provider.tsx
        |--- skill-text.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- lib/
    |-- motion.ts
    |-- utils.ts
  |- public/
    |-- CV/
        |--- MdFuadHasan.pdf
    |-- projects/
    |-- skills/
    |-- videos/
        |--- skills-bg.webm
    |-- hero-bg.svg
    |-- lock-main.png
    |-- lock-top.png
    |-- logo.png
  |- .eslintrc.json
  |- .gitignore
  |- CONTRIBUTING.md
  |- LICENSE
  |- README.md
  |- SECURITY.md
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.

2. Clone this repository to your local computer.

3. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

4. Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Space Portfolio.

• @emailjs/browser: ^4.4.1
• @heroicons/react: ^2.2.0
• @next/env: 15.0.3
• @react-three/drei: ^9.117.3
• @react-three/fiber: ^9.0.0-rc.1
• clsx: ^2.1.1
• form-data: ^4.0.1
• framer-motion: ^12.0.0-alpha.2
• glob: ^11.0.0
• next: 15.0.3
• react: 19.0.0-rc-66855b96-20241106
• react-dom: 19.0.0-rc-66855b96-20241106
• react-hook-form: ^7.53.2
• react-icons: ^5.3.0
• react-intersection-observer: ^9.13.1
• react-tilt: ^1.0.2
• react-vertical-timeline-component: ^3.6.0
• sharp: ^0.33.5
• sonner: ^1.7.0
• tailwind-merge: ^2.5.4
• three: ^0.170.0

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)