CHORE: Updated Gallery to use grid. Made card component mode modular. Added colour to the skills section of the page.
This commit is contained in:
@ -1,31 +1,23 @@
|
||||
<script lang="ts">
|
||||
export let headerLeft: string = "";
|
||||
export let headerRight: string = "";
|
||||
export let headerColour: string = "text-red-500";
|
||||
export let footer: string = "";
|
||||
|
||||
// Allows additional styling to be applied to the Card component's outer wrapping
|
||||
export let containerStyle: string = "";
|
||||
</script>
|
||||
|
||||
<div class={containerStyle}>
|
||||
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
|
||||
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
|
||||
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
|
||||
|
||||
{#if headerRight}
|
||||
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
|
||||
{/if}
|
||||
<div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
|
||||
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
|
||||
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
|
||||
</div>
|
||||
<hr class="mb-4 border-1" />
|
||||
<div class="flex-1 flex flex-col justify-center p-5">
|
||||
<slot />
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-1" />
|
||||
<div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
|
||||
<slot name="footerLeft"/>
|
||||
<slot name="footerRight"/>
|
||||
</div>
|
||||
{#if footer}
|
||||
<hr class="my-4 border-1" />
|
||||
<div class="mt-2 text-base opacity-90">
|
||||
{@html footer}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<!-- FlexGallery.svelte -->
|
||||
<div class="flex flex-wrap gap-10 w-full">
|
||||
<slot />
|
||||
</div>
|
||||
7
src/lib/components/GridGallery.svelte
Normal file
7
src/lib/components/GridGallery.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<!-- GridGallery.svelte -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
||||
<slot />
|
||||
</div>
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let value: number = 0; // 0 to 100
|
||||
export let skillColour: string = 'bg-orange-400'; // Default color
|
||||
</script>
|
||||
|
||||
<div class="w-full mt-3">
|
||||
@ -9,7 +10,7 @@
|
||||
</div>
|
||||
<div class="w-full bg-gray-800 rounded-full h-5">
|
||||
<div
|
||||
class="bg-orange-400 h-5 rounded-full transition-all duration-500"
|
||||
class="{skillColour} h-5 rounded-full transition-all duration-500"
|
||||
style="width: {value}%"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import FlexGallery from './components/FlexGallery.svelte';
|
||||
import GridGallery from './components/GridGallery.svelte';
|
||||
import Loading from './components/Loading.svelte';
|
||||
import Section from './components/Section.svelte';
|
||||
import SkillProgress from './components/SkillProgress.svelte';
|
||||
import Timeline from './components/Timeline.svelte';
|
||||
|
||||
export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
|
||||
export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import Section from '$lib/components/Section.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import FlexGallery from "$lib/components/FlexGallery.svelte";
|
||||
import GridGallery from "$lib/components/GridGallery.svelte";
|
||||
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
||||
import Timeline from '$lib/components/Timeline.svelte';
|
||||
</script>
|
||||
@ -25,8 +25,10 @@
|
||||
|
||||
<!-- Main Card -->
|
||||
<Section label="[Experience]">
|
||||
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
|
||||
<div class="flex flex-row items-center gap-5">
|
||||
<Card>
|
||||
<h2 slot="headerLeft">{info.name}</h2>
|
||||
<h2 slot="headerRight">{info.job_title}</h2>
|
||||
<div slot="content" class="flex flex-row items-center gap-5">
|
||||
<img
|
||||
src={info.profile_photo}
|
||||
alt="Avatar"
|
||||
@ -34,20 +36,24 @@
|
||||
/>
|
||||
<p>{@html info.about}</p>
|
||||
</div>
|
||||
<h3 slot="footerLeft">{@html info.location}</h3>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- SKills -->
|
||||
<Section label="[Skills]">
|
||||
<FlexGallery>
|
||||
<GridGallery>
|
||||
{#each info.skills as skill}
|
||||
<Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
||||
{skill.about}
|
||||
|
||||
<SkillProgress value={skill.competency} />
|
||||
<Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
||||
<h2 slot="headerLeft">{skill.name}</h2>
|
||||
<div slot="content">
|
||||
{skill.about}
|
||||
<SkillProgress skillColour={skill.colour} value={skill.competency} />
|
||||
</div>
|
||||
<h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</FlexGallery>
|
||||
</GridGallery>
|
||||
</Section>
|
||||
|
||||
<Section label="[Experience]">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte';
|
||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
||||
|
||||
import FlexGallery from '$lib/components/FlexGallery.svelte';
|
||||
import GridGallery from '$lib/components/GridGallery.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
|
||||
let repoImages: Record<string, string | null> = {};
|
||||
@ -22,25 +22,31 @@
|
||||
onMount(loadRepos);
|
||||
</script>
|
||||
|
||||
<FlexGallery>
|
||||
<GridGallery>
|
||||
{#each $repos as repo}
|
||||
<Card
|
||||
headerLeft={repo.name}
|
||||
headerRight={repo.language}
|
||||
footer={timeSince(repo.updated_at)}
|
||||
containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<div class="relative z-0">
|
||||
{repo.description}
|
||||
<h2 slot="headerLeft">{repo.name}</h2>
|
||||
<h2 slot="headerRight" class="text-sm text-gray-500">
|
||||
{repo.language}
|
||||
</h2>
|
||||
<div slot="content">
|
||||
<div class="relative z-0">
|
||||
{repo.description}
|
||||
</div>
|
||||
{#if repoImages[repo.name]}
|
||||
<!-- svelte-ignore a11y_img_redundant_alt -->
|
||||
<img
|
||||
src={repoImages[repo.name]}
|
||||
alt="repo image"
|
||||
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if repoImages[repo.name]}
|
||||
<!-- svelte-ignore a11y_img_redundant_alt -->
|
||||
<img
|
||||
src={repoImages[repo.name]}
|
||||
alt="repo image"
|
||||
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
|
||||
/>
|
||||
{/if}
|
||||
<h3 slot="footerLeft">
|
||||
Last Updated: {timeSince(repo.updated_at)}
|
||||
</h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</FlexGallery>
|
||||
</GridGallery>
|
||||
|
||||
Reference in New Issue
Block a user