Switched to Next.Js

src/sections/About.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export function About() {
   return (
     <section className="w-full space-y-8">

src/sections/Contact.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export function Contact() {
   return (
     <section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">

src/sections/Footer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useUmami } from "@danielgtmn/umami-react";
 import { Github, Mail, MessageSquare } from "lucide-react";
 

src/sections/Goals.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export function Goals() {
   return (
     <section className="w-full space-y-8">

src/sections/Hero.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export function Hero({
   glowColor,
   borderStatus,
@@ -18,7 +20,7 @@ export function Hero({
   oldUsernames: string[];
 }) {
   return (
-    <section className="flex flex-col items-center text-center space-y-8 animate-fade-in">
+    <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
       <div className="relative group">
         <div
           className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}

src/sections/WorkExperience.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { RealWork } from "../types";
 
 interface WorkExperienceProps {