rannes.dev/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rannes.dev:1683744551af5a35625c8af7c43aebf1cd3d0018
Branches Tags
rannes.dev:main
rannes.dev:info-arch
rannes.dev:new-landing
rannes.dev:flowbite-svelte
rannes.dev:projects-2
rannes.dev:sanity-cms
...
compare: rannes.dev:9e7ac815105a4848beaf9840c7c4262b61d187b7
Branches Tags
rannes.dev:main
rannes.dev:info-arch
rannes.dev:new-landing
rannes.dev:flowbite-svelte
rannes.dev:projects-2
rannes.dev:sanity-cms

7 Commits
1683744551 ... 9e7ac81510

Author SHA1 Message Date
christian
9e7ac81510 Merge pull request 'project-cards' (#5) from project-cards into main
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m24s
Details 
Reviewed-on: #5
 2024-05-19 21:35:49 +00:00
ChrQR
0741e6df13 removed learnings
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m42s
Details
2024-05-19 23:34:33 +02:00
ChrQR
c46a5cbacf more css
Some checks failed
Vercel Preview Deployment / Deploy-Preview (push) Has been cancelled
Details
2024-05-19 23:33:41 +02:00
ChrQR
7f935758e3 Lots of css fixes. Lots more to come!
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m18s
Details
2024-05-19 23:28:38 +02:00
ChrQR
a9f17c8602 added all projects to projects.js 2024-05-19 23:03:21 +02:00
ChrQR
a49a4d9b5f finished initial iteration of project cards
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m40s
Details
2024-05-19 22:18:25 +02:00
christian
41beb7e975 created skeleton for project cards.
Some checks failed
Vercel Preview Deployment / Deploy-Preview (push) Failing after 55s
Details
2024-05-19 20:25:26 +02:00
29 changed files with 392 additions and 123 deletions
Show Stats Expand all files Collapse all files

12
package-lock.json generated
View File

@ -24,6 +24,7 @@
"eslint-plugin-svelte": "^2.35.1",
"flowbite": "^2.3.0",
"flowbite-svelte": "^0.46.1",
"flowbite-svelte-icons": "^1.6.1",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
@ -2265,6 +2266,17 @@
"svelte": "^3.55.1 || ^4.0.0"
}
},
"node_modules/flowbite-svelte-icons": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-1.6.1.tgz",
"integrity": "sha512-Kw/7BzA6fqlFq7tBNudwX0KVU4cbyyXcMcgHTraMwGBtvBQan0RKMbvWwqm4JZNvLGAvRv1BM2EF7rzo/oam1Q==",
"dev": true,
"peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
"tailwind-merge": "^2.0.0",
"tailwindcss": "^3.3.2"
}
},
"node_modules/foreground-child": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"eslint-plugin-svelte": "^2.35.1",
"flowbite": "^2.3.0",
"flowbite-svelte": "^0.46.1",
"flowbite-svelte-icons": "^1.6.1",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",

2
src/app.css
View File

@ -6,5 +6,5 @@ body {
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
@apply bg-stone-100 dark:bg-gray-900 text-slate-600 dark:text-stone-100 text-center;
@apply bg-stone-200 dark:bg-gray-900 text-gray-900 dark:text-stone-200 text-center;
}

5
src/lib/Commit.svelte → src/lib/ProjectCard/Commit.svelte
View File

@ -1,6 +1,5 @@
<script>
import { AccordionItem } from 'flowbite-svelte';
import { Heading, Secondary } from 'flowbite-svelte';
import moment from 'moment';
export let index;
export let link;
@ -11,9 +10,9 @@
const open = index === 0;
</script>
<AccordionItem {...open ? { open: true } : {}}>
<AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}>
<span slot="header" class="flex justify-between items-center w-full">
<span>{@html title}</span>
<h3>{@html title}</h3>
<p class="text-xs mr-2">{pubAgo}</p>
</span>
<div class="flex flex-col">

21
src/lib/ProjectCard/ProjectCard.svelte Normal file
View File

@ -0,0 +1,21 @@
<script>
import ProjectDescription from './ProjectDescription.svelte';
import ProjectHeader from './ProjectHeader.svelte';
import ProjectRepo from './ProjectRepo.svelte';
import VendorGallery from './VendorGallery.svelte';
//Props
export let title;
export let url;
export let description;
export let repo;
export let rss;
export let vendors;
</script>
<div class="pt-12">
<ProjectHeader {title} />
<ProjectDescription {description} />
<VendorGallery {vendors} />
<ProjectRepo {repo} {rss} {url} />
</div>

5
src/lib/ProjectCard/ProjectDescription.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
export let description;
</script>
<p>{@html description}</p>

6
src/lib/ProjectCard/ProjectHeader.svelte Normal file
View File

@ -0,0 +1,6 @@
<script>
export let title;
</script>
<h3 class="text-3xl mb-2">{title}</h3>
<hr class="border-slate-400 border-1" />

