Structuring Modern Web Portfolios with Astro and the Repository Pattern

Getting Started

I have recently started working on my personal project, the 'portafolio-web-dev'. The goal of this project is to build a high-performance, maintainable showcase for my development work. To achieve this, I have begun setting up the foundational architecture using Astro and the Repository Pattern.

The Power of Astro for Portfolios

When building a portfolio, speed and SEO are paramount. Astro is an excellent choice here because it delivers static content by default, shipping zero JavaScript to the browser unless specifically requested. By leveraging its component-based architecture, I can easily modularize sections like project cards, contact forms, and navigation menus while maintaining a lightning-fast user experience.

Implementing the Repository Pattern

Even in a portfolio, managing data-fetching logic can become messy if scattered across components. By applying the Repository Pattern, I am abstracting how project data is retrieved from the underlying source—whether that is a local JSON file, a headless CMS, or an external API.

Think of the Repository as a librarian. Instead of your components wandering through the entire 'library' (data source) to find a book, they simply ask the Librarian (the Repository) for the specific information they need. This separation of concerns ensures that if I decide to switch my data source later, I only need to update the Repository logic, not every UI component.

Establishing the Foundation

My initial implementation focuses on setting up a clean directory structure that separates concerns. Here is how that looks in practice:

// src/repositories/ProjectRepository.ts
export interface Project {
  title: string;
  description: string;
  technologies: string[];
}

export const getProjects = async (): Promise<Project[]> => {
  // Data retrieval logic isolated here
  return await fetchProjectsFromSource();
};

By keeping the fetching logic separate, the Astro components stay focused on presentation:

---
import { getProjects } from '../repositories/ProjectRepository';
const projects = await getProjects();
---
<ul>
  {projects.map(p => <li>{p.title}</li>)}
</ul>

Conclusion

Starting with a solid architecture, even for a personal portfolio, pays dividends in maintainability. By utilizing Astro’s performance-first approach alongside the Repository Pattern, I've created a scalable base that keeps the UI logic clean and the data management centralized.

Actionable Takeaway: Next time you find yourself repeating fetch() calls inside your UI components, take a moment to move that logic into a dedicated repository file. Your components will be easier to read, and your data fetching will be much simpler to maintain.

Generated with Gitvlg.com