A stylised personal portfolio site built with Astro, Vue 3, and Tailwind CSS.
It showcases projects, experiences, and skills with dynamic visuals, including a starfield background rendered using Three.js.
npm run docker:build🧑🚀 Powered by: Digital Ocean
Structure of my portfolio:
/
├── public/
│ └── favicon.svg
├── src/
│ ├── layouts/
│ │ └── Layout.astro
│ ├── types/
│ │ └── types.ts
│ ├── styles/
│ │ └── global.css
│ ├── content/
│ │ └── collection/index.json
│ ├── components/
│ │ └── category/component.[astro/vue]
│ ├── assets/
│ │ └── asset.*
│ └── pages/
│ └── index.astro
├── Dockerfile
├── compose.yaml
└── package.json
- Fully static, fast-loading site powered by Astro
- Dynamic starfield background using Three.js
- Dark/light theme toggle with animated transitions
- Responsive layout with Tailwind CSS
- Dockerised for easy deployment (Nginx/Alpine-based)
- CI via GitHub Actions with automatic Docker Hub publishing and versioning
- CD via watchtower with auto deployment to Digital Ocean
- Astro + Vue
- TailwindCSS
- Three.js (for starfield)
- Docker + Nginx Container
- GitHub Actions CI
- Plausible (self-hosted analytics)
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 type-check |
Run Astro and Vue type checking for CI |
npm run docker:build |
Build and publish Docker image for CI |
npm run astro ... |
Run CLI commands like astro add, astro check |
Feel free to check my longest running project or add my GitHub Statistics Snapshot to your profile README.