Initial Code Commit
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
// image source is configurable via prop; default points to a common images folder
|
||||
export let src: string = '/src/lib/images/profile.png';
|
||||
export let alt: string = 'Profile picture';
|
||||
</script>
|
||||
|
||||
<figure class="mx-auto">
|
||||
<section class="img-bg" />
|
||||
<img src={src} alt={alt} class="fill-token rounded-full object-cover object-center" loading="lazy" />
|
||||
</figure>
|
||||
|
||||
<style lang="postcss">
|
||||
figure {
|
||||
@apply flex relative flex-col;
|
||||
}
|
||||
figure img,
|
||||
.img-bg {
|
||||
@apply w-40 h-40 md:w-44 md:h-44 my-10;
|
||||
}
|
||||
.img-bg {
|
||||
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
|
||||
/* default (light mode): darker blue glow */
|
||||
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
|
||||
glow-light 5s linear infinite;
|
||||
}
|
||||
/* In dark mode use the original multi-color glow */
|
||||
:global(.dark) .img-bg {
|
||||
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
|
||||
glow-dark 5s linear infinite;
|
||||
}
|
||||
@keyframes glow-dark {
|
||||
0% {
|
||||
@apply bg-primary-400/50;
|
||||
}
|
||||
33% {
|
||||
@apply bg-secondary-400/50;
|
||||
}
|
||||
66% {
|
||||
@apply bg-tertiary-400/50;
|
||||
}
|
||||
100% {
|
||||
@apply bg-primary-400/50;
|
||||
}
|
||||
}
|
||||
@keyframes glow-light {
|
||||
/* darker blues for light mode */
|
||||
0% {
|
||||
@apply bg-primary-700/50;
|
||||
}
|
||||
33% {
|
||||
@apply bg-primary-600/50;
|
||||
}
|
||||
66% {
|
||||
@apply bg-primary-800/50;
|
||||
}
|
||||
100% {
|
||||
@apply bg-primary-700/50;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { Avatar } from "@skeletonlabs/skeleton";
|
||||
|
||||
export let totalassets;
|
||||
|
||||
export let username;
|
||||
export let bio;
|
||||
export let avatar;
|
||||
export let roles;
|
||||
export let contributions;
|
||||
|
||||
// const popupHover = {
|
||||
// event: 'hover',
|
||||
// target: 'popupHover',
|
||||
// placement: 'top'
|
||||
// };
|
||||
|
||||
</script>
|
||||
|
||||
<div class="grid col card bg-initial card-hover overflow-hidden {$$restProps.class}">
|
||||
<header class="mx-auto my-5">
|
||||
<div class="relative inline-block">
|
||||
<span class="badge-icon variant-filled-error absolute -top-0 -right-0 z-10 w-fit p-1">-{Math.round((contributions/totalassets)*100)}%</span>
|
||||
<Avatar src={avatar} width="w-32" />
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-4 space-y-4">
|
||||
<h3 class="h3" data-toc-ignore>{username}</h3>
|
||||
<article>
|
||||
{ #each roles as role}
|
||||
<span class="badge variant-ghost-primary my-1 mx-1">{role}</span>
|
||||
{/each}
|
||||
<br><br>
|
||||
<p>{bio}</p>
|
||||
</article>
|
||||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 mx-auto flex justify-start items-center space-x-4">
|
||||
<button type="button" class="chip variant-soft hover:variant-filled">
|
||||
<span class="icon-[flowbite--user-circle-solid] profile-gradient"></span>
|
||||
</button>
|
||||
<button type="button" class="chip variant-soft hover:variant-filled">
|
||||
<span class="icon-[flowbite--lightbulb-outline] projects-gradient"></span>
|
||||
</button>
|
||||
<button type="button" class="chip variant-soft hover:variant-filled">
|
||||
<span class="icon-[lets-icons--insta] insta-gradient"></span>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<AppBar class="flex justify-center items-center mx-auto p-4">
|
||||
<div class="grid grid-cols-1">
|
||||
<div class="grid mx-auto">
|
||||
<span class="text-lg">Made with ❤️ by Sir Blob</span>
|
||||
</div>
|
||||
</div>
|
||||
</AppBar>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
export let title: string = "Project Title";
|
||||
export let description: string =
|
||||
"Short project description that explains what the project does in one or two lines.";
|
||||
export let image: string = "/src/lib/images/project.png";
|
||||
export let link: string = "";
|
||||
export let repo: string = "";
|
||||
export let date: string = "";
|
||||
export let tags: string[] = [];
|
||||
export let featured: boolean = false;
|
||||
</script>
|
||||
|
||||
<article
|
||||
class="card bg-surface-300 dark:bg-surface-700 rounded-xl overflow-hidden shadow-lg text-slate-900 dark:text-slate-100 min-h-[220px] flex flex-col"
|
||||
>
|
||||
<!-- small image badge in the top-left -->
|
||||
<div
|
||||
class="absolute -top-8 left-6 w-20 h-20 rounded-full overflow-hidden ring-4 ring-slate-200/30 bg-white dark:ring-white/5 dark:bg-slate-700"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt={title}
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-12 flex flex-col flex-1">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="max-w-[70%]">
|
||||
<h3 class="text-xl md:text-2xl font-bold leading-tight fit-text-in-div">
|
||||
{title}
|
||||
</h3>
|
||||
{#if date}
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{date}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if featured}
|
||||
<span
|
||||
class="ml-auto inline-flex items-center text-xs font-semibold bg-amber-500 text-amber-900 px-2 py-1 rounded"
|
||||
>Featured</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-sm text-slate-700 dark:text-slate-300 flex-grow">{description}</p>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each tags as tag}
|
||||
<span class="chip variant-filled text-xs">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{#if repo}
|
||||
<a
|
||||
href={repo}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="btn btn-sm variant-ghost">Repo</a
|
||||
>
|
||||
{/if}
|
||||
{#if link}
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="btn btn-sm btn-primary">Live</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style lang="postcss">
|
||||
article {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
/* note: using project surface tokens (bg-surface-300 / dark:bg-surface-700)
|
||||
removed the old .bg-card-alt fallback to avoid unused selector warnings */
|
||||
|
||||
/* fit text helper (copied from ProjectCard) */
|
||||
.fit-text-in-div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
max-width: 14rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ensure image badge doesn't collapse */
|
||||
.ring-4 {
|
||||
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
import { LightSwitch } from '@skeletonlabs/skeleton';
|
||||
|
||||
let logoElement: HTMLElement;
|
||||
|
||||
function onMobileMenuClick() {
|
||||
const navbar = document.getElementById('navbar-default');
|
||||
const button = document.querySelector('[data-collapse-toggle="navbar-default"]');
|
||||
|
||||
if (navbar) {
|
||||
const expanded = navbar.getAttribute('aria-expanded') === 'true';
|
||||
navbar.setAttribute('aria-expanded', String(!expanded));
|
||||
button?.setAttribute('aria-expanded', String(!expanded));
|
||||
|
||||
navbar.style.display = expanded ? 'none' : 'block';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<AppBar class="bg-slate-400">
|
||||
<svelte:fragment slot="lead">
|
||||
<strong bind:this={logoElement} class="text-xl uppercase">
|
||||
<a href="/">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img src="/blob_nerd.png" class="rounded-md" style="width: 50px; height: auto;" alt="Logo" />
|
||||
</a>
|
||||
</strong>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trail">
|
||||
<button on:click={onMobileMenuClick} data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border md:flex-row md:space-x-6 rtl:space-x-reverse md:mt-0 md:border-0">
|
||||
<li>
|
||||
<a
|
||||
class="btn hover:variant-ghost-surface center-nav"
|
||||
href="/portfolio"
|
||||
rel="noreferrer">
|
||||
<strong>Portfolio</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn hover:variant-ghost-surface center-nav"
|
||||
href="/hackathons"
|
||||
rel="noreferrer">
|
||||
<strong>Hackathons</strong>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a
|
||||
class="btn hover:variant-ghost-surface center-nav"
|
||||
href="/projects"
|
||||
rel="noreferrer">
|
||||
<strong>Projects</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn hover:variant-ghost-surface center-nav"
|
||||
href="/game"
|
||||
rel="noreferrer">
|
||||
<strong>Games</strong>
|
||||
</a>
|
||||
</li> -->
|
||||
<li>
|
||||
<a class="btn btn-sm">
|
||||
<LightSwitch class="flex mx-auto items-center"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
||||
|
||||
<style lang="postcss">
|
||||
.center-nav {
|
||||
@apply flex justify-center items-center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user