consolidated web dev projects in its own page, and update sw jobs
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m12s

This commit is contained in:
hook-lord 2024-12-06 17:22:40 +01:00
parent f10ddfc1f8
commit cc403eb1b0
7 changed files with 190 additions and 178 deletions

View File

@ -1,11 +1,8 @@
<script>
import { projects } from '$lib/projects.js';
import ProjectCard from './ProjectCard/ProjectCard.svelte';
export let category;
</script>
{#each projects as project}
{#if project.category === category}
<ProjectCard {...project} />
{/if}
{/each}

View File

@ -9,10 +9,7 @@
DarkMode
} from 'flowbite-svelte';
import { ChevronDownOutline } from 'flowbite-svelte-icons';
import logo from '$lib/logo.png'
import { page } from '$app/stores';
$: activeUrl = $page.url.pathname;
import logo from '$lib/logo.png';
</script>
<Navbar class="bg-transparent dark:bg-transparent">
@ -25,18 +22,13 @@
<div class="flex">
<DarkMode btnClass="block sm:hidden" />
</div>
<NavUl class="md:flex-row" {activeUrl}>
<NavUl class="md:flex-row">
<NavLi href="/">home</NavLi>
<NavLi class="cursor-pointer">
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
</NavLi>
<Dropdown
{activeUrl}
activeClass="font-bold text-primary-800 dark:text-stone-200"
class="w-44 z-20"
>
<DropdownItem href="/projects/svelte">svelte</DropdownItem>
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
<Dropdown activeClass="font-bold text-primary-800 dark:text-stone-200" class="w-44 z-20">
<DropdownItem href="/projects/web-dev">web-dev</DropdownItem>
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
</Dropdown>
<NavLi class="hidden sm:block">

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -4,19 +4,15 @@ import vercelIcon from '$lib/images/vendorIcons/vercelIcon.svg';
import flowbiteSvelteIcon from '$lib/images/vendorIcons/flowbiteSvelteIcon.svg';
import reactIcon from '$lib/images/vendorIcons/reactIcon.svg';
import nextjsIcon from '$lib/images/vendorIcons/nextjsIcon.svg';
import drizzleIcon from '$lib/images/vendorIcons/drizzleIcon.webp';
import zustandIcon from '$lib/images/vendorIcons/zustandIcon.png';
import shadcnIcon from '$lib/images/vendorIcons/shadcnIcon.png';
import goIcon from '$lib/images/vendorIcons/goIcon.svg';
import awsIcon from '$lib/images/vendorIcons/awsIcon.svg';
import k8sIcon from '$lib/images/vendorIcons/kubernetes.svg'
export const projects = [
{
category: 'nextjs',
title: 'Software Jobs',
url: 'https://jobs.rannes.dev',
description:
'I wanted an excuse to try out Go, and I also want to find a job. The scraper is built with Go and the Colly package. It runs on a AWS EC2 instance, and the frontend is built with Next.js which is deployed to Vercel.',
'I wanted an excuse to try out Go, and I also want to find a job. The scraper is built with Go and the Colly package. The scraper runs as a cron job in kubernetes, and is served as an API deployd to the same cluster. The frontend is built with Next.js which is deployed to Vercel.',
repo: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend',
rss: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend.rss',
image: '',
@ -42,14 +38,13 @@ export const projects = [
url: 'https://vercel.com/'
},
{
name: 'AWS',
img: awsIcon,
name: 'k8s',
img: k8sIcon,
url: 'https://aws.amazon.com/'
}
]
},
{
category: 'svelte',
title: 'Portfolio',
url: 'https://rannes.dev',
description:
@ -80,53 +75,6 @@ export const projects = [
}
]
},
{
category: 'nextjs',
title: 'Online Wine Shop.',
url: 'https://wine-shop-eta.vercel.app/',
description:
"To get practical experience with forms, databases, queries and states I want to build a online wine shop for my friend Ketil (that he didn't ask for). Besides the current technologies, I plan to implement Clerk or Auth.js for auth, and Zustand for state management if neccesary (Something tells me it's needed at least for cart) I am doing my best to implement progressive enhancement in forms with cool hooks like <code class='dark:bg-slate-800 bg-stone-300 rounded p-1'>useActionState</code> and explore caching and the prevention of caching in nextjs and vercel. 🤷",
repo: 'https://gitea.rannes.dev/rannes.dev/wine-shop',
rss: 'https://gitea.rannes.dev/rannes.dev/wine-shop.rss',
image: '',
vendors: [
{
name: 'React',
img: reactIcon,
url: 'https://react.dev/'
},
{
name: 'Next.js',
img: nextjsIcon,
url: 'https://nextjs.org/'
},
{
name: 'Tailwind',
img: tailwindIcon,
url: 'https://tailwindcss.com/'
},
{
name: 'Drizzle',
img: drizzleIcon,
url: 'https://orm.drizzle.team/'
},
{
name: 'Zustand',
img: zustandIcon,
url: 'https://zustand-demo.pmnd.rs/'
},
{
name: 'Shadcn',
img: shadcnIcon,
url: 'https://ui.shadcn.com/'
},
{
name: 'Vercel',
img: vercelIcon,
url: 'https://vercel.com/'
}
]
},
{
category: 'nextjs',
title: 'Local weather',

View File

@ -1,18 +1,10 @@
<script>
<script lang="ts">
import '../app.css';
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
import BottomNavigation from '../lib/BottomNavigation.svelte';
import TopNav from '../lib/TopNav.svelte';
import { inject } from '@vercel/analytics';
let activeBtn = 'home';
function handleNavItemClick(btnName) {
activeBtn = btnName;
}
$: activeBtn = activeBtn === 'projects';
inject();
</script>
<CloudflareAnalytics />
<TopNav />
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0">
<slot />

View File

@ -2,11 +2,10 @@
import { fade } from 'svelte/transition';
import Projects from '$lib/Projects.svelte';
import PageHeader from '$lib/PageHeader.svelte';
const category = 'nextjs';
const title = 'Next.js Projects';
const title = 'Web dev projects';
</script>
<div in:fade>
<PageHeader {title} />
<Projects {category} />
<Projects />
</div>