Modern Space Theme Portfolio using Next.js 14 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/
  |- app/
    |-- favicon.ico
    |-- globals.css
    |-- layout.tsx
    |-- page.tsx
  |- components/
    |-- main/
        |--- encryption.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/
    |-- projects/
    |-- skills/
    |-- videos/
    |-- hero-bg.svg
    |-- lock-main.png
    |-- lock-top.png
    |-- logo.png
  |- .eslintrc.json
  |- .gitignore
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
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.

@heroicons/react: ^2.1.1
@react-three/drei: ^9.93.0
@react-three/fiber: ^8.15.13
clsx: ^2.1.0
framer-motion: ^10.17.12
next: 14.0.4
react: ^18
react-dom: ^18
react-icons: ^5.0.1
react-intersection-observer: ^9.5.3
tailwind-merge: ^2.2.0
three: ^0.160.0
@types/node: ^20
@types/react: ^18
@types/react-dom: ^18
autoprefixer: ^10.0.1
eslint: ^8
eslint-config-next: 14.0.4
postcss: ^8
tailwindcss: ^3.3.0
typescript: ^5

📚 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!

saidv / portfolio