feat(pages): add about page

src/components/widgets/Navbar.astro

@@ -6,6 +6,10 @@ const navItems = [
     name: "Home",
     link: "/",
   },
+  {
+    name: "About",
+    link: "/about",
+  },
   {
     name: "Projects",
     link: "/projects",
@@ -14,10 +18,11 @@ const navItems = [
     name: "Blog",
     link: "/blog",
   },
-  {
+  // Hide for now
+  /*{
     name: "Docs",
     link: "/docs",
-  },
+  },*/
 ];
 ---
 

src/pages/about.astro

@@ -0,0 +1,108 @@
+---
+import Container from "../components/atoms/Container.astro";
+import Navbar from "../components/widgets/Navbar.astro";
+import Layout from "../layouts/Layout.astro";
+
+const skills = [
+  [
+    "TypeScript, JavaScript",
+    "Bun, Node.js, little Deno",
+    "React, Astro, Next.js",
+  ],
+  ["HTML", "TailwindCSS", "CSS"],
+  ["Java", "Kotlin", "Rust (learning now)"],
+  ["SQLite", "MySQL", "MongoDB", "Redis"],
+  [
+    "Git",
+    "GitHub Actions",
+    "GitHub Pages",
+    "Cloudflare Workers",
+    "Cloudflare Pages",
+    "Netlify",
+  ],
+];
+---
+
+<Layout
+  schemaOrg={{
+    "@context": "https://schema.org/",
+    "@type": "Person",
+    name: "xHyroM",
+    url: "https://xhyrom.me",
+    image: "https://xhyrom.me/favicon.ico",
+    sameAs: [
+      "https://twitter.com/hyrousek",
+      "https://instagram.com/hyro.dev",
+      "https://github.com/xHyroM",
+    ],
+    jobTitle: "Developer",
+  }}
+>
+  <Navbar />
+  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
+    About Me
+  </h1>
+
+  <Container>
+    <main class="text-2xl text-white">
+      <section>
+        <p class="mb-4">
+          My name is <span class="text-hyroGold">Jozef Steinhübl</span> ("bl" - not
+          "bel", I'm not a bell), but you may know me by my pseudonyms, <span
+            class="text-hyroGold"
+            >Hyro, xHyroM, or general_kubo
+          </span>. I am a developer with a passion for creating innovative
+          solutions, and I am currently engaged in various projects. Most of my
+          work is open-source and accessible on <a
+            class="text-hyroGold"
+            href="https://github.com/xHyroM">GitHub</a
+          >, where I contribute to the development of cutting-edge software
+          solutions. You can also check <a
+            class="text-hyroGold"
+            href="/projects">Projects</a
+          > page on this website.
+        </p>
+
+        <p class="mb-4">
+          Apart from my open-source projects, I'm working/have also worked on
+          other notable projects such as <a
+            class="text-hyroGold"
+            href="https://rajce.pro">rajce.pro</a
+          >, <a class="text-hyroGold" href="https://lendmark.sk">LendMark</a>, <a
+            class="text-hyroGold"
+            href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
+            >Mr. Infinity</a
+          >, <a class="text-hyroGold" href="http://github.com/xHyroM/roles-bot"
+            >Roles Bot</a
+          > and for different content creators and influencers. My keen interest
+          in the latest technologies motivates me to contribute to diverse projects
+          on Github, where I hone my skills and expand my knowledge base.
+        </p>
+      </section>
+
+      <section>
+        <h1 class="w-full py-10 text-center text-4xl font-extrabold text-white">
+          Skills
+        </h1>
+
+        <p class="mb-4">
+          My skill set spans various programming languages, databases, and
+          frameworks.
+
+          <ul class="list-inside list-disc">
+            {
+              skills.map((skill) => (
+                <>
+                  {skill.map((item) => (
+                    <li>{item}</li>
+                  ))}
+                  <hr class="my-4" />
+                </>
+              ))
+            }
+          </ul>
+        </p>
+      </section>
+    </main>
+  </Container>
+</Layout>