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 components;
@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>
<html lang="en">
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="">
<div style="display: contents">%sveltekit.body%</div>
</body>
</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>
import { blur, fade } from "svelte/transition";
import "../app.css";
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css';
// Navigation links are generated based on this object
@ -15,16 +17,12 @@
},
{
name: "portfolio",
subPages: ["learnings", "project a", "project b", "project c"],
subPages: ["learnings", "portfolio_project"],
},
{
name: "contact",
subPages: ["get_in_touch", "socials"],
},
{
name: "login",
subPages: [],
},
];
let selected = nav[0]; // keep track of the selected 'page' object.
@ -57,6 +55,7 @@
{/each}
</ul>
{/key}
<ThemeSwitch class="absolute "/>
</nav>
<div class="container text-center md:max-w-md mx-auto sm:max-w-sm ">
<slot />

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

@ -1,15 +1,17 @@
<script>
import migImg from "$lib/mig.jpg"
import osImg from "$lib/os.jpg"
import { blur, fade } from "svelte/transition";
</script>
<h1 class="text-xl font-jose mb-4">Life is good in Copenhagen</h1>
<div class="md:flex mb-4">
<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.
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>
<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"/>
</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>
<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 class="page-container" in:fade>
<h1 class="text-xl font-jose mb-4">Life is good in Copenhagen</h1>
<div class="content-container md:flex mb-4 items-center">
<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.
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>
<img class="rounded-2xl ml-4 md:w-auto md:h-52 sm:w-full sm:h-auto" src={migImg} alt="crazy man"/>
</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 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">
</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>
<p>resumes are getting longer and longer these day, and this one is no exception!</p>
<script>
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 {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
fontFamily: {
"jose": ["Josefin Sans", "sans-serif"]
}
extend: {
fontFamily: {
"jose": ["Josefin Sans", "sans-serif"]
}
},
},
},
plugins: [],
plugins: [],
darkMode: 'class',
}