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

> DevPortfolio is an Astro 5 and Tailwind CSS 4 template for developer portfolios. The entire site is controlled from a single src/config.ts file, and sections that have no data are hidden automatically without template edits.

**RyanFitzgerald/devportfolio** — A modern, minimalist portfolio template built with Astro and Tailwind CSS. Perfect for developers looking to showcase their skills, experience, and projects in a clean, professional way.

- Repository: https://github.com/RyanFitzgerald/devportfolio
- Website: https://ryanfitzgerald.github.io/devportfolio
- Stars: 4,980 · Forks: 4,166
- Language: Astro
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/ryanfitzgerald-devportfolio

## 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: astro@5.12.3, tailwindcss@4.1.11, 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:

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

For a project entry:

```typescript
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:

```typescript
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 astro@5.12.3 and tailwindcss@4.1.11. 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.

## 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.

## FAQ

### How do I add a blog to DevPortfolio?

DevPortfolio does not include a blog section. To add one, you would need to set up an Astro content collection in the src/ directory and add a new page route in src/pages/. Astro's documentation covers content collections, but this is not scaffolded by the DevPortfolio template itself.

### What is the devportfolio template by Ryan Fitzgerald?

DevPortfolio is an Astro 5 and Tailwind CSS 4 template for developer personal sites. All content is controlled through src/config.ts, which defines sections for name, title, skills, projects, work experience, and education. Sections with no data are hidden automatically.

### Can DevPortfolio be deployed to GitHub Pages for free?

Yes. The README links to Astro's GitHub Pages deployment guide. Because DevPortfolio generates a fully static site, it works with GitHub Pages' free hosting tier without requiring any server-side runtime.

## Sources

- [Issues](https://github.com/RyanFitzgerald/devportfolio/issues)
- [License: MIT](https://github.com/RyanFitzgerald/devportfolio/blob/master/LICENSE)
- [Project website](https://ryanfitzgerald.github.io/devportfolio)
- [README](https://github.com/RyanFitzgerald/devportfolio/blob/master/README.md)
- [RyanFitzgerald/devportfolio on GitHub](https://github.com/RyanFitzgerald/devportfolio)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ryanfitzgerald-devportfolio