linter problem fixed

components/PasswordGenerator.js

@@ -107,9 +107,8 @@ class PasswordGenerator extends React.Component {
         <div className="passwordInputDiv">
           <input
             className="password-input"
-            type="text"
-            id="password"
             type="password"
+            id="password"
             name="password"
             onChange={this.setPassword}
           />

components/SidebarComp.js

@@ -14,20 +14,20 @@ class SidebarComp extends React.Component {
                     onClick={() => {
                         let element = document.getElementById("header-buttons")
                         let sidebaricon = document.getElementById("sidebariconid")
-                        if (this.state.openStatues === false) {
+                        if (!this.state.openStatues) {
                             element.style.opacity = 1;
                             element.style.transform = "translate(0)";
 
                             sidebaricon.classList.add("fa-times")
                             sidebaricon.classList.remove("fa-bars")
-                            this.state.openStatues = true
-                        } else if (this.state.openStatues === true) {
+                            this.setState({ openStatues: true })
+                        } else {
                             element.style.transform = "translate(100%)";
                             element.style.opacity = 0;
 
                             sidebaricon.classList.add("fa-bars")
                             sidebaricon.classList.remove("fa-times")
-                            this.state.openStatues = false
+                            this.setState({ openStatues: false })
                         }
                     }}>
                     <i id="sidebariconid" className="fas fa-bars"></i>

components/ThingsCardComp.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import Link from 'next/link'
+import Image from 'next/image'
 
 function ThingsCard({ text, imageSource, path = '' }) {
     // export default function ThingsCard({ text, path = "/" }) {
     return (
         <div className="thingsCard">
             <a href={path}>{text}</a>
-            <img src={imageSource} alt="PHOTO" />
+            <Image 
+                src={`${imageSource}`}
+                alt={text}
+                width={500}
+                height={300}
+                loading="lazy"
+                style={{ objectFit: 'cover' }}
+            />
         </div>
     )
 }

components/ThingsComp.js

@@ -23,12 +23,12 @@ export const projects = {
     },
     {
       title: "Calculate Average",
-      image: "img/calculateaverage.PNG",
+      image: "https://raw.githubusercontent.com/mustafaberat/calculate-average/refs/heads/main/assets/mainpage.png",
       url: "https://calculateaverage.vercel.app/"
     },
     {
       title: "Personal Website",
-      image: "img/output.PNG",
+      image: "https://raw.githubusercontent.com/mustafaberat/personal-website-1/refs/heads/master/public/img/output.PNG",
       url: "/"
     },
     {

components/headerComponent.js

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import MyHead from "./MyHead";
 import SidebarComp from "./SidebarComp";
+import Image from 'next/image'
 
 export default function HeaderComp() {
   return (
@@ -9,7 +10,12 @@ export default function HeaderComp() {
       <div className="container">
         {/* Logo must send to index so do not change [/=index] */}
         <Link href="/" className="header-logo">
-          <img src="/m-darkBlue.png" alt="MLOGO" />
+          <Image 
+            src="/m-darkBlue.png"
+            alt="MLOGO"
+            width={150}
+            height={50}
+          />
         </Link>
         <div id="header-buttons" className="header-buttons">
           <Link href="/about" className="header-button">

next.config.js

@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        port: '',
+        pathname: '/mustafaberat/**',
+      },
+    ],
+    unoptimized: true
+  },
+}
+
+module.exports = nextConfig 

pages/resume.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import styles from '../styles/Resume.module.css';
 import HeaderComp from '../components/headerComponent';
-import WorkExperience from '../components/resumeComps/WorkExperience';
-import Education from '../components/resumeComps/Education';
+
+// Lazy load the components
+const WorkExperience = React.lazy(() => import('../components/resumeComps/WorkExperience'));
+const Education = React.lazy(() => import('../components/resumeComps/Education'));
 
 const Resume = () => {
     return (
@@ -12,12 +14,16 @@ const Resume = () => {
                 <div className={styles.content}>
                     <h2 className={styles.title}>Resume</h2>
                     <div className={styles.grid}>
-                        <section className={styles.section}>
-                            <WorkExperience />
-                        </section>
-                        <section className={styles.section}>
-                            <Education />
-                        </section>
+                        <Suspense fallback={<div>Loading...</div>}>
+                            <section className={styles.section}>
+                                <WorkExperience />
+                            </section>
+                        </Suspense>
+                        <Suspense fallback={<div>Loading...</div>}>
+                            <section className={styles.section}>
+                                <Education />
+                            </section>
+                        </Suspense>
                     </div>
                 </div>
             </main>

pages/things.js

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import HeaderComp from '../components/headerComponent'
-import Things from '../components/ThingsComp'
+
+// Lazy load the Things component
+const Things = React.lazy(() => import('../components/ThingsComp'))
 
 const things = () => {
     return (
         <div>
             <HeaderComp />
-            <Things />
+            <Suspense fallback={<div>Loading...</div>}>
+                <Things />
+            </Suspense>
         </div>
     );
 }