Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Giving up on MD and putting into portfolio.

Browse source
This commit is contained in:
Bradley Shellnut 2024-12-13 11:54:19 -08:00
parent 553ce0f783
commit 3fda9d067f
7 changed files with 162 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/lib/components/Articles.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Article } from '$lib/types/article'; import type { Article } from '$lib/types/article';
import { ArrowRight } from 'lucide-svelte';
import ExternalLink from './ExternalLink.svelte'; import ExternalLink from './ExternalLink.svelte';
const { const {
@ -10,7 +11,7 @@ const {
}: { articles: Article[]; totalArticles: number; compact: boolean; classes: string[] } = $props(); }: { articles: Article[]; totalArticles: number; compact: boolean; classes: string[] } = $props();
</script> </script>
<div> <section class="articles">
<h2>Favorite Articles</h2> <h2>Favorite Articles</h2>
<div class={classes.join(' ')}> <div class={classes.join(' ')}>
{#each articles as article (article.hashed_url)} {#each articles as article (article.hashed_url)}
@ -18,16 +19,19 @@ const {
<section> <section>
<h3> <h3>
<ExternalLink <ExternalLink
ariaLabel={`Link to ${article.title}`} textData={{
href={article.url.toString()} text: compact ? article.title.substring(0, 50).trim() : article.title,
showIcon location: 'left',
> showIcon: true,
{#if compact} }}
{article.title.substring(0, 50).trim()} linkData={{
{:else} href: article.url.toString(),
{article.title} ariaLabel: `Link to ${article.title}`,
{/if} title: `Link to ${article.title}`,
</ExternalLink> target: '_blank',
}}
iconData={{ iconClass: 'center' }}
/>
</h3> </h3>
<p>{article.domain_name}</p> <p>{article.domain_name}</p>
</section> </section>
@ -43,13 +47,8 @@ const {
</article> </article>
{/each} {/each}
</div> </div>
<div class="moreArticles"> <a class="moreArticles" href="/articles">{`${totalArticles} more articles`} <ArrowRight /></a>
<a href="/articles">{`${totalArticles} more articles`}</a> </section>
<a href="/articles" aria-label={`${totalArticles} more articles`}>
<iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
</a>
</div>
</div>
<style lang="postcss"> <style lang="postcss">
@ -61,6 +60,11 @@ const {
} }
} }
.articles {
display: grid;
place-content: center;
}
.columns { .columns {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(250px, 1fr)); grid-template-columns: repeat(2, minmax(250px, 1fr));
@ -95,19 +99,15 @@ const {
} }
.moreArticles { .moreArticles {
margin: 1.7rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; place-items: center;
align-items: center; place-content: center;
gap: 1rem; gap: 1rem;
font-size: var(--h2);
& a {
font-size: 2rem;
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
font-size: 1.5rem; font-size: var(--h3);
} }
} }
</style> </style>

16
src/lib/content/portfolio/personal/personal-website-sveltekit.md
View file

@ -6,21 +6,21 @@ portfolioImageAlt: 'Home Page of bradleyshellnut.com'
--- ---
<script> <script>
import ExternalLink from '$lib/components/ExternalLink.svelte'; import ExternalLink from "$lib/components/ExternalLink.svelte";
</script> </script>
{portfolioSubHeading} {portfolioSubHeading}
Tech Stack: Tech Stack:
- <ExternalLink href="https://kit.svelte.dev/" showIcon>SvelteKit</ExternalLink> - <ExternalLink linkData={{ href: "https://kit.svelte.dev/", ariaLabel: "SvelteKit" }} textData={{ text: "SvelteKit", showIcon: true, location: "left" }} />
- <ExternalLink showIcon href="https://bits-ui.com/">Bits-UI</ExternalLink> for the headless-ui components. - <ExternalLink linkData={{ href: "https://bits-ui.com/", ariaLabel: "Bits-UI" }} textData={{ text: "Bits-UI", showIcon: true, location: "left" }} /> for the headless-ui components.
- TypeScript - <ExternalLink linkData={{ href: "https://www.typescriptlang.org/", ariaLabel: "TypeScript" }} textData={{ text: "TypeScript", showIcon: true, location: "left" }} />
- Deployed on a Coolify Self Hosted Box - Deployed on a Coolify Self Hosted Box
- Icons in the [/about](/about) page and the Bee, Shell, and Nut icons are all made by <ExternalLink showIcon href="https://www.flaticon.com/authors/freepik" ariaLabel="Freepik">"Freepik"</ExternalLink> from <ExternalLink showIcon href="https://www.flaticon.com" ariaLabel="Flaticon">flaticon.com</ExternalLink> - Icons in the <a href="/about">/about</a> page and the Bee, Shell, and Nut icons are all made by <ExternalLink linkData={{ href: "https://www.flaticon.com/authors/freepik", ariaLabel: "Freepik" }} textData={{ text: "Freepik", showIcon: true, location: "right" }} /> from <ExternalLink textData={{ text: "Flaticon", showIcon: true, location: "right" }} linkData={{ href: "https://www.flaticon.com/", ariaLabel: "Flaticon" }} />
Previous version of my website was written using React and Gatsby which you can view <ExternalLink href="https://wonderful-austin-9f17d2.netlify.app/" ariaLabel="React and Gatsby Personal Site version" showIcon>here</ExternalLink>. Previous version of my website was written using React and Gatsby which you can view <ExternalLink linkData={{ href: "https://bradleyshellnut.com", ariaLabel: "React and Gatsby Personal Site version" }} textData={{ text: "here", showIcon: true, location: "right" }} />.
Each iteration brings better code and my previous React version was improved after the suggestions on <ExternalLink showIcon href="https://syntax.fm/show/444/syntax-highlight#t=33:19" ariaLabel="Syntax.fm Podcast Number 444">Show 444</ExternalLink> of the <ExternalLink href="https://syntax.fm/show/444/syntax-highlight#t=33:19" ariaLabel="Syntax.fm Podcast" showIcon>Syntax Podcast</ExternalLink>. Each iteration brings better code and my previous React version was improved after the suggestions on <ExternalLink linkData={{ href: "https://syntax.fm/show/444/syntax-highlight#t=33:19", ariaLabel: "Syntax.fm Podcast Number 444" }} textData={{ text: "Show 444", showIcon: true, location: "right" }} /> of the <ExternalLink linkData={{ href: "https://syntax.fm/", ariaLabel: "Syntax.fm" }} textData={{ text: "Syntax Pocast", showIcon: true, location: "right" }} />.
You can view the previous archived version of the site before those changes <ExternalLink href="https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/" ariaLabel="Archive before Syntax Podcast" showIcon>here</ExternalLink>. You can view the previous archived version of the site before those changes <ExternalLink textData={{ text: "here", showIcon: true, location: "right" }} linkData={{ href: "https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/", ariaLabel: "Archive before Syntax Podcast" }} />.

13
src/lib/types/externalLinkType.ts
View file

@ -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 = { export type ExternalLinkType = {
ariaLabel: string; ariaLabel: string;
href: string; href: string;
icon?: IconifyIcon; icon?: Snippet | typeof IconType;
showIcon: boolean; showIcon: boolean;
text: string; text: string;
}; };

2
src/routes/+layout.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { MetaTags } from 'svelte-meta-tags'; import { MetaTags } from 'svelte-meta-tags';
import NProgress from "nprogress"; import NProgress from "nprogress";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
@ -22,7 +21,6 @@
}); });
const dev = process.env.NODE_ENV !== 'production'; const dev = process.env.NODE_ENV !== 'production';
const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com/';
$effect(() => { $effect(() => {
if (browser && $navigating) { if (browser && $navigating) {

2
src/routes/about/CourseCard.svelte
View file

@ -16,7 +16,7 @@
{#each externalLinks as link} {#each externalLinks as link}
<ExternalLink <ExternalLink
linkData={{ href: link.href, ariaLabel: link.ariaLabel, title: link.ariaLabel, target: '_blank', clazz: "tech-list-item" }} linkData={{ href: link.href, ariaLabel: link.ariaLabel, title: link.ariaLabel, target: '_blank', clazz: "tech-list-item" }}
textData={{ text: link.text, showIcon: link.showIcon, location: 'bottom' }} textData={{ text: link.text, showIcon: link.showIcon, location: 'left' }}
/> />
{/each} {/each}
</h3> </h3>

142
src/routes/portfolio/+page.svelte
View file

@ -2,41 +2,59 @@
import ExternalLink from "$lib/components/ExternalLink.svelte"; import ExternalLink from "$lib/components/ExternalLink.svelte";
import Portfolio from "./Portfolio.svelte"; import Portfolio from "./Portfolio.svelte";
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307) // @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
import OldWebsite from "$lib/content/portfolio/personal/old-website.md"; // import OldWebsite from "$lib/content/portfolio/personal/old-website.md";
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307) // @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md"; // import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307) // @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
import WeddingWebsite from "$lib/content/portfolio/personal/wedding-website.md"; // import WeddingWebsite from "$lib/content/portfolio/personal/wedding-website.md";
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307) // @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
import MarkShellnutArchitect from "$lib/content/portfolio/professional/mark-shellnut-architect.md"; // import MarkShellnutArchitect from "$lib/content/portfolio/professional/mark-shellnut-architect.md";
import type { ExternalLinkType } from "$lib/types/externalLinkType"; import type { ExternalLinkType } from "$lib/types/externalLinkType";
import { Tabs } from "bits-ui"; import { Tabs } from "bits-ui";
import personalSite from "../../lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?enhanced"; import personalSite from "../../lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?enhanced";
import shellnutArchitectWebsite from "../../lib/assets/images/portfolio/Mark_Shellnut_Architect.png?enhanced"; import shellnutArchitectWebsite from "../../lib/assets/images/portfolio/Mark_Shellnut_Architect.png?enhanced";
import oldSite from "../../lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?enhanced"; import oldSite from "../../lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?enhanced";
import weddingWebsite from "../../lib/assets/images/portfolio/Wedding_Website.png?enhanced"; import weddingWebsite from "../../lib/assets/images/portfolio/Wedding_Website.png?enhanced";
import { gitHubIcon } from "$root/lib/util/logoIcons.svelte";
</script> </script>
{#snippet links(externalLinks: ExternalLinkType[])} {#snippet links(externalLinks: ExternalLinkType[])}
<span> <span>
{#each externalLinks as link} {#each externalLinks as link}
<ExternalLink {#if link.icon && link.showIcon}
ariaLabel={link.ariaLabel} <ExternalLink
href={link.href} linkData={{
icon={link.icon} href: link.href,
showIcon={link.showIcon} ariaLabel: link.ariaLabel,
> title: link.ariaLabel,
{link.text} target: "_blank",
</ExternalLink> }}
textData={{
text: link.text,
showIcon: link.showIcon,
location: "left",
}}
iconData={{ type: "svg", icon: link.icon }}
/>
{:else}
<ExternalLink
linkData={{
href: link.href,
ariaLabel: link.ariaLabel,
title: link.ariaLabel,
target: "_blank",
}}
textData={{
text: link.text,
showIcon: link.showIcon,
location: "left",
}}
/>
{/if}
{/each} {/each}
</span> </span>
{/snippet} {/snippet}
{#snippet details(portfolioDetails)}
{@const PortfolioDetails = portfolioDetails}
<PortfolioDetails />
{/snippet}
<h1>Portfolio!</h1> <h1>Portfolio!</h1>
<Tabs.Root value="personal"> <Tabs.Root value="personal">
<Tabs.List> <Tabs.List>
@ -51,19 +69,89 @@
loading="eager" loading="eager"
alt="Picture of Bradley Shellnut's Personal Website" alt="Picture of Bradley Shellnut's Personal Website"
{links} {links}
{details}
portfolioDetails={PersonalWebsiteSvelteKit}
externalLinks={[ externalLinks={[
{ {
ariaLabel: "View GitHub repository for my personal website", ariaLabel: "View GitHub repository for my personal website",
href: "https://github.com/BradNut/personal-website-sveltekit", href: "https://github.com/BradNut/personal-website-sveltekit",
icon: GitHub, icon: gitHubIcon,
showIcon: true, showIcon: true,
text: "GitHub repository", text: "GitHub repository",
}, },
]} ]}
></Portfolio> >
<Portfolio <h2>My personal website re-written using SvelteKit.</h2>
Tech Stack:
<ul>
<li>
<ExternalLink
linkData={{
href: "https://kit.svelte.dev/",
ariaLabel: "SvelteKit",
}}
textData={{ text: "SvelteKit", showIcon: true, location: "left" }}
/>
</li>
<li>
<ExternalLink
linkData={{ href: "https://bits-ui.com/", ariaLabel: "Bits-UI" }}
textData={{ text: "Bits-UI", showIcon: true, location: "left" }}
/> for the headless-ui components.
</li>
<li>
<ExternalLink
linkData={{
href: "https://www.typescriptlang.org/",
ariaLabel: "TypeScript",
}}
textData={{ text: "TypeScript", showIcon: true, location: "left" }}
/>
</li>
<li>Deployed on a Coolify Self Hosted Box</li>
<li>
Icons in the <a href="/about">/about</a> page and the Bee, Shell, and
Nut icons are all made by <ExternalLink
linkData={{
href: "https://www.flaticon.com/authors/freepik",
ariaLabel: "Freepik",
}}
textData={{ text: "Freepik", showIcon: true, location: "right" }}
/> from <ExternalLink
textData={{ text: "Flaticon", showIcon: true, location: "right" }}
linkData={{
href: "https://www.flaticon.com/",
ariaLabel: "Flaticon",
}}
/>
</li>
</ul>
Previous version of my website was written using React and Gatsby which
you can view <ExternalLink
linkData={{
href: "https://bradleyshellnut.com",
ariaLabel: "React and Gatsby Personal Site version",
}}
textData={{ text: "here", showIcon: true, location: "right" }}
/>. Each iteration brings better code and my previous React version was
improved after the suggestions on <ExternalLink
linkData={{
href: "https://syntax.fm/show/444/syntax-highlight#t=33:19",
ariaLabel: "Syntax.fm Podcast Number 444",
}}
textData={{ text: "Show 444", showIcon: true, location: "right" }}
/> of the <ExternalLink
linkData={{ href: "https://syntax.fm/", ariaLabel: "Syntax.fm" }}
textData={{ text: "Syntax Pocast", showIcon: true, location: "right" }}
/>. You can view the previous archived version of the site before those
changes <ExternalLink
textData={{ text: "here", showIcon: true, location: "right" }}
linkData={{
href: "https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/",
ariaLabel: "Archive before Syntax Podcast",
}}
/>.
</Portfolio>
<!-- <Portfolio
name="Wedding Website" name="Wedding Website"
style="max-height: 550px;" style="max-height: 550px;"
src={weddingWebsite} src={weddingWebsite}
@ -75,7 +163,7 @@
{ {
ariaLabel: "View GitHub repository for the wedding site", ariaLabel: "View GitHub repository for the wedding site",
href: "https://github.com/BradNut/weddingsite", href: "https://github.com/BradNut/weddingsite",
icon: GitHub, icon: gitHubIcon,
showIcon: true, showIcon: true,
text: "GitHub repository", text: "GitHub repository",
}, },
@ -93,15 +181,15 @@
{ {
ariaLabel: "Archive of bradleyshellnut.com", ariaLabel: "Archive of bradleyshellnut.com",
href: "https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about", href: "https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about",
icon: GitHub, icon: gitHubIcon,
showIcon: true, showIcon: true,
text: "Link to an archive snapshot", text: "Link to an archive snapshot",
}, },
]} ]}
/> /> -->
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="professional"> <Tabs.Content value="professional">
<Portfolio <!-- <Portfolio
name="Mark Shellnut Architect" name="Mark Shellnut Architect"
style="max-height: 550px;" style="max-height: 550px;"
src={shellnutArchitectWebsite} src={shellnutArchitectWebsite}
@ -117,7 +205,7 @@
text: "Link to Mark Shellnut Architect", text: "Link to Mark Shellnut Architect",
}, },
]} ]}
/> /> -->
</Tabs.Content> </Tabs.Content>
</Tabs.Root> </Tabs.Root>

12
src/routes/portfolio/Portfolio.svelte
View file

@ -5,8 +5,6 @@
const { const {
links, links,
details,
portfolioDetails,
externalLinks, externalLinks,
name, name,
src, src,
@ -14,9 +12,9 @@
style, style,
fetchPriority = 'auto', fetchPriority = 'auto',
loading = 'lazy', loading = 'lazy',
}: { links: Snippet<ExternalLinkType[]>, details: Snippet<string>, portfolioDetails: string, children
externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string; }: { links: Snippet<ExternalLinkType[]>, externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string;
style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager' } = $props(); style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager', children?: Snippet } = $props();
</script> </script>
<div class="portfolio"> <div class="portfolio">
@ -26,7 +24,7 @@
{@render links(externalLinks)} {@render links(externalLinks)}
</div> </div>
<div class="portfolio-details"> <div class="portfolio-details">
{@render details(portfolioDetails)} {@render children?.()}
</div> </div>
</div> </div>
@ -58,4 +56,4 @@
list-style-type: disc; list-style-type: disc;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
</style> </style>