23
src/lib/ProjectCard/ProjectRepo.svelte Normal file
View File

@ -0,0 +1,23 @@
<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-125">
<a href={url}>
<GlobeOutline class="hover:scale-125 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} />

3
src/lib/RssContainer.svelte → src/lib/ProjectCard/RssContainer.svelte
View File

@ -4,6 +4,7 @@
</script>
<div>
<h2 class="text-xl mt-4 font-normal">Here are the 5 most recent commits</h2>
<h2 class="text-2xl mt-4">recent commits</h2>
<hr class="border-1 border-slate-400" />
<RssFeed {url} />
</div>

4
src/lib/RssFeed.svelte → src/lib/ProjectCard/RssFeed.svelte
View File

@ -1,6 +1,6 @@
<script>
import { onMount } from 'svelte';
import Spinner from './Spinner.svelte';
import Spinner from '../Spinner.svelte';
import Commit from './Commit.svelte';
import { Accordion } from 'flowbite-svelte';
@ -55,7 +55,7 @@
});
</script>
<div class="my-4">
<div class="my-2">
{#if error}
<p>Error: {error}</p>
{:else if !feed}

14
src/lib/ProjectCard/VendorGallery.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
import VendorIcon from './VendorIcon.svelte';
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">
{#each vendors as vendor}
<VendorIcon {...vendor} />
{/each}
</div>
</div>

12
src/lib/ProjectCard/VendorIcon.svelte Normal file
View File

@ -0,0 +1,12 @@
<script>
export let name;
export let img;
export let url;
</script>
<a href={url}>
<div class="flex flex-col justify-center hover:scale-110">
<img src={img} alt={name} class="max-h-12 max-w-12 self-center" />
<p>{name}</p>
</div>
</a>

11
src/lib/Projects.svelte Normal file
View File

@ -0,0 +1,11 @@
<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}

BIN
src/lib/images/vendorIcons/authjsIcon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/lib/images/vendorIcons/drizzleIcon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

49
src/lib/images/vendorIcons/flowbiteDark.svg Normal file
View File

@ -0,0 +1,49 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49.0391 25.8854C48.8909 26.9063 48.2177 28.2932 47.4454 29.4991C46.471 31.0206 44.9247 32.0863 43.1551 32.4563L35.3597 34.0864C34.1068 34.3484 32.9707 35.0041 32.1177 35.9576L27.0064 41.671C26.0457 42.7447 25.3744 42.4887 25.3744 41.0485C25.3627 41.1019 22.8376 47.614 29.5295 51.4739C32.1008 52.957 35.802 52.4241 38.3732 50.941L51.997 43.0828C57.092 40.144 60.6893 35.1724 61.885 29.4174C61.9323 29.1897 61.9688 28.9613 62.0083 28.733L49.0391 25.8854Z" fill="url(#paint0_linear_1_55)"/>
<path d="M45.5059 18.0358C48.0771 19.5189 49.1277 21.7269 49.1276 24.6931C49.1276 25.0958 49.096 25.4936 49.0391 25.8854L54.5285 28.2434L62.0083 28.7329C62.966 23.1899 61.0891 17.4844 57.7242 12.9493C55.192 9.53637 51.9336 6.57463 48.0164 4.31512C44.8343 2.47968 41.5275 1.27038 38.2052 0.606812L34.4724 5.44082L33.2932 10.9915L45.5059 18.0358Z" fill="url(#paint1_linear_1_55)"/>
<path d="M1.56719 22.1036C1.5658 22.108 1.56966 22.1092 1.57112 22.1049C1.85917 21.2409 2.22036 20.2771 2.67128 19.2474C5.02669 13.8686 9.56572 10.2812 15.1498 8.45216C20.7339 6.62311 26.831 7.26425 31.9203 10.1998L33.293 10.9916L38.205 0.606824C22.5819 -2.51353 6.61456 6.66507 1.58706 22.0434C1.58465 22.0508 1.57591 22.0765 1.56719 22.1036Z" fill="url(#paint2_linear_1_55)"/>
<path d="M37.8396 50.9409C35.2684 52.424 32.1005 52.424 29.5293 50.9409C29.1803 50.7396 28.8512 50.5132 28.5401 50.2682L24.018 53.3771L20.1205 59.6753C24.4466 63.2755 30.0641 64.4329 35.6778 63.7892C39.9024 63.3048 44.0989 61.9665 48.0162 59.707C51.1983 57.8715 53.9 55.6151 56.1363 53.0724L53.8124 47.4257L50.0523 43.8966L37.8396 50.9409Z" fill="url(#paint3_linear_1_55)"/>
<path d="M28.5401 50.2682C26.5591 48.7077 25.3742 46.3143 25.3742 43.7508V43.4951V22.1448C25.3742 20.9374 25.7299 20.7321 26.7766 21.3359C25.1645 20.406 21.4404 17.214 16.8422 19.8662C14.271 21.3493 12.1537 24.6231 12.1537 27.5892V43.3057C12.1537 49.1833 15.198 55.3145 19.5888 59.2265C19.7625 59.3812 19.9423 59.5271 20.1205 59.6753L28.5401 50.2682Z" fill="url(#paint4_linear_1_55)"/>
<path d="M55.8209 10.6248C55.8178 10.6214 55.8147 10.6241 55.8178 10.6275C56.4227 11.3087 57.0776 12.1032 57.7447 13.0081C61.2296 17.7354 62.5317 23.7228 61.3252 29.4687C60.1186 35.2146 56.5143 40.1693 51.4251 43.1048L50.0523 43.8966L56.1363 53.0724C66.6528 41.1154 66.68 22.711 55.8631 10.672C55.8579 10.6663 55.8401 10.6459 55.8209 10.6248Z" fill="url(#paint5_linear_1_55)"/>
<path d="M12.6871 27.5893C12.6871 24.6231 14.271 21.8823 16.8423 20.3992C17.1913 20.1978 17.552 20.0263 17.92 19.8796L17.4861 14.4127L14.4372 8.15784C9.15342 10.1007 4.8794 14.1159 2.63056 19.2948C0.938193 23.1921 1.9584e-05 27.4921 0 32.0111C0 35.682 0.605098 39.1477 1.69106 42.354L7.74782 43.1666L12.6871 41.6779V27.5893Z" fill="url(#paint6_linear_1_55)"/>
<path d="M17.9201 19.8796C20.2632 18.9459 22.9304 19.1174 25.1526 20.3992L25.3742 20.527L43.165 30.7888C44.413 31.5086 44.2996 32.217 42.889 32.5119L43.9153 32.2973C45.2658 32.0149 46.4996 31.3248 47.4431 30.3191C49.0653 28.5899 49.6609 26.5036 49.6609 24.6931C49.6609 21.727 48.077 18.9861 45.5057 17.503L31.882 9.64479C26.787 6.70596 20.6787 6.0793 15.0922 7.92227C14.8712 7.99516 14.6549 8.07781 14.4373 8.15783L17.9201 19.8796Z" fill="url(#paint7_linear_1_55)"/>
<path d="M38.6444 63.3048C38.6489 63.3039 38.648 63.2999 38.6436 63.3008C37.7506 63.4835 36.7345 63.653 35.6164 63.7777C29.7762 64.4291 23.935 62.5621 19.5575 58.6452C15.1799 54.7283 12.6871 49.1325 12.6871 43.2615L12.6871 41.6779L1.6911 42.354C6.79779 57.4313 22.7379 66.6571 38.5823 63.3177C38.5899 63.3161 38.6165 63.3108 38.6444 63.3048Z" fill="url(#paint8_linear_1_55)"/>
<defs>
<linearGradient id="paint0_linear_1_55" x1="40.1202" y1="47.5399" x2="46.4152" y2="25.6136" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint1_linear_1_55" x1="54.6189" y1="20.8006" x2="38.0595" y2="4.29961" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint2_linear_1_55" x1="32.3289" y1="10.0423" x2="7.34863" y2="11.6208" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
<linearGradient id="paint3_linear_1_55" x1="30.6395" y1="57.3253" x2="53.0731" y2="51.2718" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint4_linear_1_55" x1="14.5375" y1="31.3654" x2="30.4648" y2="47.8694" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint5_linear_1_55" x1="50.9008" y1="43.2713" x2="62.0138" y2="20.8691" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
<linearGradient id="paint6_linear_1_55" x1="10.7277" y1="18.262" x2="4.78107" y2="40.6131" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint7_linear_1_55" x1="41.0862" y1="17.1988" x2="19.3554" y2="22.6094" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint8_linear_1_55" x1="12.8135" y1="42.7133" x2="26.6651" y2="63.5493" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

49
src/lib/images/vendorIcons/flowbiteLight.svg Normal file
View File

@ -0,0 +1,49 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49.0391 25.8854C48.8909 26.9063 48.2177 28.2932 47.4454 29.4991C46.471 31.0206 44.9247 32.0863 43.1551 32.4563L35.3597 34.0864C34.1068 34.3484 32.9707 35.0041 32.1177 35.9576L27.0064 41.671C26.0457 42.7447 25.3744 42.4887 25.3744 41.0485C25.3627 41.1019 22.8376 47.614 29.5295 51.4739C32.1008 52.957 35.802 52.4241 38.3732 50.941L51.997 43.0828C57.092 40.144 60.6893 35.1724 61.885 29.4174C61.9323 29.1897 61.9688 28.9613 62.0083 28.733L49.0391 25.8854Z" fill="url(#paint0_linear_1_55)"/>
<path d="M45.5059 18.0358C48.0771 19.5189 49.1277 21.7269 49.1276 24.6931C49.1276 25.0958 49.096 25.4936 49.0391 25.8854L54.5285 28.2434L62.0083 28.7329C62.966 23.1899 61.0891 17.4844 57.7242 12.9493C55.192 9.53637 51.9336 6.57463 48.0164 4.31512C44.8343 2.47968 41.5275 1.27038 38.2052 0.606812L34.4724 5.44082L33.2932 10.9915L45.5059 18.0358Z" fill="url(#paint1_linear_1_55)"/>
<path d="M1.56719 22.1036C1.5658 22.108 1.56966 22.1092 1.57112 22.1049C1.85917 21.2409 2.22036 20.2771 2.67128 19.2474C5.02669 13.8686 9.56572 10.2812 15.1498 8.45216C20.7339 6.62311 26.831 7.26425 31.9203 10.1998L33.293 10.9916L38.205 0.606824C22.5819 -2.51353 6.61456 6.66507 1.58706 22.0434C1.58465 22.0508 1.57591 22.0765 1.56719 22.1036Z" fill="url(#paint2_linear_1_55)"/>
<path d="M37.8396 50.9409C35.2684 52.424 32.1005 52.424 29.5293 50.9409C29.1803 50.7396 28.8512 50.5132 28.5401 50.2682L24.018 53.3771L20.1205 59.6753C24.4466 63.2755 30.0641 64.4329 35.6778 63.7892C39.9024 63.3048 44.0989 61.9665 48.0162 59.707C51.1983 57.8715 53.9 55.6151 56.1363 53.0724L53.8124 47.4257L50.0523 43.8966L37.8396 50.9409Z" fill="url(#paint3_linear_1_55)"/>
<path d="M28.5401 50.2682C26.5591 48.7077 25.3742 46.3143 25.3742 43.7508V43.4951V22.1448C25.3742 20.9374 25.7299 20.7321 26.7766 21.3359C25.1645 20.406 21.4404 17.214 16.8422 19.8662C14.271 21.3493 12.1537 24.6231 12.1537 27.5892V43.3057C12.1537 49.1833 15.198 55.3145 19.5888 59.2265C19.7625 59.3812 19.9423 59.5271 20.1205 59.6753L28.5401 50.2682Z" fill="url(#paint4_linear_1_55)"/>
<path d="M55.8209 10.6248C55.8178 10.6214 55.8147 10.6241 55.8178 10.6275C56.4227 11.3087 57.0776 12.1032 57.7447 13.0081C61.2296 17.7354 62.5317 23.7228 61.3252 29.4687C60.1186 35.2146 56.5143 40.1693 51.4251 43.1048L50.0523 43.8966L56.1363 53.0724C66.6528 41.1154 66.68 22.711 55.8631 10.672C55.8579 10.6663 55.8401 10.6459 55.8209 10.6248Z" fill="url(#paint5_linear_1_55)"/>
<path d="M12.6871 27.5893C12.6871 24.6231 14.271 21.8823 16.8423 20.3992C17.1913 20.1978 17.552 20.0263 17.92 19.8796L17.4861 14.4127L14.4372 8.15784C9.15342 10.1007 4.8794 14.1159 2.63056 19.2948C0.938193 23.1921 1.9584e-05 27.4921 0 32.0111C0 35.682 0.605098 39.1477 1.69106 42.354L7.74782 43.1666L12.6871 41.6779V27.5893Z" fill="url(#paint6_linear_1_55)"/>
<path d="M17.9201 19.8796C20.2632 18.9459 22.9304 19.1174 25.1526 20.3992L25.3742 20.527L43.165 30.7888C44.413 31.5086 44.2996 32.217 42.889 32.5119L43.9153 32.2973C45.2658 32.0149 46.4996 31.3248 47.4431 30.3191C49.0653 28.5899 49.6609 26.5036 49.6609 24.6931C49.6609 21.727 48.077 18.9861 45.5057 17.503L31.882 9.64479C26.787 6.70596 20.6787 6.0793 15.0922 7.92227C14.8712 7.99516 14.6549 8.07781 14.4373 8.15783L17.9201 19.8796Z" fill="url(#paint7_linear_1_55)"/>
<path d="M38.6444 63.3048C38.6489 63.3039 38.648 63.2999 38.6436 63.3008C37.7506 63.4835 36.7345 63.653 35.6164 63.7777C29.7762 64.4291 23.935 62.5621 19.5575 58.6452C15.1799 54.7283 12.6871 49.1325 12.6871 43.2615L12.6871 41.6779L1.6911 42.354C6.79779 57.4313 22.7379 66.6571 38.5823 63.3177C38.5899 63.3161 38.6165 63.3108 38.6444 63.3048Z" fill="url(#paint8_linear_1_55)"/>
<defs>
<linearGradient id="paint0_linear_1_55" x1="40.1202" y1="47.5399" x2="46.4152" y2="25.6136" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint1_linear_1_55" x1="54.6189" y1="20.8006" x2="38.0595" y2="4.29961" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint2_linear_1_55" x1="32.3289" y1="10.0423" x2="7.34863" y2="11.6208" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
<linearGradient id="paint3_linear_1_55" x1="30.6395" y1="57.3253" x2="53.0731" y2="51.2718" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint4_linear_1_55" x1="14.5375" y1="31.3654" x2="30.4648" y2="47.8694" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint5_linear_1_55" x1="50.9008" y1="43.2713" x2="62.0138" y2="20.8691" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
<linearGradient id="paint6_linear_1_55" x1="10.7277" y1="18.262" x2="4.78107" y2="40.6131" gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2"/>
<stop offset="1" stop-color="#0092FF"/>
</linearGradient>
<linearGradient id="paint7_linear_1_55" x1="41.0862" y1="17.1988" x2="19.3554" y2="22.6094" gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9"/>
<stop offset="1" stop-color="#1C64F2"/>
</linearGradient>
<linearGradient id="paint8_linear_1_55" x1="12.8135" y1="42.7133" x2="26.6651" y2="63.5493" gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF"/>
<stop offset="1" stop-color="#45B2FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

4
src/lib/images/vendorIcons/nextjsIcon.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C9.35329 14.5 10.6088 14.0871 11.6492 13.3799L6 6.57712V11.25C6 11.6642 5.66421 12 5.25 12C4.83579 12 4.5 11.6642 4.5 11.25V4.5C4.5 4.184 4.69807 3.9019 4.99529 3.79458C5.29251 3.68726 5.62511 3.77775 5.82699 4.02085L13.3008 13.0209C13.5622 13.3357 13.523 13.802 13.2127 14.0687C11.813 15.272 9.99057 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 8.76428 15.8926 9.50473 15.6916 10.2065C15.5936 10.5489 15.4733 10.8818 15.3325 11.2037C15.1665 11.5832 14.7243 11.7562 14.3448 11.5902C13.9653 11.4242 13.7922 10.982 13.9583 10.6025C14.0725 10.3413 14.1701 10.0712 14.2496 9.79351C14.4125 9.2247 14.5 8.6232 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM10.5 3.75C10.9142 3.75 11.25 4.08579 11.25 4.5V7.5C11.25 7.91421 10.9142 8.25 10.5 8.25C10.0858 8.25 9.75 7.91421 9.75 7.5V4.5C9.75 4.08579 10.0858 3.75 10.5 3.75Z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/lib/images/vendorIcons/nextuiIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

5
src/lib/images/vendorIcons/reactIcon.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6789 15.9759C18.6789 14.5415 17.4796 13.3785 16 13.3785C14.5206 13.3785 13.3211 14.5415 13.3211 15.9759C13.3211 17.4105 14.5206 18.5734 16 18.5734C17.4796 18.5734 18.6789 17.4105 18.6789 15.9759Z" fill="#53C1DE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.7004 11.1537C25.2661 8.92478 25.9772 4.79148 23.4704 3.39016C20.9753 1.99495 17.7284 4.66843 16.0139 6.27318C14.3044 4.68442 10.9663 2.02237 8.46163 3.42814C5.96751 4.82803 6.73664 8.8928 7.3149 11.1357C4.98831 11.7764 1 13.1564 1 15.9759C1 18.7874 4.98416 20.2888 7.29698 20.9289C6.71658 23.1842 5.98596 27.1909 8.48327 28.5877C10.9973 29.9932 14.325 27.3945 16.0554 25.7722C17.7809 27.3864 20.9966 30.0021 23.4922 28.6014C25.9956 27.1963 25.3436 23.1184 24.7653 20.8625C27.0073 20.221 31 18.7523 31 15.9759C31 13.1835 26.9903 11.7923 24.7004 11.1537ZM24.4162 19.667C24.0365 18.5016 23.524 17.2623 22.8971 15.9821C23.4955 14.7321 23.9881 13.5088 24.3572 12.3509C26.0359 12.8228 29.7185 13.9013 29.7185 15.9759C29.7185 18.07 26.1846 19.1587 24.4162 19.667ZM22.85 27.526C20.988 28.571 18.2221 26.0696 16.9478 24.8809C17.7932 23.9844 18.638 22.9422 19.4625 21.7849C20.9129 21.6602 22.283 21.4562 23.5256 21.1777C23.9326 22.7734 24.7202 26.4763 22.85 27.526ZM9.12362 27.5111C7.26143 26.47 8.11258 22.8946 8.53957 21.2333C9.76834 21.4969 11.1286 21.6865 12.5824 21.8008C13.4123 22.9332 14.2816 23.9741 15.1576 24.8857C14.0753 25.9008 10.9945 28.557 9.12362 27.5111ZM2.28149 15.9759C2.28149 13.874 5.94207 12.8033 7.65904 12.3326C8.03451 13.5165 8.52695 14.7544 9.12123 16.0062C8.51925 17.2766 8.01977 18.5341 7.64085 19.732C6.00369 19.2776 2.28149 18.0791 2.28149 15.9759ZM9.1037 4.50354C10.9735 3.45416 13.8747 6.00983 15.1159 7.16013C14.2444 8.06754 13.3831 9.1006 12.5603 10.2265C11.1494 10.3533 9.79875 10.5569 8.55709 10.8297C8.09125 9.02071 7.23592 5.55179 9.1037 4.50354ZM20.3793 11.5771C21.3365 11.6942 22.2536 11.85 23.1147 12.0406C22.8562 12.844 22.534 13.6841 22.1545 14.5453C21.6044 13.5333 21.0139 12.5416 20.3793 11.5771ZM16.0143 8.0481C16.6054 8.66897 17.1974 9.3623 17.7798 10.1145C16.5985 10.0603 15.4153 10.0601 14.234 10.1137C14.8169 9.36848 15.414 8.67618 16.0143 8.0481ZM9.8565 14.5444C9.48329 13.6862 9.16398 12.8424 8.90322 12.0275C9.75918 11.8418 10.672 11.69 11.623 11.5748C10.9866 12.5372 10.3971 13.5285 9.8565 14.5444ZM11.6503 20.4657C10.6679 20.3594 9.74126 20.2153 8.88556 20.0347C9.15044 19.2055 9.47678 18.3435 9.85796 17.4668C10.406 18.4933 11.0045 19.4942 11.6503 20.4657ZM16.0498 23.9915C15.4424 23.356 14.8365 22.6531 14.2448 21.8971C15.4328 21.9423 16.6231 21.9424 17.811 21.891C17.2268 22.6608 16.6369 23.3647 16.0498 23.9915ZM22.1667 17.4222C22.5677 18.3084 22.9057 19.1657 23.1742 19.9809C22.3043 20.1734 21.3652 20.3284 20.3757 20.4435C21.015 19.4607 21.6149 18.4536 22.1667 17.4222ZM18.7473 20.5941C16.9301 20.72 15.1016 20.7186 13.2838 20.6044C12.2509 19.1415 11.3314 17.603 10.5377 16.0058C11.3276 14.4119 12.2404 12.8764 13.2684 11.4158C15.0875 11.2825 16.9178 11.2821 18.7369 11.4166C19.7561 12.8771 20.6675 14.4086 21.4757 15.9881C20.6771 17.5812 19.7595 19.1198 18.7473 20.5941ZM22.8303 4.4666C24.7006 5.51254 23.8681 9.22726 23.4595 10.8426C22.2149 10.5641 20.8633 10.3569 19.4483 10.2281C18.6239 9.09004 17.7698 8.05518 16.9124 7.15949C18.1695 5.98441 20.9781 3.43089 22.8303 4.4666Z" fill="#53C1DE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

2
src/lib/images/vendorIcons/svelteIcon.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_svelte</title><path d="M26.47,5.7A8.973,8.973,0,0,0,14.677,3.246L7.96,7.4a7.461,7.461,0,0,0-3.481,5.009,7.686,7.686,0,0,0,.8,5.058,7.358,7.358,0,0,0-1.151,2.8,7.789,7.789,0,0,0,1.4,6.028,8.977,8.977,0,0,0,11.794,2.458L24.04,24.6a7.468,7.468,0,0,0,3.481-5.009,7.673,7.673,0,0,0-.8-5.062,7.348,7.348,0,0,0,1.152-2.8A7.785,7.785,0,0,0,26.47,5.7" style="fill:#ff3e00"/><path d="M14.022,26.64A5.413,5.413,0,0,1,8.3,24.581a4.678,4.678,0,0,1-.848-3.625,4.307,4.307,0,0,1,.159-.61l.127-.375.344.238a8.76,8.76,0,0,0,2.628,1.274l.245.073-.025.237a1.441,1.441,0,0,0,.271.968,1.63,1.63,0,0,0,1.743.636,1.512,1.512,0,0,0,.411-.175l6.7-4.154a1.366,1.366,0,0,0,.633-.909,1.407,1.407,0,0,0-.244-1.091,1.634,1.634,0,0,0-1.726-.622,1.509,1.509,0,0,0-.413.176l-2.572,1.584a4.934,4.934,0,0,1-1.364.582,5.415,5.415,0,0,1-5.727-2.06A4.678,4.678,0,0,1,7.811,13.1,4.507,4.507,0,0,1,9.9,10.09l6.708-4.154a4.932,4.932,0,0,1,1.364-.581A5.413,5.413,0,0,1,23.7,7.414a4.679,4.679,0,0,1,.848,3.625,4.272,4.272,0,0,1-.159.61l-.127.375-.344-.237a8.713,8.713,0,0,0-2.628-1.274l-.245-.074.025-.237a1.438,1.438,0,0,0-.272-.968,1.629,1.629,0,0,0-1.725-.622,1.484,1.484,0,0,0-.411.176l-6.722,4.14a1.353,1.353,0,0,0-.631.908,1.394,1.394,0,0,0,.244,1.092,1.634,1.634,0,0,0,1.726.621,1.538,1.538,0,0,0,.413-.175l2.562-1.585a4.9,4.9,0,0,1,1.364-.581,5.417,5.417,0,0,1,5.728,2.059,4.681,4.681,0,0,1,.843,3.625A4.5,4.5,0,0,1,22.1,21.905l-6.707,4.154a4.9,4.9,0,0,1-1.364.581" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/lib/images/vendorIcons/tailwindIcon.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 3C5.63333 3 4.46667 4 4 5.99999C4.7 4.99999 5.51667 4.625 6.45 4.87499C6.98252 5.01763 7.36314 5.43155 7.78443 5.88974C8.47074 6.63613 9.26506 7.49999 11 7.49999C12.8667 7.49999 14.0333 6.49999 14.5 4.5C13.8 5.49999 12.9833 5.87499 12.05 5.62499C11.5175 5.48235 11.1369 5.06844 10.7156 4.61025C10.0293 3.86386 9.23494 3 7.5 3ZM4 7.49999C2.13333 7.49999 0.966667 8.49998 0.5 10.5C1.2 9.49998 2.01667 9.12498 2.95 9.37498C3.48252 9.51762 3.86314 9.93154 4.28443 10.3897C4.97074 11.1361 5.76506 12 7.5 12C9.36667 12 10.5333 11 11 8.99998C10.3 9.99998 9.48333 10.375 8.55 10.125C8.01748 9.98234 7.63686 9.56843 7.21557 9.11023C6.52926 8.36385 5.73494 7.49999 4 7.49999Z" stroke="#000000" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 991 B

4
src/lib/images/vendorIcons/vercelIcon.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1L24 22H0L12 1Z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

122
src/lib/projects.js Normal file
View File

@ -0,0 +1,122 @@
import svelteIcon from '$lib/images/vendorIcons/svelteIcon.svg';
import tailwindIcon from '$lib/images/vendorIcons/tailwindIcon.svg';
import vercelIcon from '$lib/images/vendorIcons/vercelIcon.svg';
import flowbiteLight from '$lib/images/vendorIcons/flowbiteLight.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';
export const projects = [
{
category: 'svelte',
title: 'Portfolio',
url: 'https://rannes.dev',
description:
'This project was initially to get familiar with Svelte and showcase my future projects. I find myself that I keep coming back to expand on it whenever I need a break from React.',
repo: 'https://gitea.rannes.dev/rannes.dev/my-portfolio',
rss: 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss',
image: '',
vendors: [
{
name: 'Svelte',
img: svelteIcon,
url: 'https://svelte.dev/'
},
{
name: 'Tailwind',
img: tailwindIcon,
url: 'https://tailwindcss.com/'
},
{
name: 'Flowbite',
img: flowbiteLight,
url: 'https://flowbite-svelte.com//'
},
{
name: 'Vercel',
img: vercelIcon,
url: 'https://vercel.com/'
}
]
},
{
category: 'nextjs',
title: 'Scaffolding the next project.',
url: 'https://titles-psi.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',
image: '',
vendors: [
{
name: 'React',
img: reactIcon,
url: 'https://react.dev/'
},
{
name: 'Next.js',
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,
url: 'https://tailwindcss.com/'
},
{
name: 'Drizzle',
img: drizzleIcon,
url: 'https://orm.drizzle.team/'
},
{
name: 'Vercel',
img: vercelIcon,
url: 'https://vercel.com/'
}
]
},
{
category: 'nextjs',
title: 'Local weather',
url: 'https://weather.rannes.dev',
description: 'A simple application to fetch a weekly weather forecast.',
repo: 'https://gitea.rannes.dev/rannes.dev/local-weather',
rss: 'https://gitea.rannes.dev/rannes.dev/local-weather.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: 'Vercel',
img: vercelIcon,
url: 'https://vercel.com/'
}
]
}
];

8
src/routes/+layout.svelte
View File

@ -16,7 +16,7 @@
},
{
name: 'portfolio',
subPages: ['learnings', 'svelte', 'next.js', 'homelab']
subPages: ['svelte', 'next.js', 'homelab']
},
{
name: 'contact',
@ -62,7 +62,7 @@
{/if}
{/each}
</ul>
<hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto bg-black rounded dark:bg-stone-100" />
<hr class="nav-divider max-w-xl border-1 mx-auto rounded border-slate-400" />
{#key selected}
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage}
@ -72,11 +72,11 @@
{/each}
</ul>
{/key}
<div class="absolute top-6 right-6">
<div class="absolute top-2 md:top-6 right-2 md:right-6">
<DarkMode />
</div>
</nav>
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot />
</div>
<footer class="mt-12">

5
src/routes/learnings/+page.svelte
View File

@ -1,5 +0,0 @@
<script>
import { fade } from 'svelte/transition';
</script>
<h1 in:fade>Still learning how to postgres.</h1>

68
src/routes/next.js/+page.svelte
View File

@ -1,70 +1,10 @@
<script>
import { fade } from 'svelte/transition';
import RssFeed from '../../lib/RssFeed.svelte';
import RssContainer from '../../lib/RssContainer.svelte';
const weatherRss = 'https://gitea.rannes.dev/rannes.dev/local-weather.rss';
const titlesRss = 'https://gitea.rannes.dev/rannes.dev/titles.rss';
import Projects from '../../lib/Projects.svelte';
const category = 'nextjs';
</script>
<div in:fade>
<h1 class="text-2xl">Next.js Framework</h1>
<article>
<h2 class="font-normal text-xl my-2 mt-4">Scaffolding for next project.</h2>
<p class="text-left">
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.
</p>
<p class="underline text-left mt-2">Currently I am using:</p>
<ul class="list-disc list-inside text-left my-2">
<li>Next.js</li>
<li>Auth.js</li>
<li>Tailwind CSS</li>
<li>Next-UI</li>
<li>Drizzle ORM</li>
<li>Vercel Postgres</li>
</ul>
<p class="text-left">
<a
class="underline font-normal hover:text-slate-400"
href="https://titles-chrqr-christian-rannes-projects.vercel.app"
>The preview is deployed here</a
>
and
<a class="underline font-normal hover:text-slate-400" href="https://titles-psi.vercel.app/"
>production is deployed here.</a
>
You can check out the
<a
class="underline font-normal hover:text-slate-400"
href="https://gitea.rannes.dev/rannes.dev/titles">git repo here!</a
>
</p>
<RssContainer url={titlesRss} />;
</article>
<article>
<h2 class="font-normal text-xl my-2 mt-4">Weather application</h2>
<p class="text-left">this is a simple application to fetch a weekly weather forecast.</p>
<p class="text-left">
It's built in <span class="font-normal">react/nextjs</span> using
<span class="font-normal">typescript</span>
and <span class="font-normal">Tailwind CSS</span>. It queries
<span class="font-normal">Google Places API</span>
for geo location and then queries <span class="font-normal">open-meteo API</span> for the weather
forecast.
</p>
<p class="text-left">
You can try it out at <a
class="underline font-normal hover:text-slate-400"
href="https://weather.rannes.dev">weather.rannes.dev</a
>
and also have a look at
<a
class="underline font-normal hover:text-slate-400"
href="https://gitea.rannes.dev/rannes.dev/local-weather">the code here.</a
>
</p>
<RssContainer url={weatherRss} />
</article>
<h1 class="text-2xl mb-4">Next.js Projects</h1>
<Projects {category} />
</div>

20
src/routes/svelte/+page.svelte
View File

@ -1,23 +1,11 @@
<script>
import { fade } from 'svelte/transition';
import RssContainer from '../../lib/RssContainer.svelte';
import { Alert } from 'flowbite-svelte';
import Projects from '../../lib/Projects.svelte';
const projectRssUrl = 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss';
const category = 'svelte';
</script>
<div in:fade>
<h1 class="text-2xl">Svelte Portfolio Page</h1>
<p class="text-left">For this project i've used the following:</p>
<p class="text-left">
<a
class="underline font-normal hover:text-slate-400"
href="https://gitea.rannes.dev/rannes.dev/my-portfolio">The git repo is available here.</a
>The gitea workflow builds a docker image and pushes it to the projects registry. It is then
deployed to my infrastructure.
<a class="underline font-normal hover:text-slate-400" href="https://rannes.dev/homelab"
>Read more about that here.</a
>
</p>
<RssContainer url={projectRssUrl} />
<h1 class="text-2xl mb-4">Svelte Projects</h1>
<Projects {category} />
</div>

56
tailwind.config.js
View File

@ -1,29 +1,31 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
plugins: [require('flowbite/plugin')],
darkMode: 'class',
theme: {
extend: {
colors: {
// flowbite-svelte
primary: {
50: '#FFF5F2',
100: '#FFF1EE',
200: '#FFE4DE',
300: '#FFD5CC',
400: '#FFBCAD',
500: '#FE795D',
600: '#EF562F',
700: '#EB4F27',
800: '#CC4522',
900: '#A5371B'
}
},
fontFamily: {
"jose": ["Josefin Sans", "sans-serif"]
}
}
}
}
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
],
plugins: [require('flowbite/plugin')],
darkMode: 'class',
theme: {
extend: {
colors: {
// slate
primary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a'
}
},
fontFamily: {
jose: ['Josefin Sans', 'sans-serif']
}
}
}
};