From 41beb7e9754aafdda4157c0a19b860564bbc9f5e Mon Sep 17 00:00:00 2001 From: christian Date: Sun, 19 May 2024 20:25:26 +0200 Subject: [PATCH 1/6] created skeleton for project cards. --- src/lib/{ => ProjectCard}/Commit.svelte | 0 src/lib/ProjectCard/ProjectCard.svelte | 21 ++++++++ src/lib/ProjectCard/ProjectDescription.svelte | 0 src/lib/ProjectCard/ProjectHeader.svelte | 5 ++ src/lib/ProjectCard/ProjectRepo.svelte | 6 +++ src/lib/{ => ProjectCard}/RssContainer.svelte | 2 +- src/lib/{ => ProjectCard}/RssFeed.svelte | 2 +- src/lib/ProjectCard/VendorGallery.svelte | 0 src/lib/Projects.svelte | 11 +++++ src/lib/images/vendorIcons/flowbiteDark.svg | 49 +++++++++++++++++++ src/lib/images/vendorIcons/flowbiteLight.svg | 49 +++++++++++++++++++ src/lib/images/vendorIcons/svelteIcon.svg | 7 +++ src/lib/images/vendorIcons/tailwindIcon.svg | 2 + src/lib/images/vendorIcons/vercelIcon.svg | 8 +++ src/lib/projects.js | 33 +++++++++++++ src/routes/svelte/+page.svelte | 19 ++----- 16 files changed, 196 insertions(+), 18 deletions(-) rename src/lib/{ => ProjectCard}/Commit.svelte (100%) create mode 100644 src/lib/ProjectCard/ProjectCard.svelte create mode 100644 src/lib/ProjectCard/ProjectDescription.svelte create mode 100644 src/lib/ProjectCard/ProjectHeader.svelte create mode 100644 src/lib/ProjectCard/ProjectRepo.svelte rename src/lib/{ => ProjectCard}/RssContainer.svelte (77%) rename src/lib/{ => ProjectCard}/RssFeed.svelte (97%) create mode 100644 src/lib/ProjectCard/VendorGallery.svelte create mode 100644 src/lib/Projects.svelte create mode 100644 src/lib/images/vendorIcons/flowbiteDark.svg create mode 100644 src/lib/images/vendorIcons/flowbiteLight.svg create mode 100644 src/lib/images/vendorIcons/svelteIcon.svg create mode 100644 src/lib/images/vendorIcons/tailwindIcon.svg create mode 100644 src/lib/images/vendorIcons/vercelIcon.svg create mode 100644 src/lib/projects.js diff --git a/src/lib/Commit.svelte b/src/lib/ProjectCard/Commit.svelte similarity index 100% rename from src/lib/Commit.svelte rename to src/lib/ProjectCard/Commit.svelte diff --git a/src/lib/ProjectCard/ProjectCard.svelte b/src/lib/ProjectCard/ProjectCard.svelte new file mode 100644 index 0000000..5d21557 --- /dev/null +++ b/src/lib/ProjectCard/ProjectCard.svelte @@ -0,0 +1,21 @@ + + +
+ + + + +
diff --git a/src/lib/ProjectCard/ProjectDescription.svelte b/src/lib/ProjectCard/ProjectDescription.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/ProjectCard/ProjectHeader.svelte b/src/lib/ProjectCard/ProjectHeader.svelte new file mode 100644 index 0000000..a3fcd19 --- /dev/null +++ b/src/lib/ProjectCard/ProjectHeader.svelte @@ -0,0 +1,5 @@ + + +

{title}

diff --git a/src/lib/ProjectCard/ProjectRepo.svelte b/src/lib/ProjectCard/ProjectRepo.svelte new file mode 100644 index 0000000..849bc2d --- /dev/null +++ b/src/lib/ProjectCard/ProjectRepo.svelte @@ -0,0 +1,6 @@ + + + diff --git a/src/lib/RssContainer.svelte b/src/lib/ProjectCard/RssContainer.svelte similarity index 77% rename from src/lib/RssContainer.svelte rename to src/lib/ProjectCard/RssContainer.svelte index 9eda466..84c28d3 100644 --- a/src/lib/RssContainer.svelte +++ b/src/lib/ProjectCard/RssContainer.svelte @@ -1,5 +1,5 @@ diff --git a/src/lib/RssFeed.svelte b/src/lib/ProjectCard/RssFeed.svelte similarity index 97% rename from src/lib/RssFeed.svelte rename to src/lib/ProjectCard/RssFeed.svelte index 5cb779a..f701b4a 100644 --- a/src/lib/RssFeed.svelte +++ b/src/lib/ProjectCard/RssFeed.svelte @@ -1,6 +1,6 @@ + +{#each projects as project} + {#if project.category === category} + + {/if} +{/each} diff --git a/src/lib/images/vendorIcons/flowbiteDark.svg b/src/lib/images/vendorIcons/flowbiteDark.svg new file mode 100644 index 0000000..3ecdb3e --- /dev/null +++ b/src/lib/images/vendorIcons/flowbiteDark.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/images/vendorIcons/flowbiteLight.svg b/src/lib/images/vendorIcons/flowbiteLight.svg new file mode 100644 index 0000000..3ecdb3e --- /dev/null +++ b/src/lib/images/vendorIcons/flowbiteLight.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/images/vendorIcons/svelteIcon.svg b/src/lib/images/vendorIcons/svelteIcon.svg new file mode 100644 index 0000000..ab91ce8 --- /dev/null +++ b/src/lib/images/vendorIcons/svelteIcon.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/src/lib/images/vendorIcons/tailwindIcon.svg b/src/lib/images/vendorIcons/tailwindIcon.svg new file mode 100644 index 0000000..3e38e2f --- /dev/null +++ b/src/lib/images/vendorIcons/tailwindIcon.svg @@ -0,0 +1,2 @@ + +file_type_tailwind \ No newline at end of file diff --git a/src/lib/images/vendorIcons/vercelIcon.svg b/src/lib/images/vendorIcons/vercelIcon.svg new file mode 100644 index 0000000..af1cc06 --- /dev/null +++ b/src/lib/images/vendorIcons/vercelIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/lib/projects.js b/src/lib/projects.js new file mode 100644 index 0000000..22bcc77 --- /dev/null +++ b/src/lib/projects.js @@ -0,0 +1,33 @@ +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'; + +export const projects = [ + { + category: "svelte", + title: "portfolio", + url: "https://rannes.dev", + description: "A project to get familiar with Svelte and showcase my future projects.", + 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 + }, + { + name: "Tailwind CSS", + img: tailwindIcon + }, + { + name: "Flowbite-svelte", + img: flowbiteLight + }, + { + name: "Vercel", + img: vercelIcon + },] + } +] \ No newline at end of file diff --git a/src/routes/svelte/+page.svelte b/src/routes/svelte/+page.svelte index efa6b28..56e50a9 100644 --- a/src/routes/svelte/+page.svelte +++ b/src/routes/svelte/+page.svelte @@ -1,23 +1,10 @@
-

Svelte Portfolio Page

-

For this project i've used the following:

- -

- The git repo is available here.The gitea workflow builds a docker image and pushes it to the projects registry. It is then - deployed to my infrastructure. - Read more about that here. -

- +
From a49a4d9b5f9774aca745d2064b8384ab5e115cb2 Mon Sep 17 00:00:00 2001 From: ChrQR Date: Sun, 19 May 2024 22:18:25 +0200 Subject: [PATCH 2/6] finished initial iteration of project cards --- package-lock.json | 12 ++++ package.json | 1 + src/app.css | 2 +- src/lib/ProjectCard/Commit.svelte | 1 - src/lib/ProjectCard/ProjectCard.svelte | 4 +- src/lib/ProjectCard/ProjectDescription.svelte | 5 ++ src/lib/ProjectCard/ProjectHeader.svelte | 2 +- src/lib/ProjectCard/ProjectRepo.svelte | 17 ++++++ src/lib/ProjectCard/RssContainer.svelte | 4 +- src/lib/ProjectCard/VendorGallery.svelte | 14 +++++ src/lib/ProjectCard/VendorIcon.svelte | 12 ++++ src/lib/images/vendorIcons/svelteIcon.svg | 7 +-- src/lib/projects.js | 60 ++++++++++--------- src/routes/+layout.svelte | 2 +- src/routes/next.js/+page.svelte | 3 +- 15 files changed, 103 insertions(+), 43 deletions(-) create mode 100644 src/lib/ProjectCard/VendorIcon.svelte diff --git a/package-lock.json b/package-lock.json index 0396564..f8936c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 60c2f7f..46a93d2 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app.css b/src/app.css index 4bae7d2..9366e48 100644 --- a/src/app.css +++ b/src/app.css @@ -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; } diff --git a/src/lib/ProjectCard/Commit.svelte b/src/lib/ProjectCard/Commit.svelte index fd73c23..c065620 100644 --- a/src/lib/ProjectCard/Commit.svelte +++ b/src/lib/ProjectCard/Commit.svelte @@ -1,6 +1,5 @@ + +

{@html description}

diff --git a/src/lib/ProjectCard/ProjectHeader.svelte b/src/lib/ProjectCard/ProjectHeader.svelte index a3fcd19..2adb942 100644 --- a/src/lib/ProjectCard/ProjectHeader.svelte +++ b/src/lib/ProjectCard/ProjectHeader.svelte @@ -2,4 +2,4 @@ export let title; -

{title}

+

{title}

diff --git a/src/lib/ProjectCard/ProjectRepo.svelte b/src/lib/ProjectCard/ProjectRepo.svelte index 849bc2d..8f8af04 100644 --- a/src/lib/ProjectCard/ProjectRepo.svelte +++ b/src/lib/ProjectCard/ProjectRepo.svelte @@ -1,6 +1,23 @@ +
+
+ + + +

www

+
+
+ + + +

git

+
+
diff --git a/src/lib/ProjectCard/RssContainer.svelte b/src/lib/ProjectCard/RssContainer.svelte index 84c28d3..e0d60e4 100644 --- a/src/lib/ProjectCard/RssContainer.svelte +++ b/src/lib/ProjectCard/RssContainer.svelte @@ -1,9 +1,9 @@
-

Here are the 5 most recent commits

+

recent commits

diff --git a/src/lib/ProjectCard/VendorGallery.svelte b/src/lib/ProjectCard/VendorGallery.svelte index e69de29..ef63a75 100644 --- a/src/lib/ProjectCard/VendorGallery.svelte +++ b/src/lib/ProjectCard/VendorGallery.svelte @@ -0,0 +1,14 @@ + + +
+

built with

+
+ {#each vendors as vendor} + + {/each} +
+
diff --git a/src/lib/ProjectCard/VendorIcon.svelte b/src/lib/ProjectCard/VendorIcon.svelte new file mode 100644 index 0000000..4611020 --- /dev/null +++ b/src/lib/ProjectCard/VendorIcon.svelte @@ -0,0 +1,12 @@ + + + +
+ {name} +

{name}

+
+ diff --git a/src/lib/images/vendorIcons/svelteIcon.svg b/src/lib/images/vendorIcons/svelteIcon.svg index ab91ce8..7cee5e1 100644 --- a/src/lib/images/vendorIcons/svelteIcon.svg +++ b/src/lib/images/vendorIcons/svelteIcon.svg @@ -1,7 +1,2 @@ - \ No newline at end of file +file_type_svelte \ No newline at end of file diff --git a/src/lib/projects.js b/src/lib/projects.js index 22bcc77..adfda50 100644 --- a/src/lib/projects.js +++ b/src/lib/projects.js @@ -4,30 +4,36 @@ import vercelIcon from '$lib/images/vendorIcons/vercelIcon.svg'; import flowbiteLight from '$lib/images/vendorIcons/flowbiteLight.svg'; export const projects = [ - { - category: "svelte", - title: "portfolio", - url: "https://rannes.dev", - description: "A project to get familiar with Svelte and showcase my future projects.", - 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 - }, - { - name: "Tailwind CSS", - img: tailwindIcon - }, - { - name: "Flowbite-svelte", - img: flowbiteLight - }, - { - name: "Vercel", - img: vercelIcon - },] - } -] \ No newline at end of file + { + 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/' + } + ] + } +]; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c040d14..411f4b6 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -76,7 +76,7 @@ -
+