How to Build a Responsive Portfolio Using Reusable Components

Creating a portfolio that looks great on every device can be daunting, but by leveraging reusable components you can streamline development and maintain visual consistency. Below is a practical guide based on the component system used by Arriaga Archive.

Step 1: Define Your Core Component Patterns

Start by outlining the four patterns that will serve as the backbone of your site:

1. Full‑width image + two‑column title and body.
2. Small left‑aligned image with subtitle and body on the right.
3. Centered title and subtitle, followed by full‑width image and body.
4. Left‑aligned title/subtitle with right‑aligned images and multiple paragraphs below.

Each pattern should be designed with a mobile‑first approach, ensuring that content stacks vertically on narrow screens.

Step 2: Set Up Base Styles

Use a global CSS file to define the color palette (#060216 for background, #ffffff for primary text, and various gray tones for secondary elements). Apply the typography globally:

body {
  font-family: 'IBM Plex Mono', monospace;
  color: #fff;
  background-color: #060216;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

Step 3: Build the Component Markup

Here is a sample HTML structure for Pattern Two (small left image with right‑hand copy):

<section class="pattern-two">
  <div class="image-wrapper">
    <img src="path/to/image.jpg" alt="Project thumbnail">
  </div>
  <div class="content-wrapper">
    <h2>Project Title</h2>
    <h3>Subtitle</h3>
    <p>Body copy describing the project...</p>
  </div>
</section>

Use Flexbox for layout:

.pattern-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.image-wrapper { flex: 1 1 30%; }
.content-wrapper { flex: 1 1 60%; }
@media (max-width: 768px) {
  .pattern-two { flex-direction: column; }
}

Step 4: Implement Sticky Navigation

Use a simple JavaScript scroll listener to add an “active” class to navigation links as sections enter the viewport. The HTML for the header looks like:

<header class="sticky-header">
  <nav>
    <a href="#utopia">UTOPÍA</a>
    <a href="#proyectos">PROYECTOS</a>
    <a href="#contacto">CONTACTO</a>
    <a href="#about">ABOUT ME</a>
  </nav>
</header>

Step 5: Test Across Breakpoints

Open the site in Chrome DevTools and test at 320px, 768px, and 1440px. Verify that images never overflow, text remains readable, and the navigation stays affixed to the top.

Conclusion

By limiting yourself to four well‑defined component patterns, you reduce design debt and speed up content creation. The result is a sleek, responsive portfolio that mirrors the professionalism of the Arriaga Archive.