fix(style): fix navbar go to section

The section header should now be displayed when clicking from the navbar

components/about.tsx

@@ -50,14 +50,16 @@ const About: React.FC = () => {
 
           <section className="mb-8 max-w-3xl">
             <h2 className="text-3xl font-semibold mb-4">
-              Current Focus & Learning
+              Current Focus & Interests
             </h2>
             <p className="text-lg">
-              Right now, I'm honing my skills in full-stack development,
-              exploring the latest features of Next.js, and working on projects
-              that blend intuitive UI with solid backend functionality. I'm also
-              excited about diving deeper into areas like database optimization
-              and cloud deployment.
+              Right now, I'm honing my skills in full-stack web development,
+              exploring the features of Next.js 14 and React.js, and working on
+              projects that blend intuitive UI with solid backend functionality.
+              I'm also excited about diving deeper into areas like database
+              optimization and cloud deployment. In my free time, I'm learning
+              the Rust language and exploring the different applications that
+              uses Rust.
             </p>
           </section>
           {/* <div className="grid grid-cols-2 justify-center items-center flex-wrap"> */}

components/background.tsx

@@ -1,6 +1,6 @@
 interface Props {
   children: React.ReactNode;
-  styles: string;
+  styles?: string;
 }
 
 /**

components/project-card.tsx

@@ -13,7 +13,7 @@ const ProjectCard: React.FC<Props> = ({
   title,
 }: Props) => {
   return (
-    <div className="min-h-full max-w-full mx-auto p-6 bg-white shadow-md rounded-lg text-black">
+    <div className="min-h-full max-w-3xl mx-auto p-3 bg-white shadow-md rounded-lg text-black">
       <div className="flex flex-col">
         <div className="flex w-full">
           <img

components/projects.tsx

@@ -3,10 +3,15 @@ import ProjectCard from "./project-card";
 
 const Projects: React.FC = () => {
   return (
-    <main id="projects" className="animate-fadeIn">
-      <Background styles="h-max">
-        <p className="text-5xl items-center text-center text-black">Projects</p>
-        <div className="grid grid-cols-1 xl:grid-cols-2 justify-items-center items-center gap-10 p-8">
+    <main className="animate-fadeIn">
+      <Background>
+        <p
+          id="projects"
+          className="text-5xl items-center text-center text-black scroll-m-14"
+        >
+          Projects
+        </p>
+        <div className="grid grid-cols-1 xl:grid-cols-2 justify-items-center items-center gap-y-10 ">
           <ProjectCard
             link="https://github.com/Aeonoi/studyit"
             description="This web application is a productivity tool to make focusing enjoyable and more rewardable.

components/resume.tsx

@@ -4,8 +4,8 @@ import Background from "./background";
 
 const Resume: React.FC = () => {
   return (
-    <main id="resume" className="animate-fadeIn">
-      <Background styles="h-max w-max">
+    <main id="resume" className="animate-fadeIn ">
+      <Background styles="h-screen scroll-m-14">
         <p className="text-5xl items-center text-center text-black">Resume</p>
         <div className="grid grid-cols-1 lg:grid-cols-2">
           <div className="hidden lg:flex">