Riley1101 · Riley1101 · Oct 5, 2024 · Oct 2, 2024 · Oct 2, 2024 · Oct 5, 2024
diff --git a/app/(studio)/global.css b/app/(studio)/global.css
diff --git a/app/(studio)/layout.tsx b/app/(studio)/layout.tsx
@@ -1,5 +1,5 @@
-import "./global.css";
 import React from "react";
+
 export default function RootLayout({
   children,
 }: {

diff --git a/app/(web)/about/page.tsx b/app/(web)/about/page.tsx
@@ -46,7 +46,7 @@ function AboutPage() {
               src="/images/profile.png"
               alt="My profile"
               className="object-cover float-none md:float-left  w-[200px] rounded-full aspect-square m-8"
-              width={800}
+              width={600}
               height={600}
             />
             <p>

diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx
@@ -1,4 +1,4 @@
-import "./globals.css";
+import "@styles/globals.css";
 import "dracula-prism/dist/css/dracula-prism.min.css";
 import "katex/dist/katex.min.css";
 import GradientMesh from "@/components/common/gradient-mesh";
@@ -7,7 +7,7 @@ import NavAside from "@/components/common/nav-aside";
 import React from "react";
 import type { Metadata } from "next";
 import { AnalyticsWrapper } from "@/components/common/analytics";
-import { Inter } from "next/font/google";
+import { Merriweather } from "next/font/google";
 import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
 import { CSPostHogProvider } from "@/components/providers/PostHogProvider";
 
@@ -59,7 +59,8 @@ export const metadata: Metadata = {
   ),
 };
 
-const inter = Inter({
+const ubuntu = Merriweather({
+  weight: ["300", "400", "700", "900"],
   subsets: ["latin"],
   display: "swap",
 });
@@ -70,11 +71,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={ubuntu.className}>
       <head />
       <CSPostHogProvider>
         <body className="overflow-hidden bg-[#121212]">
-          <div className="w-full overflow-hidden md:px-[10%] lg:pr-[0%] max-h-dvh bg-[#33161600]">
+          <div className="w-full overflow-hidden md:px-[15%] lg:pr-[0%] max-h-dvh bg-[#33161600]">
             <Header />
             <div
               className="row-start-2  md:row-start-1 col-start-2 grid grid-cols-1 

diff --git a/app/(web)/sitemap.ts b/app/(web)/sitemap.ts
@@ -12,23 +12,23 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     {
       url: "https://arkar.space/about",
       lastModified: new Date(),
-      priority: 0.8,
+      priority: 1,
     },
     {
       url: "https://arkar.space/articles",
       lastModified: new Date(),
-      priority: 0.8,
+      priority: 1,
     },
 
     {
       url: "https://arkar.space/snippets",
       lastModified: new Date(),
-      priority: 0.8,
+      priority: 1,
     },
     {
       url: "https://arkar.space/videos",
       lastModified: new Date(),
-      priority: 0.8,
+      priority: 1,
     },
     ...articles.map((article) => ({
       url: `https://arkar.space/articles/${article.slug}`,

diff --git a/components.json b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/(studio)/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/components/common/article-serie-card/index.tsx b/components/common/article-serie-card/index.tsx
@@ -19,6 +19,7 @@ export function ArticleSerieCard({ article }: { article: ArticlCardType }) {
   return (
     <Link
       onClick={navigate}
+      aria-lable={`Learn more about ${article.title}`}
       href={`/articles/${article.slug}`}
       className={cx(
         "p-4 shrink-0 h-[260px] flex flex-col  w-[220px] hover:ml-[-70px] hover:rotate-6 hover:-translate-y-2 first:hover:translate-y-0 first:hover:ml-[100px] hover:translate-x-[-80px] hover:mr-[50px] first:hover:mr-[40px]  first:ml-0 card-glass-box ml-[-100px] origin-center shadow  border gap-4 relative transition-all group  border-theme-accent  duration-200 will-change-transform  rounded-md cursor-pointer  hover:border-theme-accent border-opacity-20 hover:border-opacity-20",

diff --git a/components/common/header/index.tsx b/components/common/header/index.tsx
@@ -12,10 +12,10 @@ const Header = () => {
   return (
     <header
       className="bg-gray-900  bg-clip-padding backdrop-filter 
-    backdrop-blur-lg bg-opacity-[0.15] border-gray-800 justify-between border-b  flex items-center px-4 md:px-[10%]
+    backdrop-blur-lg bg-opacity-[0.15] border-gray-800 justify-between border-b  flex items-center px-4 md:px-[15%]
      absolute top-0 left-0 h-[3.5em] z-[99999] w-full"
     >
-      <Link href="/" className="font-bold text-theme-body">
+      <Link href="/" className="font-bold text-theme-body" aria-label="Logo of Arkar Myat's website">
         Arkar Myat
       </Link>
       <NavModal visible={visible} toggle={toggle} />

diff --git a/components/common/link/index.tsx b/components/common/link/index.tsx
@@ -27,10 +27,11 @@ function NavIconLink({ children, icon, href, target }: Props) {
       onClick={navigate}
       target={target}
       href={href}
+      aria-label={`Go to ${children}`}
       className={cx(
         `text-sm flex cursor-pointer items-center hover:text-theme-accent py-3 hover:bg-theme-primary 
         duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all 
-        border  border-transparent px-4  rounded-full`,
+        border  border-transparent px-4  rounded-theme`,
         {
           "bg-theme-primary/5  border-opacity-5 border-theme-primary text-theme-accent":
             `/${selected}` === href || (selected === null && href === "/"),

diff --git a/components/common/nav-aside/index.tsx b/components/common/nav-aside/index.tsx
@@ -14,7 +14,7 @@ import {
   LinkedIn,
   Mastaodon,
 } from "@/components/common/icons";
-import CommandMenu from "@/components/common/cmdk";
+
 export type Nav = {
   id: number;
   name: string;
@@ -88,10 +88,7 @@ function NavASide() {
         "z-[20] transition-all flex-col pt-0 lg:pt-[8em] col-start-1 gap-4 lg:pointer-events-auto lg:flex",
       )}
     >
-      <div className="hidden lg:block">
-        <CommandMenu />
-      </div>
-      <div className="flex flex-col gap-2 p-4 border rounded-md glass-box border-theme-accent-opaque">
+      <div className="flex flex-col gap-2 p-4 border rounded-md glass-box ">
         <div className="flex flex-col gap-2 ">
           {navs.map((nav) => (
             <NavIconLink key={nav.id} href={nav.href} icon={nav.icon}>

diff --git a/components/common/project-card/index.tsx b/components/common/project-card/index.tsx
@@ -10,6 +10,7 @@ type Props = {
 export function ProjectCard({ data }: Props) {
   return (
     <Link
+      aria-label={`Read more about project on ${data.title}`}
       href={`/projects/${data.slug}`}
       className="border-theme-primary border-opacity-10 transition-all duration-300 relative border hover:border-opacity-[0.2] hover:border-theme-primary group overflow-hidden rounded-lg  cursor-pointer  min-h-[200px]  p-4 flex flex-col justify-between"
     >

diff --git a/components/common/toc/index.tsx b/components/common/toc/index.tsx
@@ -45,6 +45,7 @@ export default function TableOfContents({ value }: Props) {
               <Link
                 href={`#${toUrl([e])}`}
                 className="cursor-pointer"
+                aria-label={`Go to section about ${e}`}
                 onClick={handleScroll}
               >
                 {e}

diff --git a/components/pages/article/card/index.tsx b/components/pages/article/card/index.tsx
@@ -23,6 +23,7 @@ export default function ArticleCard({
   }
   return (
     <Link
+      aria-label={`Read article titled ${title}`}
       onClick={navigate}
       href={`/articles/${slug}`}
       className={cx(

diff --git a/components/pages/article/categories/index.tsx b/components/pages/article/categories/index.tsx
@@ -37,12 +37,12 @@ export function Categories({ categories }: Props) {
 
   if (!categories) return null;
   return (
-    <div className="border p-4 border-theme-accent-opaque glass-box rounded-md sticky top-10 md:top-20">
+    <div className="border p-4 border-theme-accent-opaque glass-box rounded-theme sticky top-10 md:top-20">
       <div className="flex max-h-max py-2 md:py-0 gap-2 md:flex-wrap  overflow-x-auto">
         <button
           onClick={() => handleFilter("All")}
           className={cx(
-            `text-sm flex  cursor-pointer items-center hover:text-theme-accent py-2 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all border  border-transparent px-4  rounded-full`,
+            `text-sm flex  cursor-pointer items-center hover:text-theme-accent py-2 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all border  border-transparent px-4  rounded-theme`,
             {
               "bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary text-theme-accent":
                 params.get("category") === "All" || !params.get("category"),
@@ -57,7 +57,7 @@ export function Categories({ categories }: Props) {
             onClick={() => handleFilter(item.title)}
             key={item._id}
             className={cx(
-              `text-sm min-w-max  cursor-pointer hover:text-theme-accent py-2 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all border  border-transparent px-4  rounded-full`,
+              `text-sm min-w-max  cursor-pointer hover:text-theme-accent py-2 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all border  border-transparent px-4  rounded-theme`,
               {
                 "bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary text-theme-accent":
                   params.get("category") === item.title,

diff --git a/components/pages/home/blog-card/index.tsx b/components/pages/home/blog-card/index.tsx
@@ -31,6 +31,7 @@ export default function HomeBlogCard({
       onMouseLeave={() => {
         blob.current?.classList.add("hidden");
       }}
+      aria-label={`Read article about ${title}`}
       ref={container}
       onMouseMove={handleMouseMove}
       href={`/articles/${slug}`}

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }