An Astro-based portfolio template for web developers who want to showcase their skills with a 3D design twist. This template focuses on creating visually stunning 3D experiences while maintaining a performant and responsive web interface.
- Astro for building ultra-fast, modern websites.
- React and Three.js for creating interactive 3D experiences.
- Fully customizable components.
- Responsive design optimized for all devices.
- Fast loading with optimized assets for 3D models and animations.
- Easy to deploy and extend.
Check out the live demo here: https://astro-3-d-template.vercel.app/ (#)
Follow these steps to get started with the template:
-
Clone the repository:
git clone https://github.com/JorgeGdev/Astro-3D-Template.git
Navigate to the project folder:
bash Copy code cd Astro-3D-Template Install dependencies:
bash Copy code npm install Run the development server:
bash Copy code npm run dev Your site will be live at http://localhost:3000/.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Usage 🔧 This template is easy to modify and customize to fit your needs. Here are some ideas for how you can extend or modify it:
Replace the 3D models in the /public/models folder to showcase your own designs (.glb models). The Pmndrs team is always hooking it up amazing 3D models as our DOG, check https://market.pmnd.rs/ Customize the theme and styles in the /src/styles folder to match your branding. Edit the content in the /src/pages to add your own sections, skills, and projects. Screenshots 📸 Here's a glimpse of the portfolio in action:
3D Interactive Header:
Portfolio Project Gallery:
Tech Stack 🛠️ Astro - Modern static site generator. React - Building interactive UI components. Three.js - 3D rendering and animations. Tailwind CSS - For responsive and customizable styling. Vercel - Fast and easy deployment. Contributing 🤝 Contributions are welcome! If you find any bugs or want to improve the template, feel free to open an issue or submit a pull request.
License 📜 This project is licensed under the MIT License. See the LICENSE file for details.
markdown Copy code