Astro Developer Portfolio Template

What is Astro Developer Portfolio Template?

Astro Developer Portfolio Template is a minimal, open-source developer portfolio starter built with Astro and TailwindCSS that ships zero JavaScript to the browser. It is designed for developers who want a fast, SEO-ready personal site to showcase projects and about-me content. The template produces a static site that can be deployed to any static host by copying the contents of the ./dist folder after running npm run build. The project is maintained by devidevio and has 88 stars on GitHub.

Key Features

• Zero JavaScript in final build — The static output contains no bundled client-side JavaScript, which keeps the page light and fast.
• 100/100 Google PageSpeed Score — The template is engineered to achieve perfect PageSpeed scores on both mobile and desktop.
• SEO & Social Media metadata — Includes OpenGraph, Twitter Card, and DublinCore metadata for better sharing and search visibility.
• Code highlighting with Shiki — Syntax highlighting for code blocks is powered by Shiki, supporting many languages.
• Fully responsive layout — The design adapts to mobile, tablet, and desktop screen sizes.
• Code-editor-inspired design — The visual style mimics a code editor, giving the portfolio a developer-centric aesthetic.
• Projects and about sections — Content is split into reusable Astro components: ContentProjects.astro and ContentAbout.astro, plus a Profile.astro for personal info.
• Simple customization — Update site metadata in astro.config.mjs, theme colors in tailwind.config.js, and content through frontmatter in the layout and component files.

Who is it for?

• Frontend developers — who want a quick starter to launch a personal portfolio without writing custom CSS or JavaScript.
• Job-seeking developers — who need an SEO-friendly, fast-loading site to showcase projects and GitHub links to recruiters.
• Open-source contributors — who want a minimal base to fork and adapt for their own portfolio or documentation site.
• Design-conscious developers — who appreciate a code-editor aesthetic and want a unique look different from typical resume sites.

What can you do with it?

• Launch a personal portfolio: Clone the repo, replace profile placeholder at src/assets/profile.png, edit the about and projects content in the Astro components, and deploy the ./dist output to any static hosting service.
• Customize branding: Change the primary theme color in tailwind.config.js, swap public/img/logo.svg for your own logo, and set a custom OpenGraph image at public/img/meta.png.
• Improve SEO: Update the site field in astro.config.mjs and the frontmatter in src/layouts/Layout.astro to control title, description, and social metadata.
• Set up sitemap and robots: Adjust /public/robots.txt to match your domain for search engine crawling.

How does it work?

The template uses Astro's static site generation: run npm install, then npm run dev for local development, and npm run build to produce a static site in ./dist. Deployment consists of copying the ./dist contents to any web server or static host.

FAQ

Does the template include any JavaScript?

No. The final build contains no bundled JavaScript, which is a key feature for performance.

Is Astro Developer Portfolio Template free?

The template is open-source and free to use; its GitHub repository can be forked and customized under its license.

How do I update my social media links?

Edit the links in src/components/Socials.astro — the social icons and URLs are defined there.

Where do I put my profile picture?

Replace the placeholder image at src/assets/profile.png with your own image.

How do I get 100/100 PageSpeed score?

The template is designed to achieve 100/100 on Google PageSpeed for both mobile and desktop out of the box, provided you don't add heavy external resources.