DevPortfolio: A Config-Driven Astro and Tailwind CSS Portfolio Template

One TypeScript File Controls the Entire Portfolio

DevPortfolio solves the problem of building a personal portfolio from scratch by providing a template where all content is defined in a single configuration file: src/config.ts. The README describes the template as 'entirely ready to go with a quick config edit.'

The audience is developers who want a professional-looking portfolio without writing layout code. The template includes predefined sections for personal information, social links, about text, skills, projects, work experience, and education. Any section without data in the config is hidden entirely from the rendered site, which means a developer can omit experience or education entries without touching the Astro component files.

The README notes that the project was completely rebuilt from the prior version. This is version 2, built with Astro 5 and Tailwind CSS v4. The older approach of editing HTML directly has been replaced by the config-driven model.

Project Structure and the src/config.ts Layout

The repository structure listed in the README has these key paths:

devportfolio/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── About.astro
│   │   ├── Education.astro
│   │   ├── Experience.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   └── Projects.astro
│   ├── pages/
│   │   └── index.astro
│   ├── styles/
│   │   └── global.css

Each section has its own Astro component, and the main page layout is in src/pages/index.astro. The global accent color is set in src/config.ts with the accentColor property, and changing it updates the theme across the entire site.

The package.json shows the build toolchain: [email protected], [email protected], and @tailwindcss/vite for integration with Astro's Vite-based build. Icons come from Tabler Icons via the @tabler dependencies.

The repository also ships a CLAUDE.md and a .cursor/rules directory, which the README describes as providing 'easy integration with your existing AI workflows.' These files give AI coding assistants context about the project structure.

Cloning, Configuring, and Running DevPortfolio Locally

Clone and install:

git clone https://github.com/RyanFitzgerald/devportfolio.git
cd devportfolio
npm install

Start the Astro development server:

npm run dev

The README shows the exact data shapes for each config section. For basic information:

name: "Your Name",
title: "Your Job Title",
description: "Brief site description",
accentColor: "#1d4ed8",

For a project entry:

projects: [
  {
    name: "Project Name",
    description: "Brief description of what the project does and its impact",
    link: "https://github.com/yourusername/project",
    skills: ["React", "Node.js", "AWS"],
  }
]

For a work experience entry:

experience: [
  {
    company: "Company Name",
    title: "Your Job Title",
    dateRange: "Jan 2022 - Present",
    bullets: [
      "Led development of microservices architecture serving 1M+ users",
    ],
  }
]

Building the site for deployment runs:

npm run build

Deployment Options: Netlify, Vercel, GitHub Pages, and Cloudflare

DevPortfolio is a static site and deploys to any static hosting provider. The README lists five options with links to Astro's deployment guides: Netlify, Vercel, GitHub Pages, Cloudflare Pages, and Render. All five can host a static Astro site for free.

GitHub Pages requires configuring the Astro site parameter in astro.config.mjs to match the repository name, because GitHub Pages serves projects at a subdirectory by default. The README links to Astro's GitHub Pages guide rather than explaining this inline.

The template does not include server-side rendering, so it cannot be deployed as an Astro server application without additional configuration. It is a fully static export.

What DevPortfolio Does Not Include

DevPortfolio has no blog. Developers who want to publish articles alongside their portfolio must add a content collection to the Astro project themselves. Astro's own documentation covers content collections, but DevPortfolio does not scaffold one.

There is no contact form or server-side functionality. Adding a contact form would require either a third-party form service like Formspree, or converting the Astro site to use server-side rendering with a backend endpoint.

There is no dark mode toggle in the template. The accent color is a single CSS custom property defined in src/config.ts, but the template does not ship with a dark theme variant out of the box.

The CHANGELOG.md in the repository root documents changes between template versions. The repository has no GitHub releases, so version tracking requires reading that file directly.

The template also does not include search engine optimization metadata management beyond what Astro handles by default. There is no sitemap plugin or robots.txt configuration in the repository. Developers who care about SEO will need to add astro-sitemap or configure the Astro sitemap integration themselves after cloning.

There is no internationalization (i18n) support. The template assumes a single language. Adding support for multiple languages requires either the Astro i18n routing configuration or a third-party integration, neither of which is included in the starter template. The Tabler Icons library used for social and navigation icons is imported as a dependency in package.json, but the README does not document the full list of icons used. Adding new icons requires browsing the Tabler library at tabler.io/icons and importing the specific icon component into the relevant Astro file.

DevPortfolio vs Other Portfolio Templates

The related search data for DevPortfolio surfaces similar repositories: Ashutosh1919's masterPortfolio, which is a React-based template, and various Next.js portfolio templates. The key difference in approach is the framework: DevPortfolio is built with Astro, which generates a fully static site by default and ships zero JavaScript to the browser unless a component requires interactivity. React-based portfolio templates typically ship the full React runtime, which adds to initial page load.

Astro's partial hydration model means that a DevPortfolio deployment sends only the markup and styles the page needs. For a portfolio, which is mostly static text and links, this is a good fit. The trade-off is that extending DevPortfolio with interactive components requires understanding Astro's island architecture, which is more involved than adding a React component to a React-based template.

The template includes CLAUDE.md and .cursor/rules to assist AI coding tools with project-specific context, which is a differentiator not found in most competing portfolio templates.

Maintenance History, License, and AI Workflow Files

The last push to the repository was on 2026-05-14. The repository has no GitHub releases; the CHANGELOG.md records version history. The license is MIT, which permits free use in commercial and personal deployments.

The package.json specifies [email protected] and [email protected]. Tailwind CSS v4 introduced breaking changes from v3, so projects that started with Tailwind v3 syntax cannot copy utility classes from v3 references without checking compatibility.

The README directs questions to the author's X (formerly Twitter) account. There is no issue tracker link in the README for bug reports, and the CONTRIBUTING.md is not mentioned, so the primary support channel for adopters is the author's social media.

Editorial conclusion

Developers who want a working portfolio site without building layout components from scratch will find DevPortfolio the fastest path to a deployed result. The entire configuration surface is a single TypeScript file, and the README documents the exact shape of every section. Developers who need a CMS, a blog, or a contact form will need to extend it, because those features are not included. The last push to the repository was on 2026-05-14. Before deploying, check that the Astro version in package.json is still receiving security patches and that Tailwind CSS v4's utility class names match any customizations made during development.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. RyanFitzgerald/devportfolio on GitHub