new layout

2023-11-23 22:22:27 -05:00 · 2023-11-23 22:22:27 -05:00 · 3cdce4f403
commit 3cdce4f403
parent f7b0f45592
3 changed files with 92 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -2,17 +2,65 @@
 <html lang="en">

 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Fernando Araoz</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fernando Araoz</title>

-  <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Xanh+Mono:ital@0;1&display=swap"
+        rel="stylesheet">
 </head>

 <body>
-  <h1 class="bg-teal-900 text-teal-50 p-4 rounded-md">
-    Hola mundo :D
-  </h1>
+
+    <div
+        id="scroll-container-element"
+        class="scroll-container h-screen overflow-y-scroll"
+        autofocus
+    >
+
+        <div class="h-screen mx-auto relative">
+
+            <h1 class="font-xanh text-8xl text-center py-12">
+                Fernando
+                <br>
+                Araoz
+            </h1>
+
+            <p class="text-center">
+                fernando@araozu.dev
+            </p>
+
+            <p class="text-center">
+                <a class="underline mx-4" href="https://github.com/Araozu">
+                    Github</a>
+
+                <a class="underline mx-4" href="https://git.araozu.dev/">
+                    Gitea
+                </a>
+            </p>
+
+            <p class="text-center py-4">
+                Front-End, soon to be Back-End developer from Perú 🇵🇪
+            </p>
+
+            <h2 class="font-xanh text-center text-4xl absolute w-full bottom-10">
+                What I've done over the years
+                <br>
+                <br>
+                &darr;
+            </h2>
+
+        </div>
+
+        <div class="bg-slate-800 h-screen">
+            a
+        </div>
+
+    </div>

 </body>

--- a/style.css
+++ b/style.css
@ -1,3 +1,34 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root {
+    --c-bg: #191a1d;
+    --c-on-bg: white;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-bg: white;
+        --c-on-bg: black;
+    }
+}
+
+html {
+    font-size: 20px;
+}
+
+body {
+    background-color: var(--c-bg);
+    color: var(--c-on-bg);
+
+    font-family: 'Fira Mono', monospace;
+}
+
+.scroll-container {
+    scroll-snap-type: y mandatory;
+}
+
+.scroll-container > div {
+    scroll-snap-align: start;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,7 +4,12 @@ export default {
    "./index.html",
  ],
  theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        xanh: ["Xanh Mono", "monospace"],
+        firamono: ["Fira Mono", "monospace"],
+      }
+    },
  },
  plugins: [],
 }