Optimized images and linting

app/page.tsx

@@ -2,11 +2,10 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
-import MatrixRain from '@/app/components/MatrixRain';
-import { FaInstagram, FaLinkedin, FaDiscord, FaEnvelope, FaCamera, FaVolleyballBall, FaTree, FaCode } from 'react-icons/fa';
+import { FaCamera, FaCode, FaTree, FaVolleyballBall } from 'react-icons/fa';
 import { TbCube3dSphere } from 'react-icons/tb';
+import Image from 'next/image';
 
 export default function Home() {
 
@@ -35,7 +34,7 @@ export default function Home() {
 
         <div className="relative z-10 flex flex-col items-center px-4">
           <div className="bg-[#84c0a0] rounded-full h-45 w-45 md:h-55 md:w-55 flex justify-center items-center shadow-[0_0_50px_rgba(132,192,160,0.3)] animate-[zoomIn_1000ms_ease-out]">
-            <img src="/assets/logos/logo.svg" alt="Logo" className="h-[60%]" />
+            <Image src="/assets/logos/logo.svg" alt="Logo" width={130} height={130} className="w-[60%] h-[60%]" />
           </div>
 
           <h2 className="text-[#84c0a0] font-mono font-bold tracking-[0.3em] uppercase mt-12 text-sm md:text-xl text-center">
@@ -69,9 +68,11 @@ export default function Home() {
 
             {/* Left Column: Profile with "Scanning" Effect */}
             <div className="lg:w-2/5 relative group border-b lg:border-b-0 lg:border-r border-white/10">
-              <img
+              <Image
                 src="/assets/images/profile_picture.jpg"
                 alt="William Söderberg"
+                width={800}
+                height={1000}
                 className="w-full h-full object-cover"
               />
               <div className="absolute inset-0 bg-linear-to-t from-[#0d1117] via-transparent to-transparent opacity-60"></div>
@@ -88,7 +89,7 @@ export default function Home() {
                 <h2 className="text-white text-3xl font-bold uppercase tracking-widest">DATA CARD</h2>
               </div>
               <p className="text-gray-300 text-lg leading-relaxed font-light">
-                My name is William Söderberg and I'm {calculateAge("2002-07-17")} years old. I have a degree in technical high school engineering specialized in design and industrial manufacturing, with heavy influence from IT and coding. I love problem solving and finding new ways to solve the most complicated problems.
+                My name is William Söderberg and I&apos;m {calculateAge("2002-07-17")} years old. I have a degree in technical high school engineering specialized in design and industrial manufacturing, with heavy influence from IT and coding. I love problem solving and finding new ways to solve the most complicated problems.
               </p>
               <div className="mt-10 grid grid-cols-2 gap-6 border-t border-white/10 pt-10">
                 <div>
@@ -108,7 +109,7 @@ export default function Home() {
       {/* 3. WHAT DO I DO SECTION */}
       <section className="relative py-24 px-6 overflow-hidden">
         {/* Subtle Background Image Integration */}
-        <img src="/assets/images/leaves.jpg" alt="Leaves" className="absolute inset-0 w-full h-full object-cover z-0" />
+        <Image src="/assets/images/leaves.jpg" alt="Leaves" fill className="object-cover z-0" />
         <div className="absolute inset-0 bg-[#0d1117]/50 z-0"></div>
 
         <div className="relative z-10 max-w-6xl mx-auto">
@@ -147,7 +148,7 @@ export default function Home() {
 
             {/* My Photos (Ynni Image) */}
             <div className="relative w-full lg:w-1/2">
-              <img src="/assets/images/ynni.jpg" alt="My Photos" className="w-full rounded-4xl shadow-2xl object-cover lg:h-160" />
+              <Image src="/assets/images/ynni.jpg" alt="My Photos" width={800} height={800} className="w-full rounded-4xl shadow-2xl object-cover lg:h-125" />
               <div className="absolute top-[10%] -left-4 lg:-left-12 bg-white/10 backdrop-blur-xl border border-white/20 py-6 px-10 shadow-2xl rounded-2xl">
                 <h2 className="text-[30px] lg:text-[40px] text-white font-black whitespace-nowrap uppercase tracking-wider">My Photos</h2>
               </div>
@@ -155,7 +156,7 @@ export default function Home() {
 
             {/* Night Sky Collection */}
             <div className="flex flex-col items-start w-full lg:w-1/2 lg:pt-8">
-              <img src="/assets/images/night_sky.jpg" alt="Night Sky" className="w-full max-w-125 rounded-3xl shadow-xl border border-white/10" />
+              <Image src="/assets/images/night_sky.jpg" alt="Night Sky" width={600} height={400} className="w-full max-w-125 rounded-3xl shadow-xl border border-gray-200 dark:border-white/10" />
               <h3 className="text-white text-[26px] mt-8 font-bold uppercase tracking-wide">My Photography collection</h3>
               <div className="w-12 h-1 border-t-2 border-[#84c0a0] my-4"></div>
               <p className="text-gray-400 text-[18px] font-light leading-relaxed">
@@ -169,7 +170,7 @@ export default function Home() {
 
           {/* Singapore Full Width wrapper */}
           <div className="w-full mt-32 relative h-125 md:h-175 rounded-[40px] overflow-hidden shadow-2xl border border-white/10 group">
-            <img src="/assets/images/singapore.jpg" alt="Singapore" className="absolute inset-0 w-full h-full object-cover transition-transform duration-2000 group-hover:scale-105" />
+            <Image src="/assets/images/singapore.jpg" alt="Singapore" fill className="object-cover transition-transform duration-1000 group-hover:scale-105" />
             <div className="absolute inset-0 bg-linear-to-t from-[#0d1117]/90 via-[#0d1117]/20 to-transparent"></div>
 
             <div className="relative z-10 w-full h-full p-8 md:p-16 flex items-end md:items-start">
@@ -190,10 +191,11 @@ export default function Home() {
       {/* 5. CONTACT CALL-TO-ACTION (Compact Banner) */}
       <section className="relative py-16 px-6 overflow-hidden border-t border-white/5">
         {/* Immersive Mountain Background */}
-        <img
+        <Image
           src="/assets/images/snowy_mountain_peaks.jpg"
           alt="Snowy Mountains"
-          className="absolute inset-0 w-full h-full object-cover z-0"
+          fill
+          className="object-cover z-0"
         />
 
         {/* Dark overlay */}
@@ -204,7 +206,7 @@ export default function Home() {
 
           <div className="text-center md:text-left">
             <h2 className="text-white text-3xl md:text-4xl font-black uppercase tracking-tighter mb-2">
-              Let's Connect
+              Let&apos;s Connect
             </h2>
             <p className="text-[#84c0a0] font-mono uppercase text-xs md:text-sm tracking-widest font-bold">
               Transmission & Socials