DOCSEARCHbyAlgolia
Submit Docs

devportfolio

repository·master·Indexed 26 days ago

https://github.com/ryanfitzgerald/devportfolio

A modern, minimalist portfolio template built with Astro and Tailwind CSS. It allows developers to showcase skills, experience, and projects by modifying a single TypeScript configuration file at src/config.ts. The template supports custom accent colors, Tabler Icons, and deployment to platforms such as Netlify, Vercel, GitHub Pages, Cloudflare Pages, and Render.

Tokens
847
Snippets
2
Records
8
Agent score
40%

What's inside devportfolio

  2. Configure the site via src/config.ts

    master
    The entire portfolio is controlled through a single TypeScript configuration file located at src/config.ts. You can customize personal information, accent colors, social links, and content sections (About, Skills, Projects, Experience, Education). If a section's array is empty or removed from the config, that section will be hidden from the site automatically.

  3. Set up DevPortfolio locally

    master

    To run the DevPortfolio template on your local machine, clone the repository, install the dependencies using npm, and start the Astro development server.

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

  4. Configure Basic Information and Social Links

    master

    Use the following structure in src/config.ts to define your identity and social media presence. The accentColor accepts a hex color string which updates the theme site-wide.

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

social: {
  email: "your-email@example.com",
  linkedin: "https://linkedin.com/in/yourprofile",
  twitter: "https://twitter.com/yourprofile", 
  github: "https://github.com/yourusername",
}

  6. Configure the siteConfig object

    master
    The siteConfig object in src/config.ts is the central configuration for the portfolio. Use it to define personal information, branding (accent colors), social media links, professional experience, education, skills, and projects. Modifying this object updates the content displayed across the entire website.

  8. Reference the siteConfig schema

    master

    The siteConfig object follows this structure:

    • name: (string) Your full name.
    • title: (string) Your professional headline.
    • description: (string) A short description of the site.
    • accentColor: (string) A hex color code used for site-wide branding.
    • social: (object) Links to your profiles:
      • email: (string)
      • linkedin: (string)
      • twitter: (string)
      • github: (string)
    • aboutMe: (string) A biographical paragraph.
    • skills: (string[]) An array of technical skills.
    • projects: (array of objects) List of featured projects:
      • name: (string)
      • description: (string)
      • link: (string)
      • skills: (string[])
    • experience: (array of objects) Professional history:
      • company: (string)
      • title: (string)
      • dateRange: (string)
      • bullets: (string[]) List of key responsibilities or achievements.
    • education: (array of objects) Academic background:
      • school: (string)
      • degree: (string)
      • dateRange: (string)
      • achievements: (string[]) List of academic honors or details.