diff --git a/assets/css/baseof.css b/assets/css/baseof.css
new file mode 100644
index 0000000..b9f842d
--- /dev/null
+++ b/assets/css/baseof.css
@@ -0,0 +1,31 @@
+@import url("../fonts/OpenSans.ttf");
+@import url("../fonts/OpenSans-Italic.ttf");
+
+:root {
+ /* Colors */
+ --black: #131314;
+ --white: #FFFFFF;
+ --crimson: #BD1839;
+ --light-gray: #E7E7E7;
+
+ /* Background colors */
+ --dark-background: #1D1B1B;
+ --light-background: #FBFBFB;
+
+ /* Radiuses */
+ --card-radius: 30px;
+ --form-radius: 9px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-size: 16px;
+ font-family: 'Open Sans', sans-serif;
+ background-color: var(--background);
+ color: var(--text);
+}
\ No newline at end of file
diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf
new file mode 100644
index 0000000..5bda9cc
Binary files /dev/null and b/assets/fonts/OpenSans-Italic.ttf differ
diff --git a/assets/fonts/OpenSans.ttf b/assets/fonts/OpenSans.ttf
new file mode 100644
index 0000000..e4142bf
Binary files /dev/null and b/assets/fonts/OpenSans.ttf differ
diff --git a/assets/js/baseof.js b/assets/js/baseof.js
new file mode 100644
index 0000000..e26d59a
--- /dev/null
+++ b/assets/js/baseof.js
@@ -0,0 +1,39 @@
+function getInitialTheme() {
+ const persistedColorPreference = window.localStorage.getItem('theme');
+ const hasPersistedPreference = typeof persistedColorPreference === 'string';
+
+ if (hasPersistedPreference) {
+ return persistedColorPreference;
+ }
+
+ const mql = window.matchMedia('(prefers-color-scheme: dark)');
+ const hasMediaQueryPreference = typeof mql.matches === 'boolean';
+
+ if (hasMediaQueryPreference) {
+ return mql.matches ? 'dark' : 'light';
+ }
+
+ return 'light';
+}
+
+function updateTheme(theme) {
+ root.style.setProperty('--theme', theme);
+ root.style.setProperty(
+ '--background',
+ theme === 'light' ? 'var(--light-background)' : 'var(--dark-background)'
+ );
+ root.style.setProperty('--text', theme === 'light' ? 'black' : 'white');
+}
+
+const root = document.documentElement;
+let theme = getInitialTheme();
+
+document.addEventListener('DOMContentLoaded', () => {
+ updateTheme(theme);
+});
+
+document.querySelector('#switch-theme').addEventListener('click', () => {
+ theme = theme === 'light' ? 'dark' : 'light';
+ window.localStorage.setItem('theme', theme);
+ updateTheme(theme);
+});
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..349fc31
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,7 @@
+---
+title: "Hazem Krimi"
+date: 2023-10-18T20:03:43+01:00
+---
+
+# Hazem Krimi
+
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..3d2aff4
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,21 @@
+{{ $styles := resources.Get "css/baseof.css" | toCSS | minify | fingerprint }}
+{{ $scripts := resources.Get "js/baseof.js" | minify | fingerprint }}
+
+
+
+
+
+ {{ block "styles" . }}{{ end }}
+
+ {{ block "title" . }}
+ {{ .Site.Title }}
+ {{ end }}
+
+
+
+
+
+ {{ block "main" . }}{{ end }}
+
+
+
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..42487e8
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,4 @@
+{{ define "main" }}
+ {{ partial "theme-switch.html" . }}
+ {{ .Content }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/theme-switch.html b/layouts/partials/theme-switch.html
new file mode 100644
index 0000000..7cc38aa
--- /dev/null
+++ b/layouts/partials/theme-switch.html
@@ -0,0 +1 @@
+
\ No newline at end of file