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. - SEO Ready: Auto-generated
sitemap.xml&robots.txt, full Open Graph/Twitter Card support and JSON-LD structured data. - Built-in Themes: Switch between multiple professional color palettes and light/dark modes from a single config file.
- 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/.
This template comes with multiple built-in color palettes. To change the theme of your portfolio, open src/config.ts and update the baseTheme variable to one of the available options:
export const SITE_CONFIG = {
// Options: 'default', 'strategic', 'innovator', 'executive'
baseTheme: 'default',
};(The template will automatically handle the dark/light mode toggles for whichever base theme you choose!)
├── public/ # Global static assets (placeholder.jpg, favicon)
├── src/
│ ├── assets/ # Project & Profile images (Supports automatic Astro optimization)
│ ├── 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
│ └── config.ts # Global site configuration
├── astro.config.mjs # Astro configuration
└── tsconfig.json # Typescript configuration
All SEO metadata is driven from src/data/home.json. Update the fields below to improve your search engine and social media visibility:
| Field | Description |
|---|---|
siteUrl |
Your deployed domain (e.g. https://yourname.dev). Required for canonical URLs, sitemap, and absolute OG image links. |
lang |
Page language code (e.g. en, fr, de). Sets the <html lang> attribute. |
jobTitle |
Your role — included in the JSON-LD structured data shown to Google. |
keywords |
Comma-separated keywords for the <meta name="keywords"> tag. |
twitterHandle |
Your Twitter/X username (with or without @). Enables Twitter Card attribution. |
ogImageUrl |
Path to your Open Graph preview image. Use a 1200×630 px image for best results across all platforms. |
Automatic:
sitemap-index.xmlandrobots.txtare generated at build time — no manual editing needed.
| 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
Space Grotesk font: npm install @fontsource-variable/space-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