Modern Space Theme Portfolio using Next.js 14 and Three.js
!Modern Space Theme Portfolio using Next.js 14 and Three.js
:notebook_with_decorative_cover: Table of Contents
- Folder Structure
- Getting Started
- Screenshots
- Tech Stack
- Stats
- Contribute
- Acknowledgements
- Buy Me a Coffee
- Follow Me
- Learn More
- Deploy on Vercel
- Give A Star
- Star History
- Give A Star
:bangbang: Folder Structure
Here is the folder structure of this app.
space-portfolio/
|- app/
|-- apple-icon.png
|-- favicon.ico
|-- globals.css
|-- icon1.png
|-- icon2.png
|-- layout.tsx
|-- page.tsx
|- components/
|-- main/
|-- sub/
|- config/
|-- index.ts
|- constants/
|-- index.ts
|- lib/
|-- motion.ts
|-- utils.ts
|- public/
|- .eslintrc.json
|- .gitignore
|- eslint.config.mjs
|- netlify.toml
|- next.config.js
|- package.json
|- pnpm-lock.yaml
|- pnpm-workspace.yaml
|- postcss.config.js
|- tailwind.config.ts
|- tsconfig.json:toolbox: Getting Started
- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Open terminal in root directory. Run
npm installorpnpm install.
- Now app is fully configured 👍 and you can start using this app using
npm run devorpnpm dev.
:raising_hand: Need Help?
If you run into issues during installation or setup:
- GitHub Discussions — Open a Q&A discussion for setup and troubleshooting help.
- Email — [email protected]
- Discord —
@sanidhyy
:camera: Screenshots:
:gear: Tech Stack
:wrench: Stats
:raised_hands: 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.
:gem: Acknowledgements
Useful resources and dependencies that are used in Space Portfolio.
- @heroicons/react: ^2.2.0
- @react-three/drei: ^10.7.8
- @react-three/fiber: ^9.7.0
- @types/node: ^26
- @types/react: 19.2.18
- @types/react-dom: 19.2.5
- @types/three: ^0.186.0
- autoprefixer: ^10.6.0
- clsx: ^2.1.1
- eslint: ^10.11.0
- eslint-config-next: 16.3.5
- framer-motion: ^13.4.4
- maath: ^0.10.8
- next: 16.3.5
- postcss: ^8
- react: 19.2.8
- react-dom: 19.2.8
- react-icons: ^5.7.0
- react-intersection-observer: ^11.0.1
- tailwind-merge: ^3.6.0
- tailwindcss: ^3.3.0
- three: ^0.186.1
- typescript: ^6
:coffee: Buy Me a Coffee
:rocket: Follow Me
:books: 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.
:page_with_curl: 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.
:star: Give A Star
You can also give this repository a star to show more people and they can use this repository.
:star2: Star History