From 3fda9d067f2ebbb656e5b0b48775d9ceed830e72 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Fri, 13 Dec 2024 11:54:19 -0800 Subject: [PATCH] Giving up on MD and putting into portfolio. --- src/lib/components/Articles.svelte | 52 +++---- .../personal/personal-website-sveltekit.md | 16 +- src/lib/types/externalLinkType.ts | 13 +- src/routes/+layout.svelte | 2 - src/routes/about/CourseCard.svelte | 2 +- src/routes/portfolio/+page.svelte | 142 ++++++++++++++---- src/routes/portfolio/Portfolio.svelte | 12 +- 7 files changed, 162 insertions(+), 77 deletions(-) diff --git a/src/lib/components/Articles.svelte b/src/lib/components/Articles.svelte index 73c71b0..b45c6a0 100644 --- a/src/lib/components/Articles.svelte +++ b/src/lib/components/Articles.svelte @@ -1,5 +1,6 @@ -
+

Favorite Articles

{#each articles as article (article.hashed_url)} @@ -18,16 +19,19 @@ const {

- {#if compact} - {article.title.substring(0, 50).trim()} - {:else} - {article.title} - {/if} - + textData={{ + text: compact ? article.title.substring(0, 50).trim() : article.title, + location: 'left', + showIcon: true, + }} + linkData={{ + href: article.url.toString(), + ariaLabel: `Link to ${article.title}`, + title: `Link to ${article.title}`, + target: '_blank', + }} + iconData={{ iconClass: 'center' }} + />

{article.domain_name}

@@ -43,13 +47,8 @@ const { {/each}
-
- {`${totalArticles} more articles`} - - - -
-
+ {`${totalArticles} more articles`} + \ No newline at end of file diff --git a/src/lib/content/portfolio/personal/personal-website-sveltekit.md b/src/lib/content/portfolio/personal/personal-website-sveltekit.md index f383112..767870e 100644 --- a/src/lib/content/portfolio/personal/personal-website-sveltekit.md +++ b/src/lib/content/portfolio/personal/personal-website-sveltekit.md @@ -6,21 +6,21 @@ portfolioImageAlt: 'Home Page of bradleyshellnut.com' --- {portfolioSubHeading} Tech Stack: -- SvelteKit -- Bits-UI for the headless-ui components. -- TypeScript +- +- for the headless-ui components. +- - Deployed on a Coolify Self Hosted Box -- Icons in the [/about](/about) page and the Bee, Shell, and Nut icons are all made by "Freepik" from flaticon.com +- Icons in the /about page and the Bee, Shell, and Nut icons are all made by from -Previous version of my website was written using React and Gatsby which you can view here. +Previous version of my website was written using React and Gatsby which you can view . -Each iteration brings better code and my previous React version was improved after the suggestions on Show 444 of the Syntax Podcast. +Each iteration brings better code and my previous React version was improved after the suggestions on of the . -You can view the previous archived version of the site before those changes here. +You can view the previous archived version of the site before those changes . \ No newline at end of file diff --git a/src/lib/types/externalLinkType.ts b/src/lib/types/externalLinkType.ts index d9c6d1f..b2d4d29 100644 --- a/src/lib/types/externalLinkType.ts +++ b/src/lib/types/externalLinkType.ts @@ -1,9 +1,10 @@ -import type { IconifyIcon } from "iconify-icon"; +import type { Icon as IconType } from 'lucide-svelte'; +import type { Snippet } from "svelte"; export type ExternalLinkType = { - ariaLabel: string; - href: string; - icon?: IconifyIcon; - showIcon: boolean; - text: string; + ariaLabel: string; + href: string; + icon?: Snippet | typeof IconType; + showIcon: boolean; + text: string; }; \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 91c10a5..bc5dcc9 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,4 @@ {#snippet links(externalLinks: ExternalLinkType[])} {#each externalLinks as link} - - {link.text} - + {#if link.icon && link.showIcon} + + {:else} + + {/if} {/each} {/snippet} -{#snippet details(portfolioDetails)} - {@const PortfolioDetails = portfolioDetails} - -{/snippet} -

Portfolio!

@@ -51,19 +69,89 @@ loading="eager" alt="Picture of Bradley Shellnut's Personal Website" {links} - {details} - portfolioDetails={PersonalWebsiteSvelteKit} externalLinks={[ { ariaLabel: "View GitHub repository for my personal website", href: "https://github.com/BradNut/personal-website-sveltekit", - icon: GitHub, + icon: gitHubIcon, showIcon: true, text: "GitHub repository", }, ]} - > - +

My personal website re-written using SvelteKit.

+ Tech Stack: +
    +
  • + +
    • +
  • + for the headless-ui components. +
    • +
  • + +
    • +
  • Deployed on a Coolify Self Hosted Box
    • +
  • + Icons in the /about page and the Bee, Shell, and + Nut icons are all made by from +
    • +
+ + Previous version of my website was written using React and Gatsby which + you can view . Each iteration brings better code and my previous React version was + improved after the suggestions on of the . You can view the previous archived version of the site before those + changes . + + - + /> --> diff --git a/src/routes/portfolio/Portfolio.svelte b/src/routes/portfolio/Portfolio.svelte index c2ba5db..c18eecb 100644 --- a/src/routes/portfolio/Portfolio.svelte +++ b/src/routes/portfolio/Portfolio.svelte @@ -5,8 +5,6 @@ const { links, - details, - portfolioDetails, externalLinks, name, src, @@ -14,9 +12,9 @@ style, fetchPriority = 'auto', loading = 'lazy', - }: { links: Snippet, details: Snippet, portfolioDetails: string, - externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string; - style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager' } = $props(); + children + }: { links: Snippet, externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string; + style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager', children?: Snippet } = $props();
@@ -26,7 +24,7 @@ {@render links(externalLinks)}
- {@render details(portfolioDetails)} + {@render children?.()}
@@ -58,4 +56,4 @@ list-style-type: disc; padding-left: 1.5rem; } - \ No newline at end of file +