CareerPortfolio

CareerPortfolio is an open-source, data-driven portfolio template built with Astro static site generation, designed to help professionals publish a fast, customizable career site without writing frontend code.

What is CareerPortfolio?

CareerPortfolio is a portfolio template that runs on Astro (v6) with Tailwind CSS and Native Browser Animations. It takes structured JSON files from src/data/ as the sole content source and outputs a fully responsive static site with auto-generated sitemap.xml, robots.txt, and a dynamic /llms.txt endpoint for AI/LLM crawlers, plus Open Graph, Twitter Card, and JSON-LD structured data. The template is freely available under the MIT License and is deployable to Netlify (demo link) or any static hosting platform.

Key Features

• Zero-JS by Default — Uses Astro's islands architecture, so pages ship minimal JavaScript.
• JSON-First Customization — Update portfolio content by editing JSON files in src/data/; no code edits required.
• SEO & AI Ready — Auto-generates sitemap-index.xml and robots.txt at build time, and serves a /llms.txt Markdown route for AI agents via src/pages/llms.txt.ts.
• Built-in Themes — Choose among default, strategic, innovator, and executive color palettes; light/dark mode is handled automatically.
• Responsive Layout — Optimized for mobile, tablet, and desktop widths.
• Performance Focus — Built with Lighthouse perfect-score optimization in mind.
• Image Optimization — Project and profile images placed in src/assets/ get automatic Astro optimization.

Who is it for?

• Job seekers and professionals — Create a polished career portfolio to present experience, skills, and project highlights without touching HTML or CSS.
• Developers — Use it as a starter kit for a personal site; Astro components and layouts are fully customizable.
• AI-savvy users — Leverage the /llms.txt route to make portfolio content readable by AI agents and web crawlers.

What can you do with CareerPortfolio?

• Customize the visual theme — Edit src/config.ts and set baseTheme to default, strategic, innovator, or executive; dark/light toggles are included.
• Update SEO metadata — Fill fields like siteUrl, webpageTitle, description, lang, jobTitle, keywords, twitterHandle, and ogImageUrl in src/data/home.json.
• Add projects and profile info — Manage data in JSON files under src/data/ and images in src/assets/.
• Deploy to your preferred host — Run npm run build and publish the resulting dist/ folder to Netlify, Vercel, or any static hosting service.

How does it work?

1. Click Use this template on the GitHub repository to create a new repo.
2. Clone the repository, then run npm install and npm run dev.
3. Edit JSON files in src/data/ and src/config.ts to personalize content and theme.
4. Execute npm run build and deploy the generated static site.

Pros and cons

• Pros: Zero-JS default improves performance; JSON-first approach makes content updates simple; built-in SEO/AI features; four built-in themes; MIT licensed.
• Cons: Requires Node.js v22.12.0 or higher and Astro v6; the optional FastAPI backend is announced as "open source release coming soon," so the current template is fully static.

Pricing

Free — The project is open source under the MIT License.

FAQ

Does CareerPortfolio require JavaScript to run?

No. The template is zero-JS by default thanks to Astro's islands architecture, so it works with JavaScript disabled and loads quickly.

Can I change the color theme?

Yes. Open src/config.ts and update the baseTheme variable to default, strategic, innovator, or executive. Dark and light mode are handled automatically.

What is the /llms.txt endpoint?

It's a dynamically generated Markdown route at /llms.txt that presents your portfolio as plain text for AI agents and LLM web crawlers, powered by src/pages/llms.txt.ts.

Is the FastAPI backend required?

No. The template works as a purely static site. The FastAPI backend is optional and its open-source release is planned but not yet available.

How do I update my portfolio's SEO settings?

Edit the fields in src/data/home.json, including siteUrl, description, jobTitle, keywords, twitterHandle, and ogImageUrl. These drive meta tags, Open Graph, and JSON-LD.