Context
This post is about the development of my portfolio, specifically the projects section. I wanted to find a way to dynamically control the display of the projects using a source of data. After some consideration, I came up with a simple and effective idea that works perfectly.
Step by Step
1st Step : Create a
utilsfolder within the application and add theprojectData.tsfile.2nd Step : In the
projectData.tsfile, create an array of objects, each representing a project. Each object should have properties similar to the example below:
export const projectsData = [
{
title: "Star Wars Wiki",
description:
"An project that is played with the starwars api, it was pretty cool ,i always loved the starwars universe and it was pretty fun to do that",
imagePath: "/me.jpeg",
githubRepo: "https://github.com/marcossnikel",
stacks: "javascript, typescript, next, react,",
projectLink: "https://linkedin.com",
},
];
3rd Step : iterate over the projectsData array in the project section using the map function in JavaScript. For each project, create a project card as shown in the code snippet below:
{projectsData ? (
projectsData.map((project) => (
<div
key={project.title}
className="mt-5 flex flex-col items-center md:flex-row justify-between gap-4"
>
<div className="w-52 h-52 md:h-96 md:w-96 relative">
<Image
src={project.imagePath}
alt="Project image"
fill
className="rounded-md object-contain"
/>
</div>
<div className="flex flex-col justify-between">
<h2 className="text-3xl font-bold text-txcolor">
{project.title}
</h2>
<p className="text-lg font-serif text-txcolor">
{project.description}
</p>
<div className="flex flex-col md:flex-row gap-2 justify-between mt-2">
<a
rel="noreferrer nofollow"
target="_blank"
className="bg-navy p-4 rounded-lg hover:bg-vintage"
href={project.githubRepo}
>
View it Here
</a>
<a
rel="noreferrer nofollow"
target="_blank"
className="bg-navy p-4 rounded-lg hover:bg-vintage"
href={project.projectLink}
>
View Github Repo
</a>
</div>
</div>
</div>
))
Benefits
The advantage of this solution is that it allows for easy addition or removal of specific projects. Simply modifying the projectData.ts file is all that's needed.
I am still in the process of creating my portfolio, but you can track the progress by visiting My Portfolio Preview.
Top comments (0)