Add prose and update copy and make better navbar

assets/static/js/navbar.js

@@ -0,0 +1,19 @@
+const navbar = document.getElementById('navbar');
+
+const navbarStyles =
+  'fixed z-20 flex flex-col items-center justify-center w-full p-4 bg-transparent md:flex-row';
+const navbarStylesScrolled =
+  'fixed flex flex-col md:flex-row w-full justify-center items-center p-4 z-20 bg-gray-900/80 backdrop-blur-md';
+
+const handleScroll = () => {
+  if (window.scrollY > 10) {
+    navbar.className = navbarStylesScrolled;
+  } else {
+    navbar.className = navbarStyles;
+  }
+};
+
+window.addEventListener('scroll', handleScroll);
+window.addEventListener('load', () => {
+  navbar.className = navbarStyles;
+});

assets/views/website/about.html

@@ -15,13 +15,19 @@
 </div>
 <h1 class="mt-6 text-3xl font-extrabold">More info about me! 💡</h1>
 <div
-  class="flex flex-col items-center m-4 prose text-justify text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl"
+  class="flex flex-col m-4 prose text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl prose-blue"
 >
   <p>
     Hi! I am Gabriel and I am {{ age }} years old. I study Bioinformatics at the
     University of Gdansk 🏫. I'm fluent in Polish and English and currently work
     as a Python Developer at digimonkeys.com 🐒💻.
   </p>
+  <p>
+    I have published one article you can read it
+    <a target="_blank" href="http://dx.doi.org/10.1038/s41598-023-44488-7">
+      here
+    </a>.
+  </p>
 </div>
 <h1 class="mt-6 text-3xl font-extrabold">Hobbies 🎮🎸</h1>
 <div
@@ -39,7 +45,7 @@
   🏅") }} {{ chip::chip(text="History 🏰")}}
 </div>
 <h1 class="mt-6 text-3xl font-bold">FAQ ❓</h1>
-<div class="flex flex-col gap-2 m-4">
+<div id="faq" class="flex flex-col gap-2 m-4">
   <div>
     <h6 class="text-xl font-bold">
       How old were you when you started programming?

assets/views/website/components/navbar.html

@@ -1,3 +1,4 @@
+<script src="/static/js/navbar.js" defer></script>
 <nav
   class="fixed z-20 flex flex-col items-center justify-center w-full p-4 bg-transparent md:flex-row"
   id="navbar"

tailwind.config.js

@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./assets/**/*.html', './assets/**/*.js'],
+  content: [
+    './assets/**/*.html',
+    './assets/**/*.js',
+    './assets/static/js/*.js',
+  ],
   theme: {
     extend: {},
   },