Astro Portfolio - Stron

Astro Portfolio Template

A personal portfolio template built with Astro, designed to be easy to customize and deploy.

Customization

All portfolio content is managed via TypeScript files located in src/data/. Edit these files to customize your information:

src/data/aboutMe.ts

Personal and contact information:

• name: Name and primary title
• profession: Current profession
• description: Short description
• bio.paragraphs: Array of paragraphs for the “About” section
• skills: Array of technical skills
• hobbies: Array of personal hobbies
• profile.picture: Path to the profile image
• banner.image: URL or path to the banner image
• contact: Email and phone number
• socialMedia: Links to social media

src/data/experience.ts

• company: Company name
• position: Job title or position
• duration: Time period
• responsibilities: Array of responsibilities

src/data/projects.ts

Array of projects. Each project includes:

• title: Project name
• description: Project description
• image: URL of the project image
• link: Link to the project
• stack: Array of technologies used

src/data/skills.ts

Array of technical skills with SVG icons. Add or remove skills by modifying this file. The SVG icons are stored in src/assets/icons/.

Data Flow

1. Data is defined in TypeScript files (src/data/)
2. Sections (src/components/sections/) import and consume this data
3. Card components (ExperienceCard, ProjectCard) render individual elements
4. The home page (src/pages/index.astro) composes all sections
5. The Layout (src/Layouts/Layout.astro) provides the HTML structure and meta tags

Styles

The project uses:

1.   CSS variables for automatic light/dark themes via light-dark()
2.   Scoped styles in Astro components
3.   Roboto Mono Variable font from Fontsource
4.   CSS Grid for the main layout
5.   Customizable CSS variables in styles.css

Rendering Mode

The project is configured in server mode (SSR) in astro.config.mjs. To generate a static site, change output: ‘server’ to output: ‘static’.

Technologies

• Astro 6.0.8
• TypeScript
• CSS with native variables
• Roboto Mono Variable font
• Prettier for code formatting