Skip to content

Commit e499b5a

Browse files
FunasitienFunasitien
committed
📱 Responsive & Bare Themes
1 parent 760ad22 commit e499b5a

File tree

7 files changed

+140
-50
lines changed

7 files changed

+140
-50
lines changed

‎src/assets/app.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
name: "light";
99
default: true;
1010
--color-primary: oklch(80.9% 0.105 251.813);
11+
--color-secondary: oklch(80.9% 0.105 51.813);
1112
--radius-selector: 2rem;
1213
--radius-field: 1rem;
1314
--radius-box: 1rem;
@@ -18,6 +19,25 @@
1819
--noise: 0;
1920
}
2021

22+
@plugin "daisyui/theme" {
23+
name: "dark";
24+
default: false;
25+
prefersdark: true;
26+
color-scheme: dark;
27+
--color-primary: oklch(80.9% 0.105 251.813);
28+
--color-secondary: oklch(80.9% 0.105 51.813);
29+
--color-neutral-content: oklch(25.33% 0.026 252.42);
30+
--radius-selector: 2rem;
31+
--radius-field: 1rem;
32+
--radius-box: 1rem;
33+
--size-selector: 0.3125rem;
34+
--size-field: 0.3125rem;
35+
--border: 2px;
36+
--depth: 1;
37+
--noise
38+
: 0;
39+
}
40+
2141
:root {
2242
--font-sans: "Plus Jakarta Sans Variable"
2343
}
@@ -29,4 +49,8 @@ h4,
2949
h5,
3050
h6 {
3151
font-family: "JetBrains Mono Variable" !important;
52+
}
53+
54+
strong {
55+
color: var(--color-primary);
3256
}

‎src/components/Dock.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { Icon } from "astro-icon/components";
33
---
44
<div class="w-full fixed left-0 bottom-0 p-2 md:hidden">
5-
<div class="w-full bg-base-100 border-2 border-neutral-content rounded-xl py-2">
6-
<a class="py-2" href="/">
5+
<div class="w-full bg-base-100 border-2 border-neutral-content rounded-xl p-2 grid grid-cols-5 flex justify-between">
6+
<a href="/">
77
<Icon name="gravity-ui:house" class="inline text-3xl mx-8 my-2" />
88
</a>
99
<a>
@@ -12,6 +12,9 @@ import { Icon } from "astro-icon/components";
1212
<a>
1313
<Icon name="gravity-ui:pencil" class="inline text-3xl mx-8 my-2" />
1414
</a>
15+
<a>
16+
<Icon name="gravity-ui:clock-arrow-rotate-left" class="inline text-3xl mx-8 my-2" />
17+
</a>
1518
<a>
1619
<Icon name="gravity-ui:envelope" class="inline text-3xl mx-8 my-2" />
1720
</a>

‎src/components/Navigation.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ const currentPath = Astro.url.pathname;
66
<PageList title="Accueil" icon="gravity-ui:house" href="/" selected={currentPath === "/"} />
77
<PageList title="Projets" icon="gravity-ui:folder-open" href="/projets" selected={currentPath.includes("projets")} />
88
<PageList title="Blog" icon="gravity-ui:pencil" href="/blog" selected={currentPath.includes("blog")} />
9-
<PageList title="Contact" icon="gravity-ui:envelope" href="/contact" selected={currentPath.includes("contact")} />
9+
<PageList title="Wayback Machine" icon="gravity-ui:clock-arrow-rotate-left" href="/wayback" selected={currentPath.includes("wayback")} />
10+
<PageList title="Contact" icon="gravity-ui:envelope" href="/contact" selected={currentPath.includes("contact")} />

‎src/layouts/default.astro‎

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
---
2+
import Head from "./head.astro";
23
import Navigation from "../components/Navigation.astro";
34
import Dock from "../components/Dock.astro";
45
import { Icon } from "astro-icon/components";
56
6-
import { ClientRouter } from "astro:transitions";
7-
8-
import "@fontsource-variable/jetbrains-mono";
9-
import "@fontsource-variable/plus-jakarta-sans";
10-
import "../assets/app.css";
11-
127
const {
138
title = "Funasitien",
149
description = "Funasitien's super dupper website is amazing !",
@@ -56,39 +51,10 @@ try {
5651
<html
5752
lang="fr"
5853
data-theme="light"
59-
class="selection:bg-sky-200 selection:text-sky-700 transition-all duration-500 ease-in-out"
54+
class="md:bg-base-300 selection:bg-sky-200 selection:text-sky-700 transition-colors duration-1000 ease-in-out"
6055
>
6156
<head>
62-
<meta charset="utf-8" />
63-
<meta name="viewport" content="width=device-width" />
64-
<link rel="icon" href="/logo.ico" />
65-
<link rel="icon" type="image/png" href="/logo.png" />
66-
<link rel="sitemap" href="/sitemap-index.xml" />
67-
<link
68-
rel="stylesheet"
69-
href="/font/Minecraft-StandardGalacticAlphabet.css"
70-
/>
71-
<title>Funasitien - {title}</title>
72-
<meta content=`${title} - Funasitien` property="og:title" />
73-
<meta content={description} property="og:description" />
74-
<meta content="https://funa.dev" property="og:url" />
75-
<meta content="https://funa.dev/logo.png" property="og:image" />
76-
<meta content="#43B581" data-react-helmet="true" name="theme-color" />
77-
<script is:inline>
78-
// ☝️ This script prevent the FART effect.
79-
if (localStorage.getItem("theme") === null) {
80-
document.documentElement.setAttribute("data-theme", "superlight");
81-
} else
82-
document.documentElement.setAttribute(
83-
"data-theme",
84-
localStorage.getItem("theme"),
85-
);
86-
</script>
87-
<script>
88-
import { themeChange } from "theme-change";
89-
themeChange();
90-
</script>
91-
<ClientRouter />
57+
<Head title={title} description={description} />
9258
</head>
9359
<body class="bg-base-300 min-h-screen flex flex-col md:py-4">
9460
<div
@@ -100,7 +66,7 @@ try {
10066
<a
10167
class="flex items-center rounded-xl border-2 transition-all duration-300 ease-in-out bg-base-100 border-neutral-content"
10268
>
103-
<div class="relative ml-4">
69+
<div class="relative ml-4 mr-1">
10470
<img
10571
src="https://github.com/Funasitien.png"
10672
alt="Avatar"
@@ -116,9 +82,9 @@ try {
11682
<div aria-label="status" class="status status-neutral status-md absolute z-60 bottom-0.5 right-0.5"></div>
11783
)}
11884
</div>
119-
<div class="p-4">
85+
<div class="p-2">
12086
<h3 class="font-semibold">Funasitien</h3>
121-
<p class="text-xs">{ accname }</p>
87+
<p class="text-xs -translate-y-1">{ accname }</p>
12288
</div>
12389
</a>
12490
</div>
@@ -128,14 +94,41 @@ try {
12894
<slot />
12995
</div>
13096
<div
131-
class="fixed top-0 right-0 w-64 h-full z-50 p-4 pt-4 hidden lg:flex flex-col border-2 border-transparent"
97+
class="fixed top-0 right-0 w-64 h-full z-50 p-4 pt-4 flex flex-col border-2 border-transparent"
13298
>
133-
<div class="flex-1">
99+
<div class="md:flex-1">
134100
</div>
135-
<div class="">
136-
<Icon name="gravity-ui:moon" class="text-2xl"/>
101+
<div class="flex py-2">
102+
<div class="flex-1">
103+
104+
</div>
105+
<label class="swap swap-rotate">
106+
<input type="checkbox" id="theme_switcher"/>
107+
<Icon
108+
name="gravity-ui:sun"
109+
class=" swap-on fill-current text-5xl p-2 max-sm:bg-base-100 max-sm:border-2 border-neutral-content max-sm:rounded-lg"
110+
/>
111+
<Icon
112+
name="gravity-ui:moon"
113+
class="swap-off fill-current text-5xl p-2 max-sm:bg-base-100 max-sm:border-2 border-neutral-content max-sm:rounded-lg"
114+
/>
115+
</label>
116+
137117
</div>
138118
</div>
139119
<Dock />
120+
<script type="module" is:inline data-astro-rerun>
121+
122+
if (localStorage.getItem("theme") === "dark") {
123+
document.getElementById("theme_switcher").checked = true;
124+
}
125+
document
126+
.getElementById("theme_switcher")
127+
?.addEventListener("change", (e) => {
128+
const theme = e.target.checked ? "dark" : "light";
129+
document.documentElement.setAttribute("data-theme", theme);
130+
localStorage.setItem("theme", theme);
131+
});
132+
</script>
140133
</body>
141134
</html>

‎src/layouts/head.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import { ClientRouter } from "astro:transitions";
3+
4+
import "@fontsource-variable/jetbrains-mono";
5+
import "@fontsource-variable/plus-jakarta-sans";
6+
import "../assets/app.css";
7+
8+
const { title, description } = Astro.props;
9+
---
10+
<meta charset="utf-8" />
11+
<meta name="viewport" content="width=device-width" />
12+
<link rel="icon" href="/logo.ico" />
13+
<link rel="icon" type="image/png" href="/logo.png" />
14+
<link rel="sitemap" href="/sitemap-index.xml" />
15+
<link
16+
rel="stylesheet"
17+
href="/font/Minecraft-StandardGalacticAlphabet.css"
18+
/>
19+
<title>Funasitien - {title}</title>
20+
<meta content=`${title} - Funasitien` property="og:title" />
21+
<meta content={description} property="og:description" />
22+
<meta content="https://funa.dev" property="og:url" />
23+
<meta content="https://funa.dev/logo.png" property="og:image" />
24+
<meta content="#43B581" data-react-helmet="true" name="theme-color" />
25+
<script is:inline data-astro-rerun>
26+
// ☝️ This script prevent the FART effect.
27+
if (localStorage.getItem("theme") === null) {
28+
document.documentElement.setAttribute("data-theme", "light");
29+
} else
30+
document.documentElement.setAttribute(
31+
"data-theme",
32+
localStorage.getItem("theme")
33+
);
34+
</script>
35+
<script data-astro-rerun>
36+
import { themeChange } from "theme-change";
37+
themeChange();
38+
</script>
39+
<ClientRouter />

‎src/pages/index.astro‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,31 @@ import { Icon } from "astro-icon/components";
1515
<Icon name="gravity-ui:circle-number-1" class="inline mr-2 text-lg" />
1616
Premier Bouton
1717
</a>
18-
<a href="https://go.funa.dev" class="btn md:w-48">
18+
<a target="_blank" href="https://go.funa.dev" class="btn md:w-48">
1919
<Icon name="gravity-ui:link" class="inline mr-2 text-lg" />
2020
Mes Réseaux
2121
</a>
2222
</div>
2323
</div>
2424
<div class="divider magic text-base-content/20">Here lies a wonderful citation</div>
25-
<div class="mt-8 py-8">
25+
<div class="py-8">
2626
<h1 class="text-4xl font-bold">À Propos de moi</h1>
27-
<p class="text-lg text-base-content/70 mt-2">Bienvenue sur mon site personnel !</p>
27+
<p class="text-lg text-base-content/70 mt-2">
28+
Bonjour ! Moi c'est <strong>Funasitien</strong>, développeur passioné depuis plus de 5 ans.
29+
Après avoir découvert le développement web en 2018, j'ai décidé de me spécialiser dans ce domaine.
30+
Je maitrise plusieurs frameworks et langages, notamment <strong>Astro</strong>, <strong>Javascript</strong>, <strong>React</strong>, <strong>Laravel</strong>, et bien d'autres.
31+
J'ai développé au fils des années une petite fixette sur le design.
32+
C'est pour cette raison que je tente souvent de nouvelles interfaces sur ce protfolio !
33+
</p>
34+
</div>
35+
<div class="divider magic text-base-content/20">This guy is addicted to Minecraft</div>
36+
<div class="py-8">
37+
<h1 class="text-4xl font-bold">Backend</h1>
38+
<p class="text-lg text-base-content/70 mt-2">
39+
Je ne me suis pas limité au design web pour autant ! J'ai développé au fils des années des cométences en tant que développeur backend,
40+
notamment avec les différents plugins que j'ai pu développer pour <a class="link link-secondary">DEMOCRAFT</a> et <a class="link link-secondary">Vaatigames</a>.
41+
Ces projets m'ont permis de me familiariser avec le langage <strong>Java</strong> et le framework <strong>Spigot/Bukkit</strong>, ainsi qu'une ribambelle d'outils d'hébergement, tel que <strong>Docker</strong>, <strong>Kubernetes</strong>, <strong>Pterodactyl</strong> et bien d'autres.
42+
</p>
2843
</div>
2944
</div>
3045
</Layout>

‎src/pages/wayback.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
import Layout from "../layouts/default.astro";
3+
import { Icon } from "astro-icon/components";
4+
---
5+
6+
<Layout title="Projets">
7+
<div class="py-8 md:px-32">
8+
<div class="bg-[url('/banners/classic.png')] h-64 bg-cover bg-center rounded-lg border-2 border-neutral-content p-4" />
9+
</div>
10+
<div class="mt-8 text-center">
11+
<h1 class="text-4xl font-bold">Funasitien - Projets</h1>
12+
<p class="text-lg text-base-content/70 mt-2">Bienvenue sur mon site personnel !</p>
13+
</div>
14+
</div>
15+
</Layout>

0 commit comments

Comments
 (0)