Small Bug Fixes

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    devIndicators: false,
+};
 
 export default nextConfig;

src/app/globals.css

@@ -6,6 +6,16 @@ body {
     color: #ffffff;
     margin: 0;
     padding: 0;
+    overflow-x: hidden;
+    overscroll-behavior: none;
+}
+
+html {
+    height: 100%;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #000000, #1a001a);
+    overflow-x: hidden;
+    overscroll-behavior: none; /* Prevents scrolling past the boundaries */
 }
 
 .container {
@@ -29,20 +39,31 @@ body {
 .title.normal {
     opacity: 1;
 }
+
 .title.fadeOut {
     animation: fadeOutAnimation 0.5s forwards;
 }
+
 .title.fadeIn {
     animation: fadeInAnimation 0.5s forwards;
 }
 
 @keyframes fadeOutAnimation {
-  from { opacity: 1; }
+    from {
-  to { opacity: 0; }
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
+
 @keyframes fadeInAnimation {
-  from { opacity: 0; }
+    from {
-  to { opacity: 1; }
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .intro {
@@ -52,7 +73,7 @@ body {
 
 /* Default fade-in section: occupies at least one full viewport */
 .fade-in-section {
-  min-height: 100vh;
+    min-height: 90vh;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,7 +107,9 @@ body {
 /* Button container aligned to the left */
 .buttonLeft {
     display: flex;
-  justify-content: flex-start;
+    justify-content: center; /* Centers the button horizontally */
+    align-items: center; /* Centers vertically */
+    width: 100%; /* Ensures it takes full width */
 }
 
 /* Slightly smaller images */

src/app/page.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import {useState, useEffect} from "react";
 import Image from "next/image";
 import Link from "next/link";
 import FadeInSection from "./components/FadeInSection";
@@ -9,8 +9,6 @@ export default function Home() {
     const [showScrollPrompt, setShowScrollPrompt] = useState(false);
     const [title, setTitle] = useState("Fretux");
     const [phase, setPhase] = useState("normal");
-
-  // Title flicker effect: every 3 seconds, fade out, toggle title, then fade in.
     useEffect(() => {
         const interval = setInterval(() => {
             setPhase("fadeOut");
@@ -24,26 +22,29 @@ export default function Home() {
         }, 3000);
         return () => clearInterval(interval);
     }, []);
-
+    useEffect(() => {
-  // Show scroll prompt after a delay (once the title has loaded in).
+        if (typeof window !== "undefined") {
+            window.scrollTo(0, 0);
+        }
+    }, []);
     useEffect(() => {
         const timer = setTimeout(() => {
             setShowScrollPrompt(true);
-    }, 1500); // Adjust the delay as needed
+        }, 1500);
-    return () => clearTimeout(timer);
-  }, []);
 
-  // Remove the scroll prompt permanently upon first scroll.
-  useEffect(() => {
         const handleScroll = () => {
             setShowScrollPrompt(false);
+            clearTimeout(timer); // Ensures the timeout is cleared if the user scrolls early
             window.removeEventListener("scroll", handleScroll);
         };
 
         window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
 
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
     return (
         <div className="container">
             {showScrollPrompt && (
@@ -51,21 +52,21 @@ export default function Home() {
                     <p>Scroll subtly</p>
                 </div>
             )}
-
             <FadeInSection>
                 <header className="header">
                     <h1 className={`title ${phase}`}>{title}</h1>
                     <p className="intro">
-            Welcome to my portfolio. I’m a web developer passionate about building modern, responsive applications.
+                        Welcome to my portfolio. I’m a web developer passionate about building modern, responsive
+                        applications.
                     </p>
                 </header>
             </FadeInSection>
-
             <FadeInSection>
                 <section className="section">
                     <div className="textLeft">
                         <p>
-              I specialize in creating intuitive user experiences and dynamic web solutions using Next.js, React, and modern design principles.
+                            I specialize in creating intuitive user experiences and dynamic web solutions using Next.js,
+                            React, and modern design principles.
                         </p>
                     </div>
                     <div className="imageRight">
@@ -78,7 +79,6 @@ export default function Home() {
                     </div>
                 </section>
             </FadeInSection>
-
             <FadeInSection>
                 <section className="section">
                     <div className="imageLeft">