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

Implemented darkmode

Browse Source
This commit is contained in:
ChrQR 2024-04-23 16:56:43 +02:00
parent d13ac932de
commit 976b1147b3
9 changed files with 1298 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1627
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
src/app.css
View File

@ -1,3 +1,10 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
@apply bg-white dark:bg-black text-black dark:text-white text-center;
}

4
src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" class="">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

48
src/lib/ThemeSwitch.svelte Normal file
View File

@ -0,0 +1,48 @@
<script>
// On click function for darkmode switch
import { browser } from '$app/environment';
let darkMode = true;
function handleSwitchDarkMode() {
darkMode = !darkMode;
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
darkMode
? document.documentElement.classList.add('dark')
: document.documentElement.classList.remove('dark');
}
if (browser) {
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
darkMode = true;
} else {
document.documentElement.classList.remove('dark');
darkMode = false;
}
}
</script>
<div>
<input checked={darkMode} on:click={handleSwitchDarkMode} type="checkbox" id="theme-toggle" />
<label for="theme-toggle" />
</div>
<style>
#theme-toggle {
@apply invisible;
}
#theme-toggle + label {
@apply inline-block cursor-pointer h-8 w-8 absolute top-6 right-24 rounded-full duration-300 content-[''];
}
#theme-toggle:not(:checked) + label {
@apply bg-black;
}
#theme-toggle:checked + label {
@apply bg-transparent;
box-shadow: inset -7px -5px 1px 1px #ddd;
}
</style>

9
src/routes/+layout.svelte
View File

@ -1,6 +1,8 @@
<script> <script>
import { blur, fade } from "svelte/transition"; import { blur, fade } from "svelte/transition";
import "../app.css"; import "../app.css";
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css';
// Navigation links are generated based on this object // Navigation links are generated based on this object
@ -15,16 +17,12 @@
}, },
{ {
name: "portfolio", name: "portfolio",
subPages: ["learnings", "project a", "project b", "project c"], subPages: ["learnings", "portfolio_project"],
}, },
{ {
name: "contact", name: "contact",
subPages: ["get_in_touch", "socials"], subPages: ["get_in_touch", "socials"],
}, },
{
name: "login",
subPages: [],
},
]; ];
let selected = nav[0]; // keep track of the selected 'page' object. let selected = nav[0]; // keep track of the selected 'page' object.
@ -57,6 +55,7 @@
{/each} {/each}
</ul> </ul>
{/key} {/key}
<ThemeSwitch class="absolute "/>
</nav> </nav>
<div class="container text-center md:max-w-md mx-auto sm:max-w-sm "> <div class="container text-center md:max-w-md mx-auto sm:max-w-sm ">
<slot /> <slot />

22
src/routes/about/+page.svelte
View File

@ -1,15 +1,17 @@
<script> <script>
import migImg from "$lib/mig.jpg" import migImg from "$lib/mig.jpg"
import osImg from "$lib/os.jpg" import osImg from "$lib/os.jpg"
import { blur, fade } from "svelte/transition";
</script> </script>
<h1 class="text-xl font-jose mb-4">Life is good in Copenhagen</h1> <div class="page-container" in:fade>
<div class="md:flex mb-4"> <h1 class="text-xl font-jose mb-4">Life is good in Copenhagen</h1>
<p class="mb-4">I live in Copenhagen with my partner and children near the water. We love going on expeditions around the city in our cargo bike, or on my electrical skateboard. <div class="content-container md:flex mb-4 items-center">
When we're not outside I spend a lot of time fiddling around with my homelab, and development projects. You can read more about my projects here, and <p class="">I live in Copenhagen with my partner and children near the water. We love going on expeditions around the city in our cargo bike, or on my electrical skateboard.
</p> When we're not outside I spend a lot of time fiddling around with my homelab, and development projects. You can read more about my projects and homelab under the homelab and portfolio nav.
<p> </p> </p>
<img class="rounded-2xl ml-4 md:w-auto md:h-52 sm:w-full sm:h-auto" src={migImg} alt="crazy man"/> <img class="rounded-2xl ml-4 md:w-auto md:h-52 sm:w-full sm:h-auto" src={migImg} alt="crazy man"/>
</div> </div>
<p class="mb-4">I work in recruitment, and I specialise in building product teams for start ups and scale ups for a small agency called <a href="https://www.adveniopeople.com">Advenio People</a></p> <p class="mb-4">I work in recruitment, and I specialise in building product teams for start ups and scale ups for a small recruitment agency called <a class="underline font-semibold" href="https://www.adveniopeople.com">Advenio People</a></p>
<img src={osImg} alt="A happy man and a beautiful woman both wearing facemasks." class="rounded-full w-1/2 h-auto m-auto"> <img src={osImg} alt="A happy man and a beautiful woman both wearing facemasks." class="rounded-full w-1/2 h-auto m-auto">
</div>

1
src/routes/portfolio_project/+page.svelte Normal file
View File

@ -0,0 +1 @@
<h1>this is the page describing my portfolio project</h1>

11
src/routes/resume/+page.svelte
View File

@ -1,2 +1,9 @@
<h1 class="text-xl">Get ready for my resume baby!</h1> <script>
<p>resumes are getting longer and longer these day, and this one is no exception!</p>
import { fade } from "svelte/transition";
</script>
<div in:fade>
<h1 class="text-xl">Get ready for my resume baby!</h1>
<p>resumes are getting longer and longer these day, and this one is no exception!</p>
</div>

13
tailwind.config.js
View File

@ -2,12 +2,13 @@
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
"jose": ["Josefin Sans", "sans-serif"] "jose": ["Josefin Sans", "sans-serif"]
} }
},
}, },
}, plugins: [],
plugins: [], darkMode: 'class',
} }