Change gap and margin

app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme-provider";
 
 const jetbrainsMono = JetBrains_Mono({subsets:['latin'],variable:'--font-sans'});
 

app/page.tsx

@@ -3,7 +3,7 @@ import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/comp
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import Link from "next/link";
-import { ExternalLink } from "lucide-react";
+import { ExternalLink, Github } from "lucide-react";
 import { Suspense } from "react";
 import { Wakatime } from "@/components/wakatime";
 import { MyBarChartSkeleton } from "@/components/bar-chart";
@@ -12,7 +12,40 @@ import { WakatimeHint } from "@/components/wakatime-hint";
 export default function Page() {
   return <>
     <H1>alixz.ovh</H1>
+
     <P>Editing and programming are what makes my kokoro go dokidoki :-)</P>
+    <div className="inline-flex gap-4 mt-4">
+      <Link target="_blank" href="https://gitea.alixz.ovh/alixz">
+        <Button variant="outline" className="w-full">alixz <Github /></Button>
+      </Link>
+    </div>
+
+    <H2 className="mt-6">Projects</H2>
+    <Card className="relative mx-auto w-full pt-0 mt-3">
+      <Image
+        src="/uwu2x.jpg"
+        alt="uwu2x cover"
+        className="relative w-full object-cover h-64"
+        width={1920} height={1080}
+      />
+      <CardHeader className="gap-2">
+        <CardTitle>uwu2x</CardTitle>
+        <CardDescription>
+          An After Effects extension that improves the quality and the smoothness of clips, similar to what Topaz and Flowframes do, but in one click !
+          <br />
+          Used by 7000 people every month, and seen +300,000 times on Youtube.
+          <br />
+          <div className="inline-flex gap-4 mt-3">
+            <Link target="_blank" href="https://www.youtube.com/watch?v=lmhZMG4wl-M">
+              <Button variant="outline" className="w-full">Trailer <ExternalLink /></Button>
+            </Link>
+            <Link target="_blank" href="https://uwu2x.alixz.ovh">
+              <Button variant="outline" className="w-full">uwu2x.alixz.ovh <ExternalLink /></Button>
+            </Link>
+          </div>
+        </CardDescription>
+      </CardHeader>
+    </Card>
 
     <H2 className="mt-6">
       Monthly coding stats{" "}
@@ -20,34 +53,8 @@ export default function Page() {
         <WakatimeHint />
       </span>
     </H2>
-    <Suspense fallback={<MyBarChartSkeleton className="mt-3" />}>
+    <Suspense fallback={<MyBarChartSkeleton className="mt-2" />}>
-      <Wakatime className="mt-3" />
+      <Wakatime className="mt-2" />
     </Suspense>
-
-    <H2 className="mt-6">Projects</H2>
-    <Card className="relative mx-auto w-full pt-0 mt-3">
-      <Image
-        src="/uwu2x.jpg"
-        alt="uwu2x cover"
-        className="relative w-full object-cover h-48"
-        width={1920} height={1080}
-      />
-      <CardHeader>
-        <CardTitle>uwu2x</CardTitle>
-        <CardDescription>
-          An After Effects extension that improves the quality and the smoothness of clips, similar to what Topaz and Flowframes do, but in one click !
-          <br />
-          Used by 7000 people every month, and seen +300,000 times on Youtube.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter className="gap-4">
-        <Link target="_blank" href="https://www.youtube.com/watch?v=lmhZMG4wl-M">
-          <Button variant="outline" className="w-full">Trailer <ExternalLink /></Button>
-        </Link>
-        <Link target="_blank" href="https://uwu2x.alixz.ovh">
-          <Button variant="outline" className="w-full">uwu2x.alixz.ovh <ExternalLink /></Button>
-        </Link>
-      </CardFooter>
-    </Card>
   </>;
 }

components/bar-chart.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts"
+import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 import {
   ChartContainer,
   type ChartConfig,
-} from "@/components/ui/chart"
+} from "@/components/ui/chart";
 
 const COLORS = [
   "#4ade80",

components/code-block.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import * as React from "react";
-import CodeEditorPrimitive from '@uiw/react-textarea-code-editor'
+import CodeEditorPrimitive from "@uiw/react-textarea-code-editor";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 function CodeEditor({
   className,

components/theme-provider.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import * as React from "react"
+import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export function ThemeProvider({
-	children,
+  children,
-	...props
+  ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
-	return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

components/typography.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 // https://ui.shadcn.com/docs/components/radix/typography.md
 
@@ -16,7 +16,7 @@ export function H1({ className, children, ...props }: React.HTMLAttributes<HTMLH
 export function H2({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
   return (
     <h2
-      className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0", className)}
+      className={cn("scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0", className)}
       {...props}
     >
       {children}

components/ui/card.tsx

@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-description"
       className={cn("text-muted-foreground text-sm", className)}
-      {...props}
+      {...props}  
     />
   )
 }

components/wakatime-hint.tsx

@@ -12,7 +12,7 @@ export function WakatimeHint() {
           <CircleHelp size={24} />
         </button>
       </HoverCardTrigger>
-      <HoverCardContent className="w-[560px] p-0 mt-2 border-none shadow-none" side="bottom" align="center">
+      <HoverCardContent className="w-[560px] p-0 mb-2 border-none shadow-none" side="top" align="center">
         <CodeEditor
           value={`const response = await fetch(\n  "https://wakatime.com/api/v1/users/alixz/stats/last_30_days"\n);\nconst res = await response.json();\nconst data = res.data.languages.slice(0, 5);`}
           language="ts"