### Start DevPortfolio Development Server

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

This command starts the Astro development server, allowing you to preview the DevPortfolio project locally during development.

```bash
npm run dev
```

--------------------------------

### Clone and Install DevPortfolio

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

This snippet shows how to clone the DevPortfolio repository from GitHub, navigate into the project directory, and install the necessary Node.js dependencies using npm.

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

--------------------------------

### Development Commands for DevPortfolio

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/CLAUDE.md

Provides essential npm commands for managing the development environment of the DevPortfolio project. These include starting the development server, building for production, and previewing the production build.

```bash
npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build
```

--------------------------------

### Projects Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Defines the structure for showcasing projects, including the project name, a brief description, a link to the repository or live demo, and the technologies used. This data is managed in `src/config.ts`.

```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"],
  }
]
```

--------------------------------

### About Section Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Allows for a detailed personal bio or description to be added to the 'About' section of the portfolio. This text is managed in the `src/config.ts` file.

```TypeScript
aboutMe: "A paragraph describing yourself, your background, interests, and what you're passionate about. This appears in the About section of your portfolio."
```

--------------------------------

### Experience Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Structures the work experience section, including company name, job title, date range, and key responsibilities or achievements as bullet points. This configuration is handled in `src/config.ts`.

```TypeScript
experience: [
  {
    company: "Company Name",
    title: "Your Job Title",
    dateRange: "Jan 2022 - Present",
    bullets: [
      "Led development of microservices architecture serving 1M+ users",
      "Reduced API response times by 40% through optimization",
      "Mentored team of 5 junior developers",
    ],
  }
]
```

--------------------------------

### Basic Information Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Defines the basic personal information for the portfolio, including name, title, a brief description, and an accent color for the site's theme. This configuration is managed within the `src/config.ts` file.

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

--------------------------------

### Astro Component Structure

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/CLAUDE.md

Illustrates the typical structure of Astro components used within the DevPortfolio project. Components are designed to be self-contained and read data directly from the `siteConfig` object, utilizing Tailwind CSS for styling.

```astro
---
import type { SiteConfig } from '../config';

interface Props {
  siteConfig: SiteConfig;
}

const { siteConfig } = Astro.props;
---

<section class="py-16">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">{siteConfig.aboutMe.title}</h2>
    <p class="text-lg text-center max-w-2xl mx-auto">{siteConfig.aboutMe.content}</p>
  </div>
</section>

```

--------------------------------

### Skills Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Lists the technical skills to be showcased in the portfolio. This array of strings is defined in `src/config.ts`, and the skills section will be hidden if this array is empty.

```TypeScript
skills: ["JavaScript", "React", "Node.js", "Python", "AWS", "Docker"]
```

--------------------------------

### Configuration Structure in TypeScript

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/CLAUDE.md

Details the structure of the `siteConfig` object exported from `src/config.ts`. This object serves as the central point for customizing the portfolio, including basic information, social links, about me section, skills, projects, experience, and education.

```typescript
export interface SiteConfig {
  // Basic info
  name: string;
  title: string;
  description: string;
  accentColor: string;

  // Social links (optional)
  email?: string;
  linkedin?: string;
  twitter?: string;
  github?: string;

  // About Me
  aboutMe: string;

  // Skills
  skills: string[];

  // Projects
  projects: Array<{ name: string; description: string; link: string; skills: string[] }>;

  // Experience
  experience: Array<{ company: string; title: string; dateRange: string; bullets: string[] }>;

  // Education
  education: Array<{ school: string; degree: string; dateRange: string; achievements: string[] }>;
}

declare const siteConfig: SiteConfig;

```

--------------------------------

### Education Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Details the educational background, including the school name, degree obtained, date range, and any notable achievements or honors. This information is configured in `src/config.ts`.

```TypeScript
education: [
  {
    school: "University Name",
    degree: "Bachelor of Science in Computer Science",
    dateRange: "2014 - 2018",
    achievements: [
      "Graduated Magna Cum Laude with 3.8 GPA",
      "Dean's List all semesters",
      "President of Computer Science Club"
    ]
  }
]
```

--------------------------------

### Social Links Configuration (TypeScript)

Source: https://github.com/ryanfitzgerald/devportfolio/blob/master/README.md

Specifies optional social media links for the portfolio, such as email, LinkedIn, Twitter, and GitHub. These links are configured in `src/config.ts` and will be displayed if provided.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.