morgane/my-resume
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[+] dark theme

Browse source
This commit is contained in:
Citron 2025-05-25 16:05:43 +02:00
parent af654ff353
commit 07a04f52f4
5 changed files with 78 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -11,7 +11,7 @@
<meta name="description" content="Morgane de Carpentier - Conceptrice Dévelopeuse FullStack sur Strasbourg.">
<title>Morgane de Carpentier</title>
</head>
<body class="text-sm min-h-screen bg-[#caca] print:min-h-0" id="app">
<body class="text-sm min-h-screen bg-[#caca] print:min-h-0 dark:bg-gray-900 dark:text-gray-300 print:text-black print:bg-white print-h-full" id="app">
<script type="module" src="/src/main.ts"></script>
</body>
</html>

73
src/App.vue
View file

@ -1,12 +1,12 @@
<template>
<header
class="print:hidden sticky top-0 z-10 text-center border-b bg-[#caca]"
class="p-1 flex justify-between gap-1 items-center print:hidden sticky top-0 z-10 text-center border-b bg-[#caca] dark:bg-slate-900 border-gray-200 dark:border-gray-600"
:aria-label="t('Menu')"
>
<button
v-if="locale !== 'fr'"
@click="locale = 'fr'"
class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
:aria-pressed="locale === 'fr'"
class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
lang="fr"
>
<img
@ -17,14 +17,13 @@
:alt="t('IMG_ALT.FRENCH_FLAG')"
aria-hidden="true"
/>
<span class="sr-only"> Traduire en </span>
<span> Français </span>
<span> Traduire en français </span>
</button>
<button
v-else
@click="locale = 'en'"
class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
:aria-pressed="locale === 'en'"
class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
lang="en"
>
<img
@ -35,20 +34,31 @@
:alt="t('IMG_ALT.ENGLISH_FLAG')"
aria-hidden="true"
/>
<span class="sr-only"> Translate in </span>
<span> English </span>
<span> Translate in English </span>
</button>
<button
@click="print"
class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white hidden md:inline"
>
<i
class="fa-solid fa-print"
aria-hidden="true"
></i>
{{ t("Imprimer") }}
<button class="bg-transparent mr-2">
<label class="relative inline-block w-9 h-5 cursor-pointer">
<input
v-model="useDarkTheme"
type="checkbox"
class="peer sr-only"
/>
<span
class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-blue-600 dark:bg-neutral-700 dark:peer-checked:bg-slate-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"
></span>
<span
class="absolute top-1/2 start-0.5 -translate-y-1/2 size-4 bg-white rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white flex items-center justify-center"
>
<i
class="fa text-xs text-black"
:class="{
'fa-sun': !useDarkTheme,
'fa-moon': useDarkTheme,
}"
></i>
</span>
</label>
</button>
</header>
@ -80,6 +90,10 @@ import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const rolling = ref(false);
const useDarkTheme = ref(
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches,
);
watch(
() => locale.value,
@ -89,14 +103,29 @@ watch(
{ immediate: true },
);
function print() {
window.print();
}
watch(
() => useDarkTheme.value,
() => {
if (useDarkTheme.value) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
},
{ immediate: true },
);
function doABarrelRoll() {
if (rolling.value) {
return;
}
window.scroll({
top: 0,
left: 0,
behavior: "smooth",
});
rolling.value = true;
const avatar = document.getElementById("avatar")!.classList;
avatar.add("do-a-barrel-roll");

25
src/assets/style.css
View file

@ -1,27 +1,11 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-fira-code: "Fira Code";
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
@layer base {
h1,
h2,
@ -29,7 +13,10 @@
@apply font-fira-code;
}
a {
@apply text-blue-600;
@apply text-blue-600 dark:text-blue-400;
}
button {
@apply cursor-pointer disabled:cursor-default;
}
}

14
src/components/ExperienceInfo.vue
View file

@ -1,9 +1,15 @@
<template>
<li class="grid md:grid-cols-6 md:gap-1 mt-2 md:mt-0">
<div class="md:col-span-1 text-center md:text-left text-slate-600">
<li
class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1 mt-2 md:mt-0 print:mt-0"
>
<div
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
>
{{ date }}
</div>
<div class="md:col-span-5 text-center md:text-left">
<div
class="md:col-span-5 print:col-span-5 text-center md:text-left print:text-left"
>
<span
class="font-bold"
v-if="title"
@ -23,7 +29,7 @@
</ul>
<div
v-if="technos"
class="text-left text-slate-700 font-mono"
class="text-left text-slate-700 print:text-slate-700 dark:text-gray-400 font-mono"
>
<i
class="fab fa-envira text-slate-500 mr-1"

18
src/components/ResumePage.vue
View file

@ -1,10 +1,10 @@
<template>
<main
:aria-label="t('Mon CV')"
class="relative md:h-[297mm] md:w-[210mm] overflow-hidden bg-white shadow-lg print:m-0 print:h-screen! print:w-screen! print:shadow-none grid md:grid-cols-3 print:grid-cols-3 md:grid-rows-[min-content_1fr] print:grid-rows-[min-content_1fr] m-auto"
class="relative md:h-[297mm] md:w-[210mm] overflow-hidden bg-white print:bg-white dark:bg-slate-700 shadow-lg print:m-0 print:min-h-screen! print:min-w-screen! print:shadow-none grid md:grid-cols-3 print:grid-cols-3 md:grid-rows-[min-content_1fr] print:grid-rows-[min-content_1fr] m-auto"
>
<div
class="order-1 md:col-span-1 print:col-span-1 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0 md:bg-slate-100 print:bg-slate-100"
class="order-1 md:col-span-1 print:col-span-1 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0 md:bg-slate-100 print:bg-slate-100 dark:bg-slate-800"
>
<div class="m-[4mm]">
<img
@ -12,7 +12,7 @@
src="/avatar.webp"
height="150"
width="150"
class="rounded-full border-[#caca] border-[1mm] m-auto"
class="rounded-full border-[#caca] print:border-[#caca] dark:border-gray-600 border-[1mm] m-auto"
:alt="t('IMG_ALT.AVATAR')"
/>
</div>
@ -66,7 +66,7 @@
class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
>
<div
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
>
2014-2015
</div>
@ -87,7 +87,7 @@
class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
>
<div
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
>
2013-2014
</div>
@ -101,7 +101,7 @@
class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
>
<div
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
>
2011-2013
</div>
@ -116,7 +116,7 @@
</section>
</div>
<div
class="order-4 md:order-3 print:order-3 md:col-span-1 print:col-span-1 p-[10mm] pr-[8px] bg-slate-100 grid grid-cols-2 md:grid-cols-1 print:grid-cols-1"
class="order-4 md:order-3 print:order-3 md:col-span-1 print:col-span-1 p-[10mm] pr-[8px] bg-slate-100 print:bg-slate-100 dark:bg-slate-800 grid grid-cols-2 md:grid-cols-1 print:grid-cols-1"
>
<section
class="order-4 md:order-1 print:order-1 md:mt-[6px] print:mt-[6px]"
@ -261,7 +261,9 @@
aria-hidden="true"
>
<!-- Display the url links at the bottom of the resume when printed -->
<ul class="bg-white m-[10mm] mb-[8mm] p-[2mm] border rounded-sm">
<ul
class="bg-white/50 m-[4mm] p-[2mm] border border-dashed rounded-sm"
>
<li lang="en">
<sup aria-hidden="true">1</sup>
{{ t("LINKS.KISS") }}