diff --git a/_config.ts b/_config.ts
index 2a88f35..0f4961d 100644
--- a/_config.ts
+++ b/_config.ts
@@ -1,5 +1,20 @@
import lume from "lume/mod.ts";
+import nav from "lume/plugins/nav.ts";
+import codeHighlight from "lume/plugins/code_highlight.ts";
+import googleFonts from "lume/plugins/google_fonts.ts";
const site = lume();
+site.use(nav());
+site.use(codeHighlight());
+
+site.use(googleFonts({
+ cssFile: "/styles/main.css",
+ placeholder: "/* import fonts */",
+ // fonts: "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700",
+ fonts: "https://fonts.google.com/share?selection.family=JetBrains+Mono:ital,wght@0,100..800;1,100..800",
+}));
+
+site.copy("/styles");
+
export default site;
diff --git a/_data.yml b/_data.yml
new file mode 100644
index 0000000..76a8c53
--- /dev/null
+++ b/_data.yml
@@ -0,0 +1,2 @@
+title: rpqt's web corner
+layout: layouts/main.vto
diff --git a/_includes/layouts/main.vto b/_includes/layouts/main.vto
new file mode 100644
index 0000000..af4bc07
--- /dev/null
+++ b/_includes/layouts/main.vto
@@ -0,0 +1,36 @@
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+ {{ content }}
+
+
+
+
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..e3c95d7
--- /dev/null
+++ b/index.md
@@ -0,0 +1,13 @@
+---
+layout: layouts/main.vto
+title: rpqt's web corner
+---
+
+# rpqt's web corner
+
+Hi! I'm Romain, a computer science student at [Ensimag] engineering school.
+
+I'm interested in many aspects of IT so I try to play a little bit with
+everything. I love Rust, Nix, Zig, TS and other cool tech.
+
+[Ensimag]: https://ensimag.grenoble-inp.fr
diff --git a/projects.md b/projects.md
new file mode 100644
index 0000000..c44596b
--- /dev/null
+++ b/projects.md
@@ -0,0 +1,12 @@
+# Projects
+
+## Lila
+
+A simple programming language. It uses [Cranelift] as a compiler backend.
+
+## Myrtle
+
+A note-taking helper similar to [zk].
+
+[Cranelift]: https://cranelift.dev
+[zk]: https://zk-org.github.io/zk
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..07699fd
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,94 @@
+/* import fonts */
+
+:root {
+ --color-foreground: black;
+ --color-foreground-dimmed: color-mix(in srgb, var(--color-foreground), transparent 40%);
+ /* --color-accent: #0692aa; */
+ --max-width: 900px;
+ --font-base-size: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-foreground: white;
+ }
+
+ body {
+ background: #222;
+ }
+}
+
+body {
+ font-family: "JetBrains Mono";
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ min-height: 100svh;
+ max-width: var(--max-width);
+ width: 100%;
+ color: var(--color-foreground);
+ font-size: var(--font-base-size);
+ margin: 0 auto;
+ padding: 0 max(25px, 5vw);
+}
+
+header {
+ padding: 1em 0;
+ width: 100%;
+}
+
+header>nav {
+ width: 100%;
+ display: grid;
+ grid-template-columns: auto 1fr;
+}
+
+.nav-menu {
+ list-style-type: none;
+ display: flex;
+ justify-content: flex-end;
+ gap: 1em;
+}
+
+.nav-menu-item {
+ text-decoration: none;
+ color: var(--color-foreground);
+}
+
+.nav-menu-item:hover {
+ text-decoration: underline;
+}
+
+#site-root {
+}
+
+#header-nav-current {
+ font-weight: bold;
+}
+
+main {
+ margin: 0 auto;
+ width: 100%;
+}
+
+h1, h2, h3 {
+ margin: 0.5em 0;
+}
+
+/*
+h1::before { content: "#"; }
+h2::before { content: "##"; }
+h3::before { content: "###"; }
+
+h1::before, h2::before, h3::before {
+ font-variant-ligatures: none;
+ margin-right: 0.3em;
+}
+*/
+
+footer {
+ width: 100%;
+ text-align: center;
+ padding: 1em;
+ font-size: smaller;
+ color: var(--color-foreground-dimmed);
+}
diff --git a/styles/reset.css b/styles/reset.css
new file mode 100644
index 0000000..ac7a7a3
--- /dev/null
+++ b/styles/reset.css
@@ -0,0 +1,47 @@
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+ margin: 0;
+}
+
+body {
+ /* 3. Add accessible line-height */
+ line-height: 1.5;
+ /* 4. Improve text rendering */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* 5. Improve media defaults */
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input, button, textarea, select {
+ font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+ overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+ text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+ text-wrap: balance;
+}
+
+/*
+ 9. Create a root stacking context
+*/
+#root, #__next {
+ isolation: isolate;
+}