Live Demo: careerportofio.netlify.app
A high-performance, responsive portfolio built with Astro, Tailwind CSS, and Native Browser Animations. Designed to be 100% data-driven and easy to customize as a reusable template.
- Zero-JS by Default: Leveraging Astro's islands architecture.
- JSON-First: Update your information in
src/data/without touching any code. - Fully Responsive: Optimized for mobile, tablet, and desktop.
- Performance: Optimized for perfect Lighthouse scores.
- Frontend: Astro (Static Site Generation)
- Styling: Tailwind CSS
- Icons: Iconify via
astro-icon - Deployment: Netlify
- Backend: FastAPI (Works without backend — open source release coming soon)
Follow these instructions to get a local copy up and running.
Make sure you have Astro v6 and Node.js (v22.12.0 or higher) installed on your machine.
- Click Use this template on this repository.
- Choose Create a new repository.
- Clone your new repository:
git clone <your-repo-url> - Navigate to your repo:
cd <your-repo-name> - Install dependencies:
npm install - Start development server:
npm run dev - Update your content in
/src/data/ - Build and deploy on your preferred platform
To make this portfolio yours, simply edit the JSON files in src/data/.
Directory Structure
├── public/ # Static assets (placeholder.jpg, favicon)
├── src/
│ ├── components/ # Reusable Astro components
│ ├── data/ # JSON files for project data
│ ├── layouts/ # Layout templates with Meta tags
│ ├── pages/ # Site routes (index.astro)
│ └── styles/ # global css styles
├── astro.config.mjs # Astro configuration
└── tsconfig.json # Typescript configuration
| 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 |
Tailwind CSS: npx astro add tailwind
Inter font: npm install @fontsource-variable/inter
Host Grotesk font: npm install @fontsource-variable/host-grotesk
Astro-icon: npx astro add astro-icon
Material Desing Icons: npm install @iconify-json/mdi
https://docs.astro.build/en/guides/styling/#add-tailwind-4
https://icon-sets.iconify.design/mdi/?category=Material
Contributions are welcome!
Please read the Contributing Guide before opening a PR.
This project is licensed under the MIT License