fix color definitions, add subtitle, better about page

2024-11-22 06:51:05 +01:00 · 2023-07-21 09:31:27 +02:00 · 2023-07-21 09:31:27 +02:00 · 17815a5678
commit 17815a5678
parent e1c350b0e6
11 changed files with 66 additions and 70 deletions
--- a/docs/config.ts
+++ b/docs/config.ts
@ -1,13 +1,15 @@
 export interface Docs {
-  sidebar: SidebarItem[];
+  sidebar: Sidebar[];
 }

 export interface SidebarItem {
-  text: string;
-  items: {
  text: string;
  link: string;
-  }[];
+}
+
+export interface Sidebar {
+  text: string;
+  items: SidebarItem[];
 }

 export const docs: Docs = {
--- a/src/components/widgets/Navbar.astro
+++ b/src/components/widgets/Navbar.astro
@ -30,12 +30,12 @@ const navItems = [
    <a class="text-2xl font-extrabold" href="/">xHyroM</a>
    <nav>
      <ul
-        class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-50 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
+        class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-800 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
      >
        {
          navItems.map((item) => (
            <li class=" transition-all hover:-translate-y-[2px]">
-              <a href={item.link} class="text-neutral-300 hover:text-gold">
+              <a href={item.link} class="text-neutral-300 hover:text-gold-500">
                {item.name}
              </a>
            </li>
--- a/src/components/widgets/docs/LeftSidebar.astro
+++ b/src/components/widgets/docs/LeftSidebar.astro
@ -16,10 +16,10 @@ const getLinkClasses = (link: SidebarItem) => {
  const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4";

  if (isCurrentPage(link)) {
-    return baseClasses + " border-gold text-gold";
+    return baseClasses + " border-gold-500 text-gold-500";
  } else {
    return (
-      baseClasses + " border-transparent text-gray-100 hover:text-gray-200"
+      baseClasses + " border-transparent text-gray-500 hover:text-gray-400"
    );
  }
 };
@ -47,7 +47,7 @@ const getLinkClasses = (link: SidebarItem) => {
        docs.sidebar.map(({ text, items }) => (
          <>
            <li class="mt-4 font-semibold text-white">{text}</li>
-            <ul class="border-l border-dark-300">
+            <ul class="border-l border-dark-500">
              {items.map((item) => (
                <li class={getLinkClasses(item)}>
                  <a href={item.link}>{item.text}</a>
--- a/src/components/widgets/docs/TableOfContents.tsx
+++ b/src/components/widgets/docs/TableOfContents.tsx
@ -90,7 +90,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
  };

  return (
-    <ul ref={toc} className={"border-l border-dark-300"}>
+    <ul ref={toc} className={"border-l border-dark-500"}>
      <li id={onThisPageId} className="mt-4 pl-4 font-semibold text-white">
        On this page
      </li>
@ -99,8 +99,8 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
          <li
            className={`border-l py-1 ${
              currentId === slug
-                ? "border-gold text-gold"
-                : "border-transparent text-gray-100 hover:text-gray-200"
+                ? "border-gold-500 text-gold-500"
+                : "border-transparent text-gray-500 hover:text-gray-400"
            }`}
          >
            <a
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -39,7 +39,7 @@ const { title, description, keywords, schemaOrg } = {
      )
    }
  </head>
-  <body class="overflow-x-hidden bg-dark font-sans">
+  <body class="overflow-x-hidden bg-dark-900 font-sans">
    <slot />

    <script>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -31,7 +31,7 @@ import Layout from "@layouts/Layout.astro";

      <p class="mb-4">
        In the meantime, why not take a look around our <a
-          class="text-gold"
+          class="text-gold-500"
          href="/">homepage</a
        > and see if you can find something else that piques your interest? Who knows,
        you might just stumble upon something even better than what you were originally
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@ -35,17 +35,15 @@ import { SKILLS } from "~/config";
    <main class="text-2xl text-white">
      <section>
        <p class="mb-4">
-          My name is <span class="text-gold">Jozef Steinhübl</span> ("bl" - not "bel",
-          I'm not a bell), but you may know me by my pseudonyms, <span
-            class="text-gold"
+          Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
+          - not "bel", I'm not a bell), alias <span class="text-gold-500"
            >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-gold"
+          work is open-source and on <a
+            class="text-gold-500"
            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-gold" href="/projects"
+          >. You can also check <a class="text-gold-500" href="/projects"
            >Projects</a
          > page on this website.
        </p>
@ -53,17 +51,17 @@ import { SKILLS } from "~/config";
        <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-gold"
+            class="text-gold-500"
            href="https://rajce.pro">rajce.pro</a
-          >, <a class="text-gold" href="https://lendmark.sk">LendMark</a>, <a
-            class="text-gold"
+          >, <a class="text-gold-500" href="https://lendmark.sk">LendMark</a>, <a
+            class="text-gold-500"
            href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
            >Mr. Infinity</a
-          >, <a class="text-gold" href="http://github.com/xHyroM/roles-bot"
+          >, <a class="text-gold-500" 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.
+          > and for different youtubers. 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>

@ -91,8 +89,8 @@ import { SKILLS } from "~/config";
            }
          </ul>

-          I'm still learning with some things like Go and Rust, so I don't have
-          a perfect grasp of them, but I've included them in this list anyway.
+          I'm still learning with some things like Go and Rust, so I don't know
+          them perfectly, but I've included them in this list anyway.
        </div>

        <p class="mb-4">
@ -100,13 +98,13 @@ import { SKILLS } from "~/config";
          and while I do not claim to be a master of any programming language,
          my expertise in various languages is continually evolving. As a
          contributor and moderator for the <a
-            class="text-gold"
+            class="text-gold-500"
            href="https://bun.sh">Bun</a
          > project, I collaborated with my friend <a
-            class="text-gold"
+            class="text-gold-500"
            href="https://github.com/Fire-The-Fox">@FireTheFox</a
          > to develop a native implementation of the <a
-            class="text-gold"
+            class="text-gold-500"
            href="https://github.com/oven-sh/bun/pull/1115">node:os module</a
          >.
        </p>
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@ -52,7 +52,7 @@ const posts = page.data as {
          return (
            <>
              <a
-                class="mb-4 break-all text-2xl font-semibold text-gold text-opacity-80"
+                class="mb-4 break-all text-2xl font-semibold text-gold-500 text-opacity-80"
                href={post.url}
              >
                {post.frontmatter.title}
@ -67,7 +67,7 @@ const posts = page.data as {
              <p class="text-1xl break-all text-white">
                {post.frontmatter.description}
              </p>
-              <hr class="mb-4 mt-4 text-dark-200" />
+              <hr class="mb-4 mt-4 text-dark-600" />
            </>
          );
        })
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -42,8 +42,11 @@ import { SOCIALS } from "../config";
      />
    </div>
    <section class="text-center md:ml-6 md:text-left">
-      <div class="flex drop-shadow-yellow">
+      <div class="flex flex-col drop-shadow-yellow">
        <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
+        <p class="mt-2 text-xl text-gray-400">
+          Software engineer, computer enthusiast
+        </p>
      </div>

      <ul class="my-5 flex justify-center text-white md:justify-start">
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@ -62,7 +62,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
      <section class="flex flex-wrap justify-center gap-12 pb-4">
        {
          PROJECTS.map((project) => (
-            <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-50 p-6 md:w-96">
+            <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-800 p-6 md:w-96">
              <div class="flex">
                <h2 class="mb-4 break-words text-3xl font-bold">
                  {project.name}
@ -114,7 +114,7 @@ PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
      <section class="text-center text-xl">
        <p>
          You can also look at my repositories on <a
-            class="text-gold"
+            class="text-gold-500"
            href="https://github.com/xHyroM">github</a
          >. 👀
        </p>
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -1,44 +1,37 @@
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-    return `rgb(var(${variableName}))`;
-  };
-}
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
-        dark: "#0D0D0D",
-        "dark-50": "#131313",
-        "dark-100": "#1A1A1A",
-        "dark-200": "#242424",
-        "dark-300": "#2E2E2E",
+        dark: "#6A6A6A",
+        "dark-50": "#606060",
+        "dark-100": "#565656",
+        "dark-200": "#4C4C4C",
+        "dark-300": "#424242",
        "dark-400": "#383838",
-        "dark-500": "#424242",
-        "dark-600": "#4C4C4C",
-        "dark-700": "#565656",
-        "dark-800": "#606060",
-        "dark-900": "#6A6A6A",
-        gray: "#808080",
-        "gray-100": "#999999",
-        "gray-200": "#B3B3B3",
+        "dark-500": "#2E2E2E",
+        "dark-600": "#242424",
+        "dark-700": "#1A1A1A",
+        "dark-800": "#131313",
+        "dark-900": "#0D0D0D",
+
+        "gray-100": "#F2F2F2",
+        "gray-200": "#E6E6E6",
        "gray-300": "#CCCCCC",
-        "gray-400": "#E6E6E6",
-        "gray-500": "#F2F2F2",
-        gold: "#fbc119",
-        "gold-100": "#f9b84c",
-        "gold-200": "#f8ad3e",
-        "gold-300": "#f7a22f",
-        "gold-400": "#f69721",
-        "gold-500": "#f58c12",
+        "gray-400": "#B3B3B3",
+        "gray-500": "#999999",
+        gray: "#808080",
+
+        "gold-100": "#f69721",
+        "gold-200": "#f7a22f",
+        "gold-300": "#f8ad3e",
+        "gold-400": "#f9b84c",
+        "gold-500": "#fbc119",
+        gold: "#f58c12",
      },
      dropShadow: {
-        yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
+        yellow: ["0 45px 35px rgba(250, 193, 25, 0.5)"],
        yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
      },
    },