3rd week with astro

Oct 27, 2025

Week 3: Working with Data

October 27 - November 2, 2025

This week was about making the site actually dynamic. Instead of hardcoding project cards one by one, I learned to generate them from data.

Arrays of objects

Started by creating a projects.js file with all my project data structured like this:

export const projects = [
  {
    id: 1,
    title: "Personal Website",
    description: "My portfolio built with Astro",
    tags: ["astro", "css", "javascript"],
    featured: true,
    date: "October 2025"
  },
  // more projects...
];

Then just import it and use it. Way cleaner than having all that data scattered across components.

Mapping data to components

Made a ProjectCard.astro component that takes props, then used .map() to generate cards from the data:

{projects.map((project) => (
  <ProjectCard 
    title={project.title}
    description={project.description}
    tags={project.tags}
  />
))}

One component definition, multiple instances generated automatically. Add a new project to the data file and it appears on the site.

Filtering and sorting

Learned to filter projects before displaying them:

// Show only featured projects
const featured = projects.filter(p => p.featured);

// Sort by date
const sorted = [...projects].sort((a, b) => 
  new Date(b.date) - new Date(a.date)
);

Created separate sections for featured work and regular projects. Also made a filter by tags function to show only JavaScript projects, CSS projects, etc.

Data organization patterns

Things got more complex when I wanted to link projects to skills. Created a separate skills.js file:

export const skills = [
  { id: "html", name: "HTML", category: "frontend" },
  { id: "css", name: "CSS", category: "frontend" },
  // more...
];

Then referenced skill IDs in projects and wrote helper functions to connect them:

function getSkillsForProject(projectId) {
  const project = projects.find(p => p.id === projectId);
  return project.skillIds.map(id => 
    skills.find(skill => skill.id === id)
  );
}

Set up a proper structure:

src/
├── data/        (projects.js, skills.js)
├── utils/       (helper functions)
└── components/  (UI components)

What didn’t work

• Forgot to spread the array before sorting ([...projects]) and wondered why my original data was getting mutated
• Made typos in property names and got undefined everywhere
• Tried filtering by a skill that didn’t exist in some projects - had to add safety checks
• Helper functions got messy before I refactored them properly

What’s next

Week 4 is about styling and making this actually look good. Right now it works but looks basic.

Time invested: about 10 hours