Skip to content

Commit

Permalink
Merge pull request #82 from s1lvax/fix/ui-adjust
Browse files Browse the repository at this point in the history 
Moved hobbies to User Card / Changed Music Player
  • Loading branch information
@s1lvax
s1lvax authored Oct 23, 2024
2 parents f0a06fd + aadabd5 commit 7258a3e
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 101 deletions.
43 changes: 19 additions & 24 deletions src/lib/components/PublicProfile/Hobbies.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,25 @@
export let userData: PublicProfile;
</script>

<Card.Root>
<Card.Header>
<Card.Title>Hobbies</Card.Title>
<Card.Description>Discover the developer's hobbies</Card.Description>
</Card.Header>
<Card.Content class="grid gap-4">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Hobbies</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#if userData.hobbies.length > 0}
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Hobby</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each userData.hobbies as hobby}
<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
<Table.Cell class="font-medium">{hobby.hobby}</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{#each userData.hobbies as hobby}
<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
<Table.Cell class="font-medium">{hobby.hobby}</Table.Cell>
</Table.Row>
{/each}
{:else}
<p class="text-muted-foreground">No hobbies available</p>
<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
<Table.Cell class="font-medium">
<p class="text-muted-foreground">No hobbies available</p></Table.Cell
>
</Table.Row>
{/if}
</Card.Content>
</Card.Root>

</Table.Body>
</Table.Root>
4 changes: 0 additions & 4 deletions src/lib/components/PublicProfile/PublicProfile.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@
<Links {userData} />
<TechStack {userData} />
</div>
<Separator class="my-4" />
<div class="mt-8 grid gap-4 md:grid-cols-2">
<Hobbies {userData} />
</div>

<div class="flex flex-col items-center justify-center gap-4">
<ProfileFooter />
Expand Down
56 changes: 56 additions & 0 deletions src/lib/components/PublicProfile/Socials.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script lang="ts">
import { IdCard, Twitter } from 'lucide-svelte';
import GitHub from 'lucide-svelte/icons/github';
import * as Table from '$lib/components/ui/table';
import type { GithubData } from '$lib/types/GithubData';
export let githubData: GithubData | null;
</script>

<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Socials</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body class="[&>*]:border-b-0">
<!-- GitHub Profile -->
<Table.Row>
<Table.Cell class="p-0">
<a class="flex items-center space-x-8 p-4" href={githubData?.url ?? '#'} target="_blank">
<GitHub />
<span>GitHub Profile</span>
</a>
</Table.Cell>
</Table.Row>

<!-- Blog Profile -->
{#if githubData?.blog}
<Table.Row>
<Table.Cell class="p-0">
<a class="flex items-center space-x-8 p-4" href={githubData?.blog ?? '#'} target="_blank">
<IdCard />
<span>Personal Website</span>
</a>
</Table.Cell>
</Table.Row>
{/if}

<!-- Twitter Profile -->
{#if githubData?.twitter}
<Table.Row>
<Table.Cell class="p-0">
<a
class="flex items-center space-x-8 p-4"
href={`https://x.com/${githubData?.twitter}`}
target="_blank"
>
<Twitter />
<span>Twitter Profile</span>
</a>
</Table.Cell>
</Table.Row>
{/if}
<!-- Socials will be here when we implement it -->
</Table.Body>
</Table.Root>
40 changes: 26 additions & 14 deletions src/lib/components/PublicProfile/TechStack.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script lang="ts">
import * as Table from '$lib/components/ui/table';
import * as Card from '$lib/components/ui/card';
import { Progress } from '$lib/components/ui/progress';
import type { PublicProfile } from '$lib/types/PublicProfile';
import { getProgressValue } from '$lib/utils/getProgressValue';
import { onMount } from 'svelte';
let progressValues: { [key: string]: number } = {};
export let userData: PublicProfile;
//for the progress bar animation
let progressValues: { [key: string]: number } = {};
onMount(() => {
userData.skills.forEach((skill) => {
progressValues[skill.title] = 0;
Expand All @@ -28,17 +28,29 @@
</Card.Header>
<Card.Content class="grid gap-4">
{#if userData.skills.length > 0}
{#each userData.skills as skill}
<div class="flex items-center justify-between">
<span>{skill.title}</span>
<Progress
value={progressValues[skill.title]}
max={100}
class="w-[60%] transition-all ease-in-out"
style="transition-duration: 3000ms;"
/>
</div>
{/each}
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Skill</Table.Head>
<Table.Head>Proficiency</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each userData.skills as skill}
<Table.Row>
<Table.Cell>{skill.title}</Table.Cell>
<Table.Cell class="w-[60%]">
<Progress
value={progressValues[skill.title]}
max={100}
class="w-full transition-all ease-in-out"
style="transition-duration: 3000ms;"
/>
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{:else}
<p class="text-muted-foreground">No skills available</p>
{/if}
Expand Down
69 changes: 11 additions & 58 deletions src/lib/components/PublicProfile/UserInfo.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script lang="ts">
import * as Avatar from '$lib/components/ui/avatar';
import { IdCard, Twitter, AudioLines } from 'lucide-svelte';
import GitHub from 'lucide-svelte/icons/github';
import { Skeleton } from '$lib/components/ui/skeleton';
import { Badge } from '$lib/components/ui/badge';
import * as Card from '$lib/components/ui/card';
import * as Table from '$lib/components/ui/table';
import type { GithubData } from '$lib/types/GithubData';
import type { PublicProfile } from '$lib/types/PublicProfile';
import MusicPlayer from '$lib/components/Shared/MusicPlayer.svelte';
import Hobbies from '$lib/components/PublicProfile/Hobbies.svelte';
import Socials from '$lib/components/PublicProfile/Socials.svelte';
export let githubData: GithubData | null;
export let userData: PublicProfile;
Expand Down Expand Up @@ -66,61 +66,14 @@
</div>
</div>
<div class="information flex flex-col space-y-4">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Socials</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body class="[&>*]:border-b-0">
<!-- GitHub Profile -->
<Table.Row>
<Table.Cell class="p-0">
<a
class="flex items-center space-x-8 p-4"
href={githubData?.url ?? '#'}
target="_blank"
>
<GitHub />
<span>GitHub Profile</span>
</a>
</Table.Cell>
</Table.Row>

<!-- Blog Profile -->
{#if githubData?.blog}
<Table.Row>
<Table.Cell class="p-0">
<a
class="flex items-center space-x-8 p-4"
href={githubData?.blog ?? '#'}
target="_blank"
>
<IdCard />
<span>Personal Website</span>
</a>
</Table.Cell>
</Table.Row>
{/if}

<!-- Twitter Profile -->
{#if githubData?.twitter}
<Table.Row>
<Table.Cell class="p-0">
<a
class="flex items-center space-x-8 p-4"
href={`https://x.com/${githubData?.twitter}`}
target="_blank"
>
<Twitter />
<span>Twitter Profile</span>
</a>
</Table.Cell>
</Table.Row>
{/if}
<!-- Socials will be here when we implement it -->
</Table.Body>
</Table.Root>
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
<div class="socials">
<Socials {githubData} />
</div>
<div class="hobbies">
<Hobbies {userData} />
</div>
</div>
<MusicPlayer githubUsername={userData.username} />
</div>
</div></Card.Content
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Shared/MusicPlayer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<Card.Header>
<Card.Title>
<div class="flex flex-row items-center">
<AudioLines class="mr-2 text-green-700" /> Music
<AudioLines class="mr-2 text-green-700" /> Now listening to..
</div>
</Card.Title>
</Card.Header>
Expand Down

0 comments on commit 7258a3e

Please sign in to comment.