small change

components/Logo.tsx

@@ -0,0 +1,102 @@
+export const Logo = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      id="svg166"
+      version="1.1"
+      className="fill-action group-hover:fill-secondary transition-all ease-in duration-100 flex-no-shrink xl:w-12 xl:h-12 w-8 h-8"
+      viewBox="0 0 100 100"
+    >
+      <g id="167217677994600400">
+        <path
+          id="path119"
+          d="M108.79 15a1 1 0 0 0 .59 1.29c9.72 3.6 15.07 8.12 15.07 12.72a1 1 0 0 0 2 0c0-5.57-5.66-10.62-16.37-14.6a1 1 0 0 0-1.29.59Z"
+        />
+        <path
+          id="path121"
+          d="M120.92 35.51a1 1 0 0 0-1.13 1.65c3.79 2.59 5.71 5.32 5.71 8.09a1 1 0 0 0 2 0c0-3.47-2.21-6.75-6.58-9.74z"
+        />
+        <path
+          id="path123"
+          d="M112.9 48.45a1 1 0 1 0-.75 1.85c8.61 3.49 13.35 7.77 13.35 12.06a1 1 0 1 0 2 0c0-5.23-5.05-10.04-14.6-13.91z"
+        />
+        <path
+          id="path125"
+          d="M125.45 80.52a1 1 0 0 0 1-1c0-6.42-7.62-12.2-21.46-16.28a1 1 0 1 0-.56 1.91c12.72 3.76 20 9 20 14.37a1 1 0 0 0 1.02 1z"
+        />
+        <path
+          id="path127"
+          d="M32.89 98.39h.19a1 1 0 0 0 .37-.08h.08a.83.83 0 0 0 .22-.14l.09-.1a.76.76 0 0 0 .12-.19.84.84 0 0 0 .06-.14v-.12a.27.27 0 0 0 0-.09V62.47c3.92-.71 8.06-1.27 12.35-1.68v11.07a1 1 0 0 0 .22.63l8.2 10.09v10a93.19 93.19 0 0 0-23.09 11.2 101.78 101.78 0 0 0-18.31 15.17 1 1 0 0 0 .72 1.69 1 1 0 0 0 .73-.31 99.86 99.86 0 0 1 18-14.88 88.68 88.68 0 0 1 32-13.37 1.0179 1.0179 0 0 0-.38-2c-2.67.53-5.19 1.16-7.58 1.86v-9.71a1 1 0 0 0-.22-.63l-8.2-10.1V59.64a.83.83 0 0 0 0-.15.74.74 0 0 0 0-.14v-.08a.76.76 0 0 0-.08-.11l-.27-.16a.27.27 0 0 1-.08-.07l-2.93-2 3.27-7.05a.58.58 0 0 0 0-.19.71.71 0 0 0 0-.2V47a16.75 16.75 0 1 1 33.5 0v46.3a1 1 0 1 0 2 0v-3.65c11.28-.13 19.27 2.68 23.73 8.35a20 20 0 0 1 3.87 9.31v11.22H30.38a1 1 0 1 0 0 2h82.15a1 1 0 0 0 1-1v-12.29a.78.78 0 0 0 0-.16 21.86 21.86 0 0 0-4.28-10.32c-4.86-6.18-13.38-9.24-25.3-9.11v-26.5a136.18 136.18 0 0 1 15.95 2.78h.23a1 1 0 0 0 1-.76 1 1 0 0 0-.74-1.21c-1.84-.45-3.78-.85-5.74-1.23V45.44a106.09 106.09 0 0 1 11.71 2.81 1 1 0 0 0 .29 0 1 1 0 0 0 .3-1.95 108 108 0 0 0-12.3-2.94V28.33l1.73.32a80 80 0 0 1 19.57 6.24.93.93 0 0 0 .45.11 1 1 0 0 0 .89-.55 1 1 0 0 0-.44-1.34 81.26 81.26 0 0 0-20.08-6.42l-2.12-.4v-14c2.23.44 4.42.91 6.51 1.45a1.0017 1.0017 0 1 0 .5-1.94 157.17 157.17 0 0 0-38.19-4.33C28.16 7.47.5 16.92.5 29v50.52c0 8.03 12.11 15.08 32.39 18.87zM63.47 9.47a167.36 167.36 0 0 1 29.14 2.41v48.51c-2.79-.49-5.69-.91-8.68-1.25V46.83a18.7502 18.7502 0 0 0-37.5.17v2.14l-3.53 7.63a1 1 0 0 0 .34 1.23l1.38 1c-3.64.38-7.17.88-10.54 1.48V46.77a1.16 1.16 0 0 0 0-.18 1.08 1.08 0 0 0-.08-.19 1.16 1.16 0 0 0-.25-.29l-.19-.11a1.89 1.89 0 0 0-.21-.09h-.09C14.57 42.41 2.5 35.77 2.5 29c0-10.59 27.92-19.53 60.97-19.53Zm-61 25c4.14 5.57 14.55 10.29 29.58 13.2V96.2c-18-3.55-29.58-10-29.58-16.68Z"
+        />
+        <path
+          id="path129"
+          d="M56.59 63.16a1.0098 1.0098 0 0 0 .28 2 1 1 0 0 0 .29 0 8.51 8.51 0 0 0 3.92-2.43c2.29-2.55 3.39-6.87 1.16-9.41a6.25 6.25 0 0 0-4.9-1.82 1 1 0 0 0 0 2 4.36 4.36 0 0 1 3.35 1.14c1.43 1.64.54 4.87-1.15 6.75a6.55 6.55 0 0 1-2.95 1.77z"
+        />
+        <path
+          id="path131"
+          d="M40.93 30a1 1 0 0 0 .75-.33 1 1 0 0 0-.08-1.41L38 25.07a1 1 0 1 0-1.33 1.49l3.55 3.18a1 1 0 0 0 .71.26Z"
+        />
+        <path
+          id="path133"
+          d="M43.86 30.27a1 1 0 1 0-1.33 1.49L45 33.92a1 1 0 0 0 .67.26 1 1 0 0 0 .75-.34 1 1 0 0 0-.08-1.41z"
+        />
+        <path
+          id="path135"
+          d="M16.82 25.61 27 31a1 1 0 0 0 .46.12 1 1 0 0 0 .89-.53 1 1 0 0 0-.42-1.36l-8.13-4.28a98.46 98.46 0 0 1 11.66-3l3.15 2.8a1 1 0 0 0 1.33-1.49l-2-1.79c3.2-.58 6.54-1.07 10-1.45.92-.1 1.87-.18 2.8-.27l1.2 3.83a1 1 0 0 0 .95.7 1 1 0 0 0 .3 0 1 1 0 0 0 .66-1.26l-1.08-3.42c2.37-.2 4.79-.33 7.22-.42l.16 1.81a1 1 0 0 0 1 .91h.09a1 1 0 0 0 .9-1.09L58 19c1.82-.06 3.66-.09 5.5-.09a1 1 0 0 0 0-2c-2.22 0-4.42.05-6.61.13h-.12c-4.44.16-8.81.46-13 .93a115.63 115.63 0 0 0-26.76 5.84 1 1 0 0 0-.65.87 1 1 0 0 0 .46.93z"
+        />
+        <path
+          id="path137"
+          d="M33.79 34.56a1.12 1.12 0 0 0 .47.11 1 1 0 0 0 .88-.53 1 1 0 0 0-.41-1.35l-3.66-1.93a1.002 1.002 0 0 0-.94 1.77z"
+        />
+        <path
+          id="path139"
+          d="m44.28 37.82-6-3.18a1 1 0 1 0-.93 1.77l6 3.18a.92.92 0 0 0 .46.11 1 1 0 0 0 .47-1.88z"
+        />
+        <path
+          id="path141"
+          d="m9 32.13 4.68 2a1.09 1.09 0 0 0 .39.08 1 1 0 0 0 .39-1.92l-4.68-2A1 1 0 0 0 9 32.13Z"
+        />
+        <path
+          id="path143"
+          d="M43.08 44.33 20 34.6a1 1 0 1 0-.77 1.84l23.07 9.74a1 1 0 0 0 .38.08 1 1 0 0 0 .39-1.93z"
+        />
+        <path
+          id="path145"
+          d="M51 26.68a1.001 1.001 0 0 0-1.91.6l.72 2.28a1 1 0 0 0 1 .71 1 1 0 0 0 .3-.05 1 1 0 0 0 .62-1.22z"
+        />
+        <path
+          id="path147"
+          d="M57.32 22.93a1 1 0 0 0-.9 1.09l.28 3.05a1 1 0 0 0 1 .91h.09a1 1 0 0 0 .9-1.09l-.28-3.06a1 1 0 0 0-1.09-.9z"
+        />
+        <path
+          id="path149"
+          d="M82.93 105.09a1 1 0 0 0 1-1l.13-4.31a1.0004 1.0004 0 0 0-2-.06l-.13 4.31a1 1 0 0 0 1 1z"
+        />
+        <path
+          id="path151"
+          d="M25.12 55c0 .07.06.12.09.18l.13.15a1.21 1.21 0 0 0 .32.22 1 1 0 0 0 .39.07 1 1 0 0 0 .7-.29l.13-.15c0-.06.06-.11.09-.18l.06-.18a1.36 1.36 0 0 0 0-.2 1 1 0 0 0-.3-.7.87.87 0 0 0-.32-.22 1 1 0 0 0-.77 0 .87.87 0 0 0-.32.22 1 1 0 0 0-.29.7.68.68 0 0 0 0 .2 1.21 1.21 0 0 0 .09.18z"
+        />
+        <path
+          id="path153"
+          d="M25.66 60.29a1 1 0 0 0 .39.07 1 1 0 1 0-.39-1.92 1 1 0 0 0-.32.21 1 1 0 0 0 0 1.42 1.21 1.21 0 0 0 .32.22z"
+        />
+        <path
+          id="path155"
+          d="M25.66 65.06a1.09 1.09 0 0 0 .39.08 1 1 0 0 0 1-1 1 1 0 0 0-.08-.38.91.91 0 0 0-.22-.33 1 1 0 0 0-1.09-.21 1 1 0 0 0-.32.21 1.06 1.06 0 0 0-.22.33 1 1 0 0 0-.07.38 1 1 0 0 0 .29.71 1 1 0 0 0 .32.21z"
+        />
+        <path
+          id="path157"
+          d="M78.41 53.24a1.51 1.51 0 0 0 .18.09.64.64 0 0 0 .18.06h.2a1 1 0 0 0 .71-.3 1 1 0 0 0 .29-.7 1 1 0 0 0-.29-.71 1.19 1.19 0 0 0-.33-.22 1 1 0 0 0-.58 0h-.18l-.18.1a.79.79 0 0 0-.15.12 1 1 0 0 0-.29.71 1 1 0 0 0 .29.7z"
+        />
+        <path
+          id="path159"
+          d="m78.26 57.89.15.13.18.09.18.06h.2a1 1 0 0 0 .71-.3 1 1 0 0 0 .29-.7 1 1 0 0 0-.29-.71 1.19 1.19 0 0 0-.33-.22 1 1 0 0 0-.58 0h-.18l-.18.09-.15.13a1 1 0 0 0-.29.71 1 1 0 0 0 .29.72z"
+        />
+        <path
+          id="path161"
+          d="M78 62.16a.7.7 0 0 0 .06.19.56.56 0 0 0 .09.17.88.88 0 0 0 .12.15l.15.13.18.09.18.06H79a1 1 0 0 0 .38-.07 1.19 1.19 0 0 0 .33-.22l.12-.15a.56.56 0 0 0 .09-.17.7.7 0 0 0 .06-.19A1.23 1.23 0 0 0 80 62a1 1 0 0 0-.08-.39 1 1 0 0 0-.21-.32 1.19 1.19 0 0 0-.33-.22 1 1 0 0 0-1.09.22 1 1 0 0 0-.21.32.88.88 0 0 0-.08.39 1.23 1.23 0 0 0 0 .16z"
+        />
+      </g>
+    </svg>
+  );
+};

components/Navbar.tsx

@@ -2,11 +2,12 @@ import Link from "next/link";
 import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { Logo } from "./Logo";
 
 const links = [
   { name: "blog", href: "/blog" },
   { name: "projects", href: "/projects" },
-  { name: "github", href: "https://github.com/kookroach" },
+  { name: "github", href: "https://git.peroxy.dev/kookroach" },
 ];
 export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
@@ -16,11 +17,15 @@ export const Navbar = () => {
       <Link
         href="/"
         id="logo"
-        className="flex flex-row gap-2 items-end transition-all ease-in duration-100 text-action hover:text-secondary"
+        className="flex flex-row gap-2 items-center group"
       >
-        <div className="font-bold text-4xl font-mono">peroxy</div>
+        <Logo />
+        <div className="font-bold xl:text-4xl text-xl font-mono transition-all ease-in duration-100 text-action group-hover:text-secondary">
+          peroxy
+          <span className="xl:text-sm text-xs">.dev</span>
+        </div>
       </Link>
-      <div className="hidden lg:flex flex-row gap-10 items-center font-medium font-mono">
+      <div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
         {links.map(({ name, href }) => (
           <Link href={href} key={name}>
             <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
@@ -29,42 +34,42 @@ export const Navbar = () => {
           </Link>
         ))}
       </div>
-      <div className="lg:hidden flex">
+      <div className="xl:hidden flex">
         <button onClick={() => setShowMenu(true)} className="text-2xl">
           <MenuIcon />
         </button>
-        <AnimatePresence>
-          {showMenu && (
-            <>
-              <motion.div
-                className="absolute left-0 top-0 h-screen w-screen bg-black/70 z-10"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-              />
-              <motion.div
-                className={`z-40 absolute w-1/2 bg-blue-900
-                right-0 top-0 px-10 py-6 h-screen`}
-                initial={{ x: 100 }}
-                animate={{ x: 0 }}
-                exit={{ x: 100 }}
-                transition={{ duration: 0.3 }}
-              >
-                <button onClick={() => setShowMenu(false)} className="text-2xl">
-                  <CloseIcon />
-                </button>
-                <div className="flex flex-col gap-10 mt-10 font-bold font-mono">
-                  {links.map(({ name, href }) => (
-                    <Link href={href} key={name}>
-                      <button>{name}</button>
-                    </Link>
-                  ))}
-                </div>
-              </motion.div>
-            </>
-          )}
-        </AnimatePresence>
       </div>
+      <AnimatePresence>
+        {showMenu && (
+          <div className="fixed h-screen w-screen top-0 left-0">
+            <motion.div
+              className="absolute left-0 top-0 h-full w-full bg-black/70 z-10"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            />
+            <motion.div
+              className={`z-40 absolute w-1/2 bg-blue-900
+                right-0 top-0 px-10 py-6 h-full`}
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ ease: "easeInOut", duration: 0.4 }}
+            >
+              <button onClick={() => setShowMenu(false)} className="text-2xl">
+                <CloseIcon />
+              </button>
+              <div className="flex flex-col gap-10 mt-10 font-bold font-mono">
+                {links.map(({ name, href }) => (
+                  <Link href={href} key={name}>
+                    <button>{name}</button>
+                  </Link>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </nav>
   );
 };

content/blogs/first-blog.md

@@ -2,6 +2,7 @@
 title: "My First Blog"
 date: 27.12.2022
 author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
 description: Short description
 ---
 

layouts/MainLayout.tsx

@@ -5,7 +5,7 @@ export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="w-11/12 lg:w-2/3 m-auto overflow-x-hidden">
       <Navbar />
-      <main className="mx-10">{children}</main>
+      <main className="xl:p-10 p-6 xl:mt-10 mt-4">{children}</main>
     </div>
   );
 };

pages/blog/[slug].tsx

@@ -10,8 +10,11 @@ import { MarkdownRenderingResult } from "../../types/types";
 import { MainLayout } from "../../layouts/MainLayout";
 import Link from "next/link";
 import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
+import { BasicBlogProps } from ".";
 
 export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
+  const { title, author, date, description, authorLink } =
+    frontMatter as BasicBlogProps;
   return (
     <MainLayout>
       <Link href="/blog">
@@ -21,12 +24,19 @@ export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
         </button>
       </Link>
       <div className="lg:mt-10 mt-4 mb-2 text-sm font-medium text-gray-500">
-        {frontMatter.date}
+        {date}
       </div>
-      <div className="lg:text-5xl font-bold">{frontMatter.title}</div>
+      <div className="lg:text-5xl font-bold">{title}</div>
       <div className="mt-2 font-medium">
-        By: <span className="text-action">@{frontMatter.author}</span>
+        By{" "}
+        {authorLink && (
+          <Link href={authorLink} className="text-action">
+            @{author}
+          </Link>
+        )}
+        {!authorLink && <span className="text-action">@{author}</span>}
       </div>
+      <div className="mt-2">{description}</div>
       <div
         className="mt-4 prose prose-headings:text-primary-text prose-p:text-gray-400"
         dangerouslySetInnerHTML={{ __html: html }}

pages/blog/index.tsx

@@ -4,11 +4,12 @@ import { BlogPost, getAllFilesFrontMatter } from "../../utils/markdown";
 import { FrontMatter } from "../../types/types";
 import Link from "next/link";
 
-interface BasicBlogProps extends FrontMatter {
+export interface BasicBlogProps extends FrontMatter {
   title: string;
   description: string;
   date: string;
   author: string;
+  authorLink: string;
 }
 
 const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {

pages/index.tsx

@@ -2,8 +2,8 @@ import { MainLayout } from "../layouts/MainLayout";
 export default function Home() {
   return (
     <MainLayout>
-      <div className="grid lg:grid-cols-2 grid-cols-1 mt-4 lg:mt-20 gap-10 items-center">
+      <div className="grid lg:grid-cols-2 grid-cols-1 xl:mt-10 gap-10 items-center">
-        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit lg:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
+        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
           <div>
             <span className="font-bold text-xl text-primary-text">
               Lorem ipsum dolor{" "}