feat: homepage initialization, components, css, motion

assets/main.css

@@ -1,107 +1,103 @@
-/* App-wide styling */
+@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+:root {
+    --rosewater: #dc8a78;
+    --flamingo: #dd7878;
+    --pink: #ea76cb;
+    --mauve: #8839ef;
+    --red: #d20f39;
+    --maroon: #e64553;
+    --peach: #fe640b;
+    --yellow: #df8e1d;
+    --green: #40a02b;
+    --teal: #179299;
+    --sky: #04a5e5;
+    --sapphire: #209fb5;
+    --blue: #1e66f5;
+    --lavender: #7287fd;
+    --text: #434f69;
+    --subtext1: #5c5f77;
+    --subtext0: #6c6f85;
+    --overlay2: #7c7f93;
+    --overlay1: #8c8fa1;
+    --overlay0: #9ca0b0;
+    --surface2: #acb0be;
+    --surface1: #bcc0cc;
+    --surface0: #ccd0da;
+    --base: #eff1f5;
+    --mantle: #e6e9ef;
+    --crust: #dce0e8;
+}
+
+::selection {
+    background-color: var(--overlay0);
+}
+
+html,
 body {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
     margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    width: 100%;
+    background-color: var(--base);
+    color: var(--text);
+    font-family: "Schibsted Grotesk", sans-serif;
+    overflow: auto;
+    overflow-anchor: none;
 }
 
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
+a {
+    color: var(--text);
+    transition:
+        0.1s color ease-in-out;
     text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
 }
 
-#links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
+a:hover,
+a:active,
+a:focus {
+    color: var(--subtext0)
 }
 
-#header {
-    max-width: 1200px;
-}
-
-/* Navbar */
 #navbar {
     display: flex;
-    flex-direction: row;
-  }
-  
-#navbar a {
-    color: #ffffff;
-    margin-right: 20px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1em 3em;
+}
+
+.navbar-main {
     text-decoration: none;
-    transition: color 0.2s ease;
+    font-size: 1.6em;
 }
 
-#navbar a:hover {
+.navbar-theme {
+    width: 2em;
+    height: 2em;
+    font-size: 1em;
+    border: 1px solid var(--overlay0);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--yellow)
+}
+
+.navbar-theme:hover,
+.navbar-theme:active,
+.navbar-theme:focus {
     cursor: pointer;
-    color: #91a4d2;
 }
 
-/* Blog page */
-#blog {
-    margin-top: 50px;
-  }
-  
-#blog a {
-    color: #ffffff;
-    margin-top: 50px;
+.navbar-end {
+    display: flex;
+    align-items: center;
+    gap: 1em;
 }
 
-/* Echo */
-#echo {
-    width: 360px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 50px;
-    background-color: #1e222d;
-    padding: 20px;
-    border-radius: 10px;
-}
-
-#echo>h4 {
-    margin: 0px 0px 15px 0px;
-}
-
-
-#echo>input {
-    border: none;
-    border-bottom: 1px white solid;
-    background-color: transparent;
-    color: #ffffff;
-    transition: border-bottom-color 0.2s ease;
-    outline: none;
-    display: block;
-    padding: 0px 0px 5px 0px;
-    width: 100%;
-}
-
-#echo>input:focus {
-    border-bottom-color: #6d85c6;
-}
-
-#echo>p {
-    margin: 20px 0px 0px auto;
+.content-wrapper {
+    margin: 2em 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }

assets/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Mike Czyż",
+  "name": "Michał Czyż's Website",
+  "icons": [
+    {
+      "src": "assets/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "assets/logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "assets/logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#363a4f",
+  "background_color": "#24273a"
+}

assets/mike-czyz-public.gpg

@@ -0,0 +1,109 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+aw==
+=ZqUc
+-----END PGP PUBLIC KEY BLOCK-----