finished initial iteration of project cards

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",

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",

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;
 }

src/lib/ProjectCard/Commit.svelte

@@ -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;

src/lib/ProjectCard/ProjectCard.svelte

@@ -15,7 +15,7 @@
 
 <div>
 	<ProjectHeader {title} />
-	<VendorGallery {vendors} />
 	<ProjectDescription {description} />
-	<ProjectRepo {repo} {rss} />
+	<VendorGallery {vendors} />
+	<ProjectRepo {repo} {rss} {url} />
 </div>

src/lib/ProjectCard/ProjectDescription.svelte

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

src/lib/ProjectCard/ProjectHeader.svelte

@@ -2,4 +2,4 @@
 	export let title;
 </script>
 
-<h3 class="text-2xl">{title}</h3>
+<h3 class="text-3xl mb-4">{title}</h3>

src/lib/ProjectCard/ProjectRepo.svelte

@@ -1,6 +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>
+		<a href={url}>
+			<GlobeOutline class="hover:text-slate-400 mx-auto" />
+		</a>
+		<p>www</p>
+	</div>
+	<div>
+		<a href={repo}>
+			<GithubSolid class="hover:text-slate-400 mx-auto" />
+		</a>
+		<p>git</p>
+	</div>
+</div>
 <RssContainer url={rss} />

src/lib/ProjectCard/RssContainer.svelte

@@ -1,9 +1,9 @@
 <script>
-	import RssFeed from '../RssFeed.svelte';
+	import RssFeed from './RssFeed.svelte';
 	export let url;
 </script>
 
 <div>
-	<h2 class="text-xl mt-4 font-normal">Here are the 5 most recent commits</h2>
+	<h2 class="text-xl mt-4">recent commits</h2>
 	<RssFeed {url} />
 </div>

src/lib/ProjectCard/VendorGallery.svelte

@@ -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">
+		{#each vendors as vendor}
+			<VendorIcon {...vendor} />
+		{/each}
+	</div>
+</div>

src/lib/ProjectCard/VendorIcon.svelte

@@ -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">
+		<img src={img} alt={name} class="max-h-12 max-w-12 self-center" />
+		<p>{name}</p>
+	</div>
+</a>

src/lib/images/vendorIcons/svelteIcon.svg

@@ -1,7 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Svelte" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#ffffff"/><path fill="#ff3e00" d="M395 115c-35-51-106-66-157-34l-89 57a103 103 0 00-46 69 108 108 0 0010 69 103 103 0 00-15 39 109 109 0 0019 82c35 51 106 66 157 34l89-57a103 103 0 0046-69 108 108 0 00-10-69 103 103 0 0015-39 109 109 0 00-19-82"/><path fill="#ffffff" d="M230 402a71 71 0 01-77-28 66 66 0 01-11-50 62 62 0 012-8l2-5 5 3a115 115 0 0035 17l3 1v4a20 20 0 003 13 21 21 0 0023 9 20 20 0 006-3l89-57a19 19 0 008-12 20 20 0 00-3-15 21 21 0 00-23-9 20 20 0 00-5 3l-34 21a65 65 0 01-19 8 71 71 0 01-76-28 66 66 0 01-11-50 62 62 0 0128-41l89-57a65 65 0 0118-8 71 71 0 0177 28 66 66 0 0111 50 63 63 0 01-2 8l-2 5-5-3a115 115 0 00-35-17l-3-1v-4a20 20 0 00-3-13 21 21 0 00-23-9 20 20 0 00-6 3l-89 57a19 19 0 00-8 12 20 20 0 003 15 21 21 0 0023 9 20 20 0 005-3l34-21a65 65 0 0119-8 71 71 0 0176 28 66 66 0 0111 50 62 62 0 01-28 41l-89 57a65 65 0 01-18 8"/></svg>
+<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>

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
-            },]
-    }
-]
+	{
+		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/'
+			}
+		]
+	}
+];

src/routes/+layout.svelte

@@ -76,7 +76,7 @@
 		<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">

src/routes/next.js/+page.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { fade } from 'svelte/transition';
-	import RssFeed from '../../lib/RssFeed.svelte';
-	import RssContainer from '../../lib/RssContainer.svelte';
+	import RssContainer from '$lib/ProjectCard/RssContainer.svelte';
 	const weatherRss = 'https://gitea.rannes.dev/rannes.dev/local-weather.rss';
 	const titlesRss = 'https://gitea.rannes.dev/rannes.dev/titles.rss';
 </script>