rafaremo/rafa-links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added svelt for icons

Browse Source
This commit is contained in:
Rafael González
2022-01-18 18:44:26 -06:00
parent 399dec4e3f
commit 94149e8478
5 changed files with 143 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/icon.svelte Normal file
View File

@ -0,0 +1,23 @@
<script>
export let perLink;
export let profileName;
function handleClick(event){
gtag('event', 'view_item', {
'event_category' : 'Links',
'event_label' : `Visit ${perLink.name} link`
});
}
</script>
<div class="p-2">
<a class="w-full flex flex-col justify-center items-center" href={perLink.url} target="_blank" rel="noopener" on:click={handleClick}>
<img
loading="lazy"
class="w-1/2 dark:invert"
src={perLink.iconUrl}
alt={`${perLink.name} ${profileName}`}
>
<h3 class="my-2 font-bold text-2xl dark:text-white">{perLink.name}</h3>
</a>
</div>

36
src/pages/index.astro
View File

@ -1,5 +1,6 @@
---
import profileData from '../data/profile.json';
import Icon from "../components/icon.svelte";
const profileName = profileData.name;
@ -54,6 +55,16 @@ for (let link of profileData.profesionalLinks) {
<meta property="og:image" content="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf" />
<meta property="og:url" content={Astro.site} />
<link rel="canonical" href={Astro.site}>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-45FLVCCPTZ');
</script>
</head>
<body class="bg-white dark:bg-gray-900">
@ -79,34 +90,15 @@ for (let link of profileData.profesionalLinks) {
<main>
<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 => (
<div class="p-2">
<a class="w-full flex flex-col justify-center items-center" href={perLink.url} target="_blank" rel="noopener">
<img
loading="lazy"
class="w-1/2 dark:invert"
src={perLink.iconUrl}
alt={`${perLink.name} ${profileName}`}
>
<h3 class="my-2 font-bold text-2xl dark:text-white">{perLink.name}</h3>
</a>
</div>
<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 => (
<div class="p-2">
<a class="w-full flex flex-col justify-center items-center" href={perLink.url} target="_blank" rel="noopener">
<img
loading="lazy"
class="w-1/2 dark:invert aspect-square"
src={perLink.iconUrl}
alt={`${perLink.name} ${profileName}`}
>
<h3 class="my-2 font-bold text-2xl dark:text-white">{perLink.name}</h3>
</a>
</div>
<Icon client:load perLink={perLink} profileName={profileName} />
))}
</div>
</main>