build: lint code

Author: steadyfall

src/app/not-found.tsx

@@ -1,4 +1,5 @@
 import BackButton from "@/components/ui/BackButton";
+import Link from 'next/link'
 import { cn } from "@/lib/utils";
 
 export default function NotFound() {
@@ -13,12 +14,12 @@ export default function NotFound() {
             404
         </h1>
         <div className="mt-4 text-center">
-            The page you're looking for, is either not there or has been moved.
+            The page you&apos;re looking for, is either not there or has been moved.
         </div>
         <ul className="mt-4 flex gap-4 sm:gap-8">
             <li>{<BackButton>go back</BackButton>}</li>
             <li>|</li>
-            <li><a href="/" className="text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white hover:underline hover:underline-offset-4">home</a></li>
+            <li><Link href="/" className="text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white hover:underline hover:underline-offset-4">home</Link></li>
         </ul>
     </main>
     )

src/components/Experiences.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
@@ -10,6 +10,7 @@ interface ExperiencesProps {
 }
 
 export function Experiences({ arr }: ExperiencesProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [experiences, setExperiences] = useState(arr)
     return (
         <section id="experience" className="mb-12">

src/components/Header.tsx

@@ -2,7 +2,7 @@ import { Copy, CopyCheck } from 'lucide-react'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 import LinkWithArrow from "@/components/ui/LinkWithArrow";
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
-import Image from 'next/image'
+// import Image from 'next/image'
 
 import { useEffect, useState } from 'react';
 import copy from 'copy-to-clipboard';

src/components/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '@/lib/utils';
 import ThemeSwitch from './ThemeSwitch';
+import Link from 'next/link';
 
 const Navbar = () => {
     // const completion = useReadingProgress();
@@ -13,10 +14,10 @@ const Navbar = () => {
                 "max-w-full mx-auto px-8 sm:px-16 md:px-24 lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl"
             )}>
                 <ul className="flex gap-4 sm:gap-8">
-                    <li><a href="/" className="hover:underline hover:underline-offset-4">home</a></li>
-                    <li><a href="/#experience" className="hover:underline hover:underline-offset-4">experience</a></li>
-                    <li><a href="/#projects" className="hover:underline hover:underline-offset-4">projects</a></li>
-                    <li><a href="/posts" className="hover:underline hover:underline-offset-4">blog</a></li>
+                    <li><Link href="/" className="hover:underline hover:underline-offset-4">home</Link></li>
+                    <li><Link href="/#experience" className="hover:underline hover:underline-offset-4">experience</Link></li>
+                    <li><Link href="/#projects" className="hover:underline hover:underline-offset-4">projects</Link></li>
+                    <li><Link href="/posts" className="hover:underline hover:underline-offset-4">blog</Link></li>
                 </ul>
                 <div className="flex gap-0 sm:gap-4">
                     <ThemeSwitch />

src/components/Projects.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
 import { cn } from '@/lib/utils';
@@ -8,6 +8,7 @@ interface ProjectProps {
 }
 
 export function Projects({ arr }: ProjectProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [projects, setProjects] = useState(arr)
     return (
         <section id="projects" className="mb-12">

src/components/Skills.tsx

@@ -15,6 +15,7 @@ interface SkillsProps {
 }
 
 export function Skills({ arr }: SkillsProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [skills, setSkills] = useState(arr)
     const result = Object.entries(skills).map(([key, value], idx) => {
         return (

src/components/ThemeSwitch.tsx

@@ -3,7 +3,7 @@
 import { Moon, Sun } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
-import Image from "next/image"
+// import Image from "next/image";
 
 export default function ThemeSwitch() {
   const [mounted, setMounted] = useState(false)

src/components/Tiles/ExperienceTile.tsx

@@ -1,6 +1,6 @@
 import LinkWithArrow from "@/components/ui/LinkWithArrow";
 import { useMediaQuery } from '@/hooks/useMediaQuery'
-import Image from 'next/image'
+// import Image from 'next/image';
 
 export type ExperienceTileProps = {
   companyLogo: string

src/components/Tiles/ProjectTile.tsx

@@ -1,8 +1,7 @@
 import { Icon } from '@iconify/react';
 import { techIcons } from '@/lib/techIcons';
-import { useMediaQuery } from '@/hooks/useMediaQuery'
-import { Badge } from '@/components/ui/Badge'
-import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import { Badge } from '@/components/ui/Badge';
+import BlurFade from '@/components/ui/BlurFade';
 import LinkWithArrow from "@/components/ui/LinkWithArrow";
 
 type ProjectTileDetailProps = {
@@ -20,7 +19,7 @@ export type ProjectTileProps = ProjectTileDetailProps & {
 };
 
 export function ProjectTile({ delayTime, title, description, repo, repoUrl, live, liveUrl, techStack }: ProjectTileProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)')
+  // const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
     <div className="items-center">
       <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">