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
-
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
oryarn install --legacy-peer-deps
. -
Now app is fully configured 👍 and you can start using this app using
npm run dev
oryarn dev
.
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.
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
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!