Compare commits
20 Commits
new-landin
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 7468b19fbd | |||
| 220a1f364e | |||
| 16f5ace75e | |||
| 96b0a07ff3 | |||
| 4d24c0c5d5 | |||
| 8bbafaca6f | |||
| b66333a5fc | |||
| 31e7e95d75 | |||
| 58532c8124 | |||
| c06cf6dd02 | |||
| d367bb85fe | |||
| aa236b7122 | |||
| 5d0a7d1c77 | |||
| ec835c000b | |||
| 3d91f17feb | |||
| c9467a6669 | |||
| c73fec85ad | |||
| a67351c950 | |||
| d35521b383 | |||
| 4d7de6a959 |
26
package-lock.json
generated
26
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-vercel": "^5.3.0",
|
||||
"@vercel/analytics": "^1.3.1",
|
||||
"geist": "^1.3.0",
|
||||
"moment": "^2.30.1",
|
||||
"pnpm": "^9.1.1"
|
||||
|
|
@ -1211,6 +1212,26 @@
|
|||
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@vercel/analytics": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.3.1.tgz",
|
||||
"integrity": "sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==",
|
||||
"dependencies": {
|
||||
"server-only": "^0.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"next": ">= 13",
|
||||
"react": "^18 || ^19"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"next": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vercel/nft": {
|
||||
"version": "0.26.5",
|
||||
"resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.26.5.tgz",
|
||||
|
|
@ -3802,6 +3823,11 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/server-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
|
||||
"integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
|
||||
},
|
||||
"node_modules/set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-vercel": "^5.3.0",
|
||||
"@vercel/analytics": "^1.3.1",
|
||||
"geist": "^1.3.0",
|
||||
"moment": "^2.30.1",
|
||||
"pnpm": "^9.1.1"
|
||||
|
|
|
|||
|
|
@ -10,11 +10,16 @@
|
|||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Christian Rannes Dev Portfolio</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Welcome to my personal website where I share my projects and repos."
|
||||
/>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light"
|
||||
class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200"
|
||||
>
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<BottomNav
|
||||
position="fixed"
|
||||
classInner="grid-cols-4"
|
||||
classInner="grid-cols-2"
|
||||
outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600"
|
||||
>
|
||||
<BottomNavItem btnName="home" href="/" on:click={() => handleNavItemClick('home')}>
|
||||
|
|
@ -33,19 +33,10 @@
|
|||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||
/>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem btnName="whoami" href="/about" on:click={() => handleNavItemClick('whoami')}>
|
||||
<ProfileCardOutline
|
||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||
/>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
|
||||
<ImageOutline
|
||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||
/>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem btnName="contact" href="/contact" on:click={() => handleNavItemClick('contact')}>
|
||||
<MobilePhoneOutline
|
||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||
/>
|
||||
</BottomNavItem>
|
||||
|
||||
</BottomNav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import ProjectDescription from './ProjectDescription.svelte';
|
||||
import ProjectHeader from './ProjectHeader.svelte';
|
||||
import ProjectLinks from './ProjectLinks.svelte';
|
||||
import ProjectRepo from './ProjectRepo.svelte';
|
||||
import VendorGallery from './VendorGallery.svelte';
|
||||
|
||||
|
|
@ -14,7 +15,11 @@
|
|||
</script>
|
||||
|
||||
<div class="pt-12">
|
||||
<ProjectHeader {title} />
|
||||
<div class="flex justify-start items-center gap-4">
|
||||
<ProjectHeader {title} />
|
||||
<ProjectLinks {url} {repo}/>
|
||||
</div>
|
||||
<hr class="border-slate-400 border-1" />
|
||||
<ProjectDescription {description} />
|
||||
<VendorGallery {vendors} />
|
||||
<ProjectRepo {repo} {rss} {url} />
|
||||
|
|
|
|||
|
|
@ -2,5 +2,4 @@
|
|||
export let title;
|
||||
</script>
|
||||
|
||||
<h3 class="text-3xl mb-2">{title}</h3>
|
||||
<hr class="border-slate-400 border-1" />
|
||||
<h3 class="text-3xl">{title}</h3>
|
||||
|
|
|
|||
18
src/lib/ProjectCard/ProjectLinks.svelte
Normal file
18
src/lib/ProjectCard/ProjectLinks.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
|
||||
import { GithubSolid, GlobeOutline } from "flowbite-svelte-icons";
|
||||
export let url;
|
||||
export let repo;
|
||||
</script>
|
||||
<div class="flex gap-4">
|
||||
<div class="hover:scale-110">
|
||||
<a href={url}>
|
||||
<GlobeOutline class="mx-auto" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="hover:scale-110">
|
||||
<a href={repo}>
|
||||
<GithubSolid class="mx-auto" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +1,6 @@
|
|||
<script>
|
||||
import RssContainer from './RssContainer.svelte';
|
||||
import { GlobeOutline, GithubSolid } from 'flowbite-svelte-icons';
|
||||
export let url;
|
||||
export let repo;
|
||||
export let rss;
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center gap-12 my-12">
|
||||
<div class="hover:scale-110">
|
||||
<a href={url}>
|
||||
<GlobeOutline class="mx-auto" />
|
||||
</a>
|
||||
<p>www</p>
|
||||
</div>
|
||||
<div class="hover:scale-110">
|
||||
<a href={repo}>
|
||||
<GithubSolid class="mx-auto" />
|
||||
</a>
|
||||
<p>git</p>
|
||||
</div>
|
||||
</div>
|
||||
<RssContainer url={rss} />
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
export let vendors;
|
||||
</script>
|
||||
|
||||
<div class="my-4 dark:bg-slate-800 w-fit mx-auto rounded-2xl p-2">
|
||||
<h3 class="text-xl mb-2">built with</h3>
|
||||
<div class="flex justify-center gap-6 flex-wrap">
|
||||
<div class="my-4 dark:bg-slate-800 mx-auto md:w-fit rounded-2xl p-2">
|
||||
<h3 class="text-xl mb-2 text-center">built with</h3>
|
||||
<div class="flex justify-center flex-wrap gap-2">
|
||||
{#each vendors as vendor}
|
||||
<VendorIcon {...vendor} />
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<script>
|
||||
export let name;
|
||||
export let img;
|
||||
export let url;
|
||||
</script>
|
||||
|
||||
<a href={url}>
|
||||
<div class="flex flex-col justify-center h-16 hover:scale-110">
|
||||
<img src={img} alt={name} class="min-h-12 max-w-12 self-center" />
|
||||
<p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
|
||||
<div class="flex flex-col justify-center h-16 hover:scale-110 text-center items-center">
|
||||
<div class="flex justify-center h-12 w-12">
|
||||
<img src={img} alt={name} class="min-h-12 min-w-12 self-center" />
|
||||
</div>
|
||||
</a>
|
||||
<p class="text-slate-900 dark:text-stone-200">{name}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
</div>
|
||||
<NavUl class="md:flex-row" {activeUrl}>
|
||||
<NavLi href="/">home</NavLi>
|
||||
<NavLi href="/about">whoami</NavLi>
|
||||
<NavLi class="cursor-pointer">
|
||||
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
|
||||
</NavLi>
|
||||
|
|
@ -40,7 +39,6 @@
|
|||
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
|
||||
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
|
||||
</Dropdown>
|
||||
<NavLi href="/contact">contact</NavLi>
|
||||
<NavLi class="hidden sm:block">
|
||||
<DarkMode btnClass="p-0" />
|
||||
</NavLi>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 463 KiB |
BIN
src/lib/images/portfolio-card.webp
Normal file
BIN
src/lib/images/portfolio-card.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
1
src/lib/images/vendorIcons/awsIcon.svg
Normal file
1
src/lib/images/vendorIcons/awsIcon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333334 199332" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><defs><style>.fil1{fill:#f90}</style></defs><g id="Layer_x0020_1"><g id="amazon-web-services-2.svg"><path d="M93937 72393c0 4102 443 7428 1219 9867 887 2439 1996 5100 3548 7982 554 887 776 1774 776 2550 0 1109-665 2217-2106 3326l-6985 4656c-998 665-1995 998-2882 998-1109 0-2217-554-3326-1552-1552-1663-2882-3437-3991-5211-1109-1885-2217-3991-3437-6541-8648 10200-19512 15299-32594 15299-9312 0-16740-2661-22172-7982-5432-5322-8204-12417-8204-21286 0-9424 3326-17073 10089-22838s15743-8647 27161-8647c3769 0 7650 332 11752 887 4102 554 8315 1441 12749 2439v-8093c0-8426-1774-14301-5211-17738-3548-3437-9534-5100-18071-5100-3880 0-7871 443-11973 1441s-8093 2217-11973 3769c-1774 776-3104 1219-3880 1441s-1330 332-1774 332c-1552 0-2328-1109-2328-3437v-5432c0-1774 222-3104 776-3880s1552-1552 3104-2328c3880-1996 8537-3659 13969-4989C43606 885 49370 220 55468 220c13193 0 22838 2993 29046 8980 6098 5987 9202 15077 9202 27272v35920h222zM48926 89244c3659 0 7428-665 11419-1995s7539-3769 10532-7095c1774-2106 3104-4435 3770-7095 665-2661 1108-5876 1108-9645v-4656c-3215-776-6652-1441-10199-1885-3548-443-6984-665-10421-665-7428 0-12860 1441-16519 4435-3659 2993-5432 7206-5432 12749 0 5211 1330 9091 4102 11751 2661 2772 6541 4102 11641 4102zm89023 11973c-1996 0-3326-332-4213-1109-887-665-1663-2217-2328-4324l-26053-85697c-665-2217-998-3658-998-4434 0-1774 887-2772 2661-2772h10865c2106 0 3548 333 4324 1109 887 665 1552 2217 2217 4324l18625 73391 17295-73391c554-2217 1219-3659 2106-4324s2439-1109 4435-1109h8869c2106 0 3548 333 4435 1109 887 665 1663 2217 2106 4324l17516 74278 19180-74278c665-2217 1441-3659 2217-4324 887-665 2328-1109 4324-1109h10310c1774 0 2772 887 2772 2772 0 554-111 1109-222 1774s-333 1552-776 2772l-26718 85697c-665 2217-1441 3658-2328 4324-887 665-2328 1109-4213 1109h-9534c-2107 0-3548-333-4435-1109s-1663-2217-2106-4435l-17184-71507-17073 71396c-554 2217-1220 3658-2107 4434s-2439 1109-4434 1109h-9534zm142459 2993c-5765 0-11530-665-17073-1995s-9867-2772-12749-4435c-1774-998-2993-2106-3437-3104-443-998-665-2106-665-3104v-5654c0-2328 887-3437 2550-3437 665 0 1330 111 1995 333s1663 665 2772 1109c3769 1663 7871 2993 12195 3880 4435 887 8758 1330 13193 1330 6984 0 12417-1220 16186-3659s5765-5987 5765-10532c0-3104-998-5654-2993-7760-1996-2107-5765-3991-11197-5765l-16075-4989c-8093-2550-14080-6319-17738-11308-3658-4878-5543-10310-5543-16075 0-4656 998-8758 2993-12306s4656-6652 7982-9091c3326-2550 7095-4434 11530-5765S279190-2 284068-2c2439 0 4989 111 7428 443 2550 333 4878 776 7206 1219 2217 554 4324 1109 6319 1774s3548 1330 4656 1996c1552 887 2661 1774 3326 2771 665 887 998 2107 998 3659v5211c0 2328-887 3548-2550 3548-887 0-2328-444-4213-1331-6319-2882-13415-4324-21286-4324-6319 0-11308 998-14745 3104s-5211 5321-5211 9867c0 3104 1109 5765 3326 7871s6319 4213 12195 6097l15743 4989c7982 2550 13747 6098 17184 10643s5100 9756 5100 15521c0 4767-998 9091-2882 12860-1996 3770-4656 7095-8093 9756-3437 2771-7539 4767-12306 6208-4989 1552-10199 2328-15854 2328z" fill="#252f3e"/><path class="fil1" d="M301362 158091c-36474 26940-89467 41241-135031 41241-63858 0-121395-23614-164854-62859-3437-3104-332-7317 3770-4878 47006 27272 104988 43791 164964 43791 40465 0 84921-8426 125830-25721 6097-2772 11308 3991 5321 8426z"/><path class="fil1" d="M316550 140796c-4656-5987-30820-2883-42682-1441-3548 443-4102-2661-887-4989 20842-14634 55099-10421 59090-5543 3991 4989-1109 39246-20620 55653-2993 2550-5876 1220-4545-2106 4435-10976 14301-35698 9645-41574z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/lib/images/vendorIcons/awsIcon.webp
Normal file
BIN
src/lib/images/vendorIcons/awsIcon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
src/lib/images/vendorIcons/goIcon.svg
Normal file
1
src/lib/images/vendorIcons/goIcon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 45.91" style="enable-background:new 0 0 122.88 45.91" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00ACD7;} .st1{fill:#00ACD7;}</style><g><path class="st0" d="M9.27,13.9c-0.24,0-0.3-0.12-0.18-0.3l1.26-1.62c0.12-0.18,0.42-0.3,0.66-0.3l21.36,0 c0.24,0,0.3,0.18,0.18,0.36l-1.02,1.56c-0.12,0.18-0.42,0.36-0.6,0.36L9.27,13.9L9.27,13.9z"/><path class="st0" d="M0.24,19.41c-0.24,0-0.3-0.12-0.18-0.3l1.26-1.62c0.12-0.18,0.42-0.3,0.66-0.3h27.28 c0.24,0,0.36,0.18,0.3,0.36l-0.48,1.44c-0.06,0.24-0.3,0.36-0.54,0.36L0.24,19.41L0.24,19.41z"/><path class="st0" d="M14.72,24.91c-0.24,0-0.3-0.18-0.18-0.36l0.84-1.5c0.12-0.18,0.36-0.36,0.6-0.36l11.97,0 c0.24,0,0.36,0.18,0.36,0.42l-0.12,1.44c0,0.24-0.24,0.42-0.42,0.42L14.72,24.91L14.72,24.91z"/><path class="st0" d="M76.82,12.82c-3.77,0.96-6.34,1.68-10.05,2.63c-0.9,0.24-0.96,0.3-1.74-0.6c-0.9-1.02-1.56-1.67-2.81-2.27 c-3.77-1.85-7.42-1.32-10.83,0.9c-4.07,2.63-6.16,6.52-6.1,11.37c0.06,4.79,3.35,8.73,8.08,9.39c4.07,0.54,7.48-0.9,10.17-3.95 c0.54-0.66,1.02-1.38,1.62-2.21c-2.15,0-4.85,0-11.55,0c-1.26,0-1.56-0.78-1.14-1.79c0.78-1.85,2.21-4.97,3.05-6.52 c0.18-0.36,0.6-0.96,1.5-0.96h21.78c-0.12,1.62-0.12,3.23-0.36,4.85c-0.66,4.31-2.27,8.26-4.91,11.73 c-4.31,5.68-9.93,9.21-17.05,10.17c-5.86,0.78-11.31-0.36-16.09-3.95c-4.43-3.35-6.94-7.78-7.6-13.28 c-0.78-6.52,1.14-12.38,5.09-17.53c4.25-5.56,9.87-9.09,16.75-10.35c5.62-1.02,11.01-0.36,15.85,2.93 c3.17,2.09,5.44,4.97,6.94,8.44C77.78,12.35,77.54,12.64,76.82,12.82L76.82,12.82L76.82,12.82z"/><path class="st1" d="M96.62,45.91c-5.44-0.12-10.41-1.68-14.6-5.26c-3.53-3.05-5.74-6.94-6.46-11.55 c-1.08-6.76,0.78-12.74,4.85-18.07c4.37-5.74,9.63-8.73,16.75-9.99c6.1-1.08,11.85-0.48,17.05,3.05c4.73,3.23,7.66,7.6,8.44,13.34 c1.02,8.08-1.32,14.66-6.88,20.28c-3.95,4.01-8.79,6.52-14.36,7.66C99.79,45.67,98.18,45.73,96.62,45.91L96.62,45.91L96.62,45.91z M110.86,21.74c-0.06-0.78-0.06-1.38-0.18-1.97c-1.08-5.92-6.52-9.27-12.21-7.96c-5.56,1.26-9.15,4.79-10.47,10.41 c-1.08,4.67,1.2,9.39,5.5,11.31c3.29,1.44,6.58,1.26,9.75-0.36C107.99,30.71,110.56,26.88,110.86,21.74L110.86,21.74z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/lib/images/vendorIcons/shadcnIcon.png
Normal file
BIN
src/lib/images/vendorIcons/shadcnIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/lib/images/vendorIcons/zustandIcon.png
Normal file
BIN
src/lib/images/vendorIcons/zustandIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -4,11 +4,50 @@ 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 nextuiIcon from '$lib/images/vendorIcons/nextuiIcon.png';
|
||||
import authjsIcon from '$lib/images/vendorIcons/authjsIcon.webp';
|
||||
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';
|
||||
|
||||
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.',
|
||||
repo: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend',
|
||||
rss: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend.rss',
|
||||
image: '',
|
||||
vendors: [
|
||||
{
|
||||
name: 'Go',
|
||||
img: goIcon,
|
||||
url: 'https://go.dev/'
|
||||
},
|
||||
{
|
||||
name: 'Next.js',
|
||||
img: nextjsIcon,
|
||||
url: 'https://nextjs.org/'
|
||||
},
|
||||
{
|
||||
name: 'Tailwind',
|
||||
img: tailwindIcon,
|
||||
url: 'https://tailwindcss.com/'
|
||||
},
|
||||
{
|
||||
name: 'Vercel',
|
||||
img: vercelIcon,
|
||||
url: 'https://vercel.com/'
|
||||
},
|
||||
{
|
||||
name: 'AWS',
|
||||
img: awsIcon,
|
||||
url: 'https://aws.amazon.com/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'svelte',
|
||||
title: 'Portfolio',
|
||||
|
|
@ -43,12 +82,12 @@ export const projects = [
|
|||
},
|
||||
{
|
||||
category: 'nextjs',
|
||||
title: 'Scaffolding the next project.',
|
||||
url: 'https://titles-psi.vercel.app/',
|
||||
title: 'Online Wine Shop.',
|
||||
url: 'https://wine-shop-eta.vercel.app/',
|
||||
description:
|
||||
'I am exploring different librarys for ui, auth, ORM etc. for my next project. This time it is deployed to vercel, but I am still using workflows.',
|
||||
repo: 'https://gitea.rannes.dev/rannes.dev/titles',
|
||||
rss: 'https://gitea.rannes.dev/rannes.dev/titles.rss',
|
||||
"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: [
|
||||
{
|
||||
|
|
@ -61,16 +100,6 @@ export const projects = [
|
|||
img: nextjsIcon,
|
||||
url: 'https://nextjs.org/'
|
||||
},
|
||||
{
|
||||
name: 'Auth.js',
|
||||
img: authjsIcon,
|
||||
url: 'https://authjs.dev/'
|
||||
},
|
||||
{
|
||||
name: 'Nextui',
|
||||
img: nextuiIcon,
|
||||
url: 'https://nextui.org/'
|
||||
},
|
||||
{
|
||||
name: 'Tailwind',
|
||||
img: tailwindIcon,
|
||||
|
|
@ -81,6 +110,16 @@ export const projects = [
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@
|
|||
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 text-center mb-20 md:mb-0">
|
||||
<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 />
|
||||
</div>
|
||||
<BottomNavigation />
|
||||
|
|
|
|||
|
|
@ -4,18 +4,11 @@
|
|||
import { Heading, Mark } from 'flowbite-svelte';
|
||||
import portfolio from '$lib/images/portfolio.png';
|
||||
import hero from '$lib/images/hero.webp';
|
||||
|
||||
const images = [
|
||||
{
|
||||
title: '/projects/nextjs',
|
||||
image: portfolio
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="text-center text-xl">
|
||||
<div class="text-xl">
|
||||
<div class="flex my-4 gap-4">
|
||||
<Heading tag="h1" class="md:text-right">father by day <Mark>developer</Mark> by night</Heading>
|
||||
<Heading tag="h1" class="md:text-right leading-tight">father by day <Mark>developer</Mark> by night</Heading>
|
||||
<img
|
||||
src={hero}
|
||||
alt=""
|
||||
|
|
@ -27,17 +20,10 @@
|
|||
expand over time.
|
||||
</h2>
|
||||
<p class="py-2">
|
||||
I like to explore many different technologies and frameworks mostly surrounding web development
|
||||
and infrastructure.
|
||||
I like to explore many different technologies and frameworks mostly surrounding web development, infrastructure and DevOps.
|
||||
</p>
|
||||
<div class="hidden md:block py-2">
|
||||
<VendorMarquee />
|
||||
</div>
|
||||
<div class="md:hidden py-2">
|
||||
<VendorCarousel />
|
||||
</div>
|
||||
<h2 class="py-2">
|
||||
You can see some of my web dev projects and a small write-up on my homelab in the projects
|
||||
section.
|
||||
This page is my initial portfolio project built in Svelte.
|
||||
</h2>
|
||||
<p>You can read all about it <a class="underline" href="/projects/svelte">here</a> and explore the repo on <a class="underline" href="https://gitea.rannes.dev/rannes.dev/my-portfolio">my gitea.</a></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<script>
|
||||
import migImg from '$lib/images/mig.jpg';
|
||||
import osImg from '$lib/images/os.webp';
|
||||
import { fade } from 'svelte/transition';
|
||||
import PageHeader from '$lib/PageHeader.svelte';
|
||||
const title = 'Life is good in Copenhagen';
|
||||
</script>
|
||||
|
||||
<div class="page-container" in:fade>
|
||||
<PageHeader {title} />
|
||||
<div class="article-container md:flex mb-4 items-center text-left">
|
||||
<p class="">
|
||||
I live in Copenhagen with my partner and children near the water. We love going on expeditions
|
||||
around the city in our cargo bike, or on my electrical skateboard. When we're not outside I
|
||||
spend a lot of time fiddling around with my homelab, and development projects. You can read
|
||||
more about my projects and homelab under the homelab and portfolio nav.
|
||||
</p>
|
||||
<img
|
||||
class="rounded-2xl xl:ml-4 md:w-auto md:h-52 md:ml-0 md:mt-4 sm:ml-0 sm:mt-4 sm:w-full"
|
||||
src={migImg}
|
||||
alt="crazy man"
|
||||
/>
|
||||
</div>
|
||||
<p class="mb-4">
|
||||
I work in recruitment, and I specialise in building product teams for start ups and scale ups
|
||||
for a small recruitment agency called <a
|
||||
class="underline font-semibold"
|
||||
href="https://www.adveniopeople.com">Advenio People</a
|
||||
>
|
||||
</p>
|
||||
<img
|
||||
src={osImg}
|
||||
alt="A happy man and a beautiful woman both wearing facemasks."
|
||||
class="rounded-full w-1/2 h-auto m-auto"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import PageHeader from '$lib/PageHeader.svelte';
|
||||
const title = 'Coming soon!';
|
||||
</script>
|
||||
|
||||
<PageHeader {title} />
|
||||
<p class="py-6">
|
||||
For now you can hit me up on <a
|
||||
class="font-normal underline"
|
||||
href="https://www.linkedin.com/in/christian-rannes/"
|
||||
target="_blank">linkedin</a
|
||||
>
|
||||
</p>
|
||||
|
|
@ -10,15 +10,15 @@
|
|||
<div in:fade>
|
||||
<PageHeader {title} />
|
||||
|
||||
<div class="content text-left">
|
||||
<div class="content">
|
||||
<article>
|
||||
<h2 class="text-xl text-center">What is a homelab?</h2>
|
||||
<h2 class="text-xl ">What is a homelab?</h2>
|
||||
<img class="rounded mt-4" src={quoteImg} alt="" />
|
||||
<p class="text-sm italic">
|
||||
This question was answered very well by the reddit users webtroter and TreAwayDeuce 6 years
|
||||
ago.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
|
||||
<h2 class="text-xl mt-4">Origin and Hardware</h2>
|
||||
<p>
|
||||
My interest in “Homelabbing” arose long before I was familiar with the term Homelab. I have
|
||||
always been curious, and drawn towards things that are unfamiliar to me. I am also a builder
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
>. The parts are all sourced, and the rest of the parts are 3D printed in ABS+. It took me
|
||||
roughly 40 hours to build it and calibrate it.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">OS</h2>
|
||||
<h2 class="text-xl mt-4">OS</h2>
|
||||
<p>
|
||||
The server is running ProxmoxVE which is great for experimenting, as I can provision
|
||||
development and test environments easily from templates and spin up machines to experiment
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
Proxmox even though virtualization is not necessarily something I will do a deep dive on. It
|
||||
also makes it easy to separate services in LXC containers and virtual machines.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">VMs and LXC</h2>
|
||||
<h3 class="text-lg text-center">Docker Host</h3>
|
||||
<h2 class="text-xl mt-4">VMs and LXC</h2>
|
||||
<h3 class="text-lg ">Docker Host</h3>
|
||||
<p>
|
||||
This VM is my production environment where I run my docker services that have been tested an
|
||||
properly implemented with network volumes and backup.
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
<li>Kuma Uptime</li>
|
||||
<li>Portainer</li>
|
||||
</ul>
|
||||
<h3 class="text-lg text-center mt-4">Pi-Hole</h3>
|
||||
<h3 class="text-lg mt-4">Pi-Hole</h3>
|
||||
<p>
|
||||
LXC container running Pi-hole dns blocker. This is separate so the network is not affected
|
||||
when servicing other VMs. First this was included in the docker-stack but it created too
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
<p>
|
||||
For this reason, I am also planning on moving Crowdsec and Traefik to a separate containers.
|
||||
</p>
|
||||
<h3 class="text-lg text-center mt-4">Unraid</h3>
|
||||
<h3 class="text-lg mt-4">Unraid</h3>
|
||||
<p>
|
||||
This VM is running Unraid, which is managing my BTRFS array in Raid1. Upon boot it is loaded
|
||||
from a USB-stick, and runs from memory. I moved to unraid as it allows me to add more drives
|
||||
|
|
@ -154,13 +154,13 @@
|
|||
have the knowledge (or the will) of storage systems to manage it if I can avoid it.
|
||||
</p>
|
||||
<p>This VM has the SATA controller passed through, for full control of the HDD's.</p>
|
||||
<h3 class="text-lg text-center mt-4">Development server</h3>
|
||||
<h3 class="text-lg mt-4">Development server</h3>
|
||||
<p>
|
||||
This vm is my development server. It's running a act_runner paired up with Gitea to build my
|
||||
portfolio project, dockerize it and push it to my container registry. The application then
|
||||
deployed in the staging environment for a last check.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">CI/CD</h2>
|
||||
<h2 class="text-xl mt-4">CI/CD</h2>
|
||||
<p>
|
||||
I use Gitea Actions which is similar to Github Actions. I will post a guide soon how to set
|
||||
up CI for your svelte-docker project with Gitea Actions.
|
||||
|
|
|
|||
0
src/routes/socials/+layout.svelte
Normal file
0
src/routes/socials/+layout.svelte
Normal file
3
src/routes/socials/+page.svelte
Normal file
3
src/routes/socials/+page.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<div>
|
||||
<img src="$lib/images/portfolio-card.webp" alt="Socials Card" />
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user