rafa-links/src/pages/index.astro

51 lines
1.3 KiB
Plaintext

---
import MainLayout from "../layouts/main.astro";
import profileData from '../data/profile.json';
import Icon from "../components/icon.svelte";
type IconData = {
name: string;
url: string;
icon: string;
iconUrl?: string;
}
const profileName = profileData.name;
const personalLinks = [];
const profesionalLinks = [];
for (let link of profileData.personalLinks) {
const withUrl: IconData = { ...link };
withUrl.iconUrl = `/icons/${link.icon}.svg`;
personalLinks.push(withUrl);
}
for (let link of profileData.profesionalLinks) {
const withUrl: IconData = { ...link };
withUrl.iconUrl = `/icons/${link.icon}.svg`;
profesionalLinks.push(withUrl);
}
---
<MainLayout>
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
Personal Links</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
{personalLinks.map(perLink => (
<Icon client:load perLink={perLink} profileName={profileName} />
))}
</div>
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
Profesional Links</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
{profesionalLinks.map(perLink => (
<Icon client:load perLink={perLink} profileName={profileName} />
))}
</div>
</MainLayout>