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

project-cards #5

Merged
christian merged 6 commits from project-cards into main 2024-05-19 21:35:50 +00:00
Conversation 0 Commits 6 Files Changed 29 +137 -102
14 changed files with 137 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a9f17c8602 - Show all commits

2
src/lib/ProjectCard/ProjectCard.svelte
View File

@ -13,7 +13,7 @@
export let vendors;
</script>
<div>
<div class="pt-12">
<ProjectHeader {title} />
<ProjectDescription {description} />
<VendorGallery {vendors} />

3
src/lib/ProjectCard/ProjectHeader.svelte
View File

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

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

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

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

@ -1,2 +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 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_tailwind</title><path d="M9,13.7q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q11.1,10.9,9,13.7ZM2,22.1q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q4.1,19.3,2,22.1Z" style="fill:#44a8b3"/></svg>
<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

10
src/lib/images/vendorIcons/vercelIcon.svg
View File

@ -1,8 +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 -198 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M255.420487,28.975665 C235.427278,28.975665 221.011885,42.0147142 221.011885,61.5732881 C221.011885,81.1318619 237.238257,94.1709111 257.231466,94.1709111 C269.310696,94.1709111 279.959253,89.3899264 286.551217,81.3310696 L272.697227,73.3265422 C269.039049,77.3288059 263.479344,79.6649689 257.231466,79.6649689 C248.556876,79.6649689 241.186191,75.1375212 238.451613,67.893605 L289.195246,67.893605 C289.593662,65.8653084 289.829089,63.7645727 289.829089,61.5551783 C289.829089,42.0147142 275.413696,28.975665 255.420487,28.975665 Z M238.288625,55.2348613 C240.552349,48.0090549 246.745897,43.4634975 255.402377,43.4634975 C264.076967,43.4634975 270.270515,48.0090549 272.516129,55.2348613 L238.288625,55.2348613 L238.288625,55.2348613 Z M450.426712,28.975665 C430.433503,28.975665 416.01811,42.0147142 416.01811,61.5732881 C416.01811,81.1318619 432.244482,94.1709111 452.237691,94.1709111 C464.316921,94.1709111 474.965478,89.3899264 481.557442,81.3310696 L467.703452,73.3265422 C464.045274,77.3288059 458.485569,79.6649689 452.237691,79.6649689 C443.563101,79.6649689 436.192417,75.1375212 433.457838,67.893605 L484.201471,67.893605 C484.599887,65.8653084 484.835314,63.7645727 484.835314,61.5551783 C484.835314,42.0147142 470.419921,28.975665 450.426712,28.975665 L450.426712,28.975665 Z M433.31296,55.2348613 C435.576684,48.0090549 441.770232,43.4634975 450.426712,43.4634975 C459.101302,43.4634975 465.29485,48.0090549 467.540464,55.2348613 L433.31296,55.2348613 Z M362.630447,61.5732881 C362.630447,72.4391624 369.729485,79.6830787 380.740238,79.6830787 C388.201471,79.6830787 393.797397,76.2965478 396.676853,70.7730617 L410.585173,78.7956989 C404.826259,88.3938879 394.032824,94.1709111 380.740238,94.1709111 C360.728919,94.1709111 346.331636,81.1318619 346.331636,61.5732881 C346.331636,42.0147142 360.747029,28.975665 380.740238,28.975665 C394.032824,28.975665 404.808149,34.7526882 410.585173,44.3508772 L396.676853,52.3735144 C393.797397,46.8500283 388.201471,43.4634975 380.740238,43.4634975 C369.747595,43.4634975 362.630447,50.7074137 362.630447,61.5732881 Z M512,9.0548953 L512,92.3599321 L495.701188,92.3599321 L495.701188,9.0548953 L512,9.0548953 Z M66.9156763,-1.42108547e-14 L133.831353,115.90266 L0,115.90266 L66.9156763,-1.42108547e-14 Z M234.213922,9.0548953 L184.031692,95.9818902 L133.849462,9.0548953 L152.665535,9.0548953 L184.031692,63.3842671 L215.397849,9.0548953 L234.213922,9.0548953 Z M340.898698,30.786644 L340.898698,48.3350311 C339.087719,47.8098472 337.168081,47.4476514 335.103565,47.4476514 C324.581777,47.4476514 316.993775,54.6915676 316.993775,65.557442 L316.993775,92.3599321 L300.694963,92.3599321 L300.694963,30.786644 L316.993775,30.786644 L316.993775,47.4476514 C316.993775,38.2478778 327.696661,30.786644 340.898698,30.786644 Z" fill="#000000" fill-rule="nonzero">
</path>
</g>
<?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

85
src/lib/projects.js
View File

@ -2,11 +2,16 @@ 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',
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.',
@ -35,5 +40,83 @@ export const projects = [
url: 'https://vercel.com/'
}
]
},
{
category: 'nextjs',
title: 'Scaffolding for 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/'
}
]
}
];

2
src/routes/+layout.svelte
View File

@ -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 border-gray-800 rounded dark: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}

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

@ -1,69 +1,10 @@
<script>
import { fade } from 'svelte/transition';
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';
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>

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

@ -6,5 +6,6 @@
</script>
<div in:fade>
<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']
}
}
}
};