mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Giving up on MD and putting into portfolio.
This commit is contained in:
Bradley Shellnut
parent
553ce0f783
commit
3fda9d067f
7 changed files with 162 additions and 77 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { Article } from '$lib/types/article';
|
||||
import { ArrowRight } from 'lucide-svelte';
|
||||
import ExternalLink from './ExternalLink.svelte';
|
||||
|
||||
const {
|
||||
|
|
@ -10,7 +11,7 @@ const {
|
|||
}: { articles: Article[]; totalArticles: number; compact: boolean; classes: string[] } = $props();
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<section class="articles">
|
||||
<h2>Favorite Articles</h2>
|
||||
<div class={classes.join(' ')}>
|
||||
{#each articles as article (article.hashed_url)}
|
||||
|
|
@ -18,16 +19,19 @@ const {
|
|||
<section>
|
||||
<h3>
|
||||
<ExternalLink
|
||||
ariaLabel={`Link to ${article.title}`}
|
||||
href={article.url.toString()}
|
||||
showIcon
|
||||
>
|
||||
{#if compact}
|
||||
{article.title.substring(0, 50).trim()}
|
||||
{:else}
|
||||
{article.title}
|
||||
{/if}
|
||||
</ExternalLink>
|
||||
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' }}
|
||||
/>
|
||||
</h3>
|
||||
<p>{article.domain_name}</p>
|
||||
</section>
|
||||
|
|
@ -43,13 +47,8 @@ const {
|
|||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="moreArticles">
|
||||
<a href="/articles">{`${totalArticles} more articles`}</a>
|
||||
<a href="/articles" aria-label={`${totalArticles} more articles`}>
|
||||
<iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="moreArticles" href="/articles">{`${totalArticles} more articles`} <ArrowRight /></a>
|
||||
</section>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
|
@ -61,6 +60,11 @@ const {
|
|||
}
|
||||
}
|
||||
|
||||
.articles {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(250px, 1fr));
|
||||
|
|
@ -95,19 +99,15 @@ const {
|
|||
}
|
||||
|
||||
.moreArticles {
|
||||
margin: 1.7rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
|
||||
& a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
font-size: var(--h2);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--h3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,21 +6,21 @@ portfolioImageAlt: 'Home Page of bradleyshellnut.com'
|
|||
---
|
||||
|
||||
<script>
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
import ExternalLink from "$lib/components/ExternalLink.svelte";
|
||||
</script>
|
||||
|
||||
{portfolioSubHeading}
|
||||
|
||||
Tech Stack:
|
||||
|
||||
- <ExternalLink href="https://kit.svelte.dev/" showIcon>SvelteKit</ExternalLink>
|
||||
- <ExternalLink showIcon href="https://bits-ui.com/">Bits-UI</ExternalLink> for the headless-ui components.
|
||||
- TypeScript
|
||||
- <ExternalLink linkData={{ href: "https://kit.svelte.dev/", ariaLabel: "SvelteKit" }} textData={{ text: "SvelteKit", showIcon: true, location: "left" }} />
|
||||
- <ExternalLink linkData={{ href: "https://bits-ui.com/", ariaLabel: "Bits-UI" }} textData={{ text: "Bits-UI", showIcon: true, location: "left" }} /> for the headless-ui components.
|
||||
- <ExternalLink linkData={{ href: "https://www.typescriptlang.org/", ariaLabel: "TypeScript" }} textData={{ text: "TypeScript", showIcon: true, location: "left" }} />
|
||||
- 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" }} />.
|
||||
|
|
@ -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;
|
||||
icon?: Snippet | typeof IconType;
|
||||
showIcon: boolean;
|
||||
text: string;
|
||||
};
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import NProgress from "nprogress";
|
||||
import { browser } from "$app/environment";
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
});
|
||||
|
||||
const dev = process.env.NODE_ENV !== 'production';
|
||||
const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com/';
|
||||
|
||||
$effect(() => {
|
||||
if (browser && $navigating) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
{#each externalLinks as link}
|
||||
<ExternalLink
|
||||
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}
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -2,41 +2,59 @@
|
|||
import ExternalLink from "$lib/components/ExternalLink.svelte";
|
||||
import Portfolio from "./Portfolio.svelte";
|
||||
// @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)
|
||||
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)
|
||||
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)
|
||||
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 { Tabs } from "bits-ui";
|
||||
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 oldSite from "../../lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?enhanced";
|
||||
import weddingWebsite from "../../lib/assets/images/portfolio/Wedding_Website.png?enhanced";
|
||||
import { gitHubIcon } from "$root/lib/util/logoIcons.svelte";
|
||||
</script>
|
||||
|
||||
{#snippet links(externalLinks: ExternalLinkType[])}
|
||||
<span>
|
||||
{#each externalLinks as link}
|
||||
{#if link.icon && link.showIcon}
|
||||
<ExternalLink
|
||||
ariaLabel={link.ariaLabel}
|
||||
href={link.href}
|
||||
icon={link.icon}
|
||||
showIcon={link.showIcon}
|
||||
>
|
||||
{link.text}
|
||||
</ExternalLink>
|
||||
linkData={{
|
||||
href: link.href,
|
||||
ariaLabel: link.ariaLabel,
|
||||
title: link.ariaLabel,
|
||||
target: "_blank",
|
||||
}}
|
||||
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}
|
||||
</span>
|
||||
{/snippet}
|
||||
|
||||
{#snippet details(portfolioDetails)}
|
||||
{@const PortfolioDetails = portfolioDetails}
|
||||
<PortfolioDetails />
|
||||
{/snippet}
|
||||
|
||||
<h1>Portfolio!</h1>
|
||||
<Tabs.Root value="personal">
|
||||
<Tabs.List>
|
||||
|
|
@ -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",
|
||||
},
|
||||
]}
|
||||
></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"
|
||||
style="max-height: 550px;"
|
||||
src={weddingWebsite}
|
||||
|
|
@ -75,7 +163,7 @@
|
|||
{
|
||||
ariaLabel: "View GitHub repository for the wedding site",
|
||||
href: "https://github.com/BradNut/weddingsite",
|
||||
icon: GitHub,
|
||||
icon: gitHubIcon,
|
||||
showIcon: true,
|
||||
text: "GitHub repository",
|
||||
},
|
||||
|
|
@ -93,15 +181,15 @@
|
|||
{
|
||||
ariaLabel: "Archive of bradleyshellnut.com",
|
||||
href: "https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about",
|
||||
icon: GitHub,
|
||||
icon: gitHubIcon,
|
||||
showIcon: true,
|
||||
text: "Link to an archive snapshot",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
/> -->
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="professional">
|
||||
<Portfolio
|
||||
<!-- <Portfolio
|
||||
name="Mark Shellnut Architect"
|
||||
style="max-height: 550px;"
|
||||
src={shellnutArchitectWebsite}
|
||||
|
|
@ -117,7 +205,7 @@
|
|||
text: "Link to Mark Shellnut Architect",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
/> -->
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
|
||||
const {
|
||||
links,
|
||||
details,
|
||||
portfolioDetails,
|
||||
externalLinks,
|
||||
name,
|
||||
src,
|
||||
|
|
@ -14,9 +12,9 @@
|
|||
style,
|
||||
fetchPriority = 'auto',
|
||||
loading = 'lazy',
|
||||
}: { links: Snippet<ExternalLinkType[]>, details: Snippet<string>, portfolioDetails: string,
|
||||
externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string;
|
||||
style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager' } = $props();
|
||||
children
|
||||
}: { links: Snippet<ExternalLinkType[]>, externalLinks: ExternalLinkType[], name: string; src: string | Picture; alt: string;
|
||||
style: string; fetchPriority?: 'high' | 'low' | 'auto'; loading?: 'lazy' | 'eager', children?: Snippet } = $props();
|
||||
</script>
|
||||
|
||||
<div class="portfolio">
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
{@render links(externalLinks)}
|
||||
</div>
|
||||
<div class="portfolio-details">
|
||||
{@render details(portfolioDetails)}
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue