diff --git a/src/lib/ProjectCard/ProjectCard.svelte b/src/lib/ProjectCard/ProjectCard.svelte index 69522b6..62ec92c 100644 --- a/src/lib/ProjectCard/ProjectCard.svelte +++ b/src/lib/ProjectCard/ProjectCard.svelte @@ -13,7 +13,7 @@ export let vendors; -
+
diff --git a/src/lib/ProjectCard/ProjectHeader.svelte b/src/lib/ProjectCard/ProjectHeader.svelte index 2adb942..dd85586 100644 --- a/src/lib/ProjectCard/ProjectHeader.svelte +++ b/src/lib/ProjectCard/ProjectHeader.svelte @@ -2,4 +2,5 @@ export let title; -

{title}

+

{title}

+
diff --git a/src/lib/images/vendorIcons/authjsIcon.webp b/src/lib/images/vendorIcons/authjsIcon.webp new file mode 100644 index 0000000..c4fef5b Binary files /dev/null and b/src/lib/images/vendorIcons/authjsIcon.webp differ diff --git a/src/lib/images/vendorIcons/drizzleIcon.webp b/src/lib/images/vendorIcons/drizzleIcon.webp new file mode 100644 index 0000000..b7904d7 Binary files /dev/null and b/src/lib/images/vendorIcons/drizzleIcon.webp differ diff --git a/src/lib/images/vendorIcons/nextjsIcon.svg b/src/lib/images/vendorIcons/nextjsIcon.svg new file mode 100644 index 0000000..fde6f96 --- /dev/null +++ b/src/lib/images/vendorIcons/nextjsIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/lib/images/vendorIcons/nextuiIcon.png b/src/lib/images/vendorIcons/nextuiIcon.png new file mode 100644 index 0000000..cd5ac1a Binary files /dev/null and b/src/lib/images/vendorIcons/nextuiIcon.png differ diff --git a/src/lib/images/vendorIcons/reactIcon.svg b/src/lib/images/vendorIcons/reactIcon.svg new file mode 100644 index 0000000..d7cb33c --- /dev/null +++ b/src/lib/images/vendorIcons/reactIcon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/lib/images/vendorIcons/tailwindIcon.svg b/src/lib/images/vendorIcons/tailwindIcon.svg index 3e38e2f..caf3793 100644 --- a/src/lib/images/vendorIcons/tailwindIcon.svg +++ b/src/lib/images/vendorIcons/tailwindIcon.svg @@ -1,2 +1,4 @@ -file_type_tailwind \ No newline at end of file + + + \ No newline at end of file diff --git a/src/lib/images/vendorIcons/vercelIcon.svg b/src/lib/images/vendorIcons/vercelIcon.svg index af1cc06..6b77948 100644 --- a/src/lib/images/vendorIcons/vercelIcon.svg +++ b/src/lib/images/vendorIcons/vercelIcon.svg @@ -1,8 +1,4 @@ - - - - - - - + + + \ No newline at end of file diff --git a/src/lib/projects.js b/src/lib/projects.js index adfda50..fa03d2d 100644 --- a/src/lib/projects.js +++ b/src/lib/projects.js @@ -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/' + } + ] } ]; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 411f4b6..920b6a3 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -62,7 +62,7 @@ {/if} {/each} -
+
{#key selected}
    {#each selected.subPages as subPage} diff --git a/src/routes/next.js/+page.svelte b/src/routes/next.js/+page.svelte index c8a9ef1..6562c3e 100644 --- a/src/routes/next.js/+page.svelte +++ b/src/routes/next.js/+page.svelte @@ -1,69 +1,10 @@
    -

    Next.js Framework

    - -
    -

    Scaffolding for next project.

    -

    - 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. -

    -

    Currently I am using:

    -
      -
    • Next.js
      • -
    • Auth.js
      • -
    • Tailwind CSS
      • -
    • Next-UI
      • -
    • Drizzle ORM
      • -
    • Vercel Postgres
      • -
    - -

    - The preview is deployed here - and - production is deployed here. - You can check out the - git repo here! -

    - ; -
    -
    -

    Weather application

    -

    this is a simple application to fetch a weekly weather forecast.

    -

    - It's built in react/nextjs using - typescript - and Tailwind CSS. It queries - Google Places API - for geo location and then queries open-meteo API for the weather - forecast. -

    -

    - You can try it out at weather.rannes.dev - and also have a look at - the code here. -

    - -
    +

    Next.js Projects

    +
    diff --git a/src/routes/svelte/+page.svelte b/src/routes/svelte/+page.svelte index 56e50a9..eb00a3d 100644 --- a/src/routes/svelte/+page.svelte +++ b/src/routes/svelte/+page.svelte @@ -6,5 +6,6 @@
    +

    Svelte Projects

    diff --git a/tailwind.config.js b/tailwind.config.js index d6e70f5..cce55b6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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'] + } + } + } +};