Update

Author: afgprogrammer

next.config.mjs

@@ -1,4 +1,11 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  output: "export",
+  reactStrictMode: true,
+  images: {
+    unoptimized: true, // Disable default image optimization
+  },
+  // basePath: "/afgprogrammer.github.io",
+};
 
 export default nextConfig;

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "deploy": "next build && gh-pages -d out"
   },
   "dependencies": {
     "@mantine/code-highlight": "^7.11.1",
@@ -30,6 +31,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
+    "gh-pages": "^6.2.0",
     "postcss": "^8.4.39",
     "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",

src/_components/header/HeaderMenu.tsx

@@ -44,30 +44,30 @@ export function HeaderMenu() {
   );
 
   const items = links.map((link) => {
-    const menuItems = link.links?.map((item) => (
-      <Menu.Item key={item.link}>{item.label}</Menu.Item>
-    ));
+    // const menuItems = link.links?.map((item) => (
+    //   <Menu.Item key={item.link}>{item.label}</Menu.Item>
+    // ));
 
-    if (menuItems) {
-      return (
-        <Menu
-          key={link.label}
-          trigger="hover"
-          transitionProps={{ exitDuration: 0 }}
-          withinPortal
-        >
-          <Menu.Target>
-            <Link href={link.link} className={classes.link}>
-              <Center>
-                <span className={classes.linkLabel}>{link.label}</span>
-                <IconChevronDown size="0.9rem" stroke={1.5} />
-              </Center>
-            </Link>
-          </Menu.Target>
-          <Menu.Dropdown>{menuItems}</Menu.Dropdown>
-        </Menu>
-      );
-    }
+    // if (menuItems) {
+    //   return (
+    //     <Menu
+    //       key={link.label}
+    //       trigger="hover"
+    //       transitionProps={{ exitDuration: 0 }}
+    //       withinPortal
+    //     >
+    //       <Menu.Target>
+    //         <Link href={link.link} className={classes.link}>
+    //           <Center>
+    //             <span className={classes.linkLabel}>{link.label}</span>
+    //             <IconChevronDown size="0.9rem" stroke={1.5} />
+    //           </Center>
+    //         </Link>
+    //       </Menu.Target>
+    //       <Menu.Dropdown>{menuItems}</Menu.Dropdown>
+    //     </Menu>
+    //   );
+    // }
 
     return (
       <Link key={link.label} href={link.link} className={classes.link}>

src/_components/works/WorkSection.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Divider, Group, Space, Stack, Text } from "@mantine/core";
 import { IconArrowRight, IconDownload } from "@tabler/icons-react";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function WorkSection() {
@@ -31,7 +32,7 @@ export default function WorkSection() {
             bg={"gray.2"}
             style={{ borderRadius: 10, overflow: "hidden" }}
           >
-            <img
+            <Image
               alt="fff"
               src={"/banner/one.png"}
               style={{ width: "100%", objectFit: "cover", height: 200 }}

src/app/about-me/page.tsx

@@ -44,13 +44,17 @@ export default function AboutMe() {
         <Space h={100} />
         <Grid justify="space-between" align="center">
           <GridCol span={12}>
-            <Image src={"/mohammad-rahmani.jpg"} radius={50} />
-            {/* <Image src={"/me.png"} h={600} radius={50} /> */}
+            <Image
+              width={"100%"}
+              src="/mohammad-rahmani.jpg"
+              alt="Mohammad Rahmani - afgprogrammer"
+              radius={50}
+            />
           </GridCol>
           <GridCol span={{ lg: 8 }} mx="auto" mt={50}>
             <Text fz={{ sm: 24, xs: 16 }} c="light-dark(black, white)">
-              I'm <strong>Mohammad Rahmani</strong>, a seasoned programmer with
-              over a decade of experience in the dynamic world of{" "}
+              I&apos;m <strong>Mohammad Rahmani</strong>, a seasoned programmer
+              with over a decade of experience in the dynamic world of{" "}
               <strong>software development</strong>. My journey in programming
               has been both challenging and rewarding, allowing me to hone my
               skills across various programming languages and technologies.
@@ -68,10 +72,10 @@ export default function AboutMe() {
             <Text fz={{ sm: 24, xs: 16 }} mt={32} c="light-dark(black, white)">
               With a commitment to excellence and a passion for innovation, I am
               dedicated to turning <strong>ideas</strong> into reality through{" "}
-              <strong>code</strong>. Whether you're looking to build a new{" "}
+              <strong>code</strong>. Whether you&apos;re looking to build a new{" "}
               <strong>application</strong> from scratch or enhance an existing
               one, I bring a wealth of knowledge and a proven track record to
-              ensure your project’s <strong>success</strong>.
+              ensure your project&apos;s <strong>success</strong>.
             </Text>
             <Text fz={{ sm: 20, xs: 16 }} mt={32} c="light-dark(black, white)">
               Thank you for visiting my page, and I look forward to the
@@ -88,7 +92,7 @@ export default function AboutMe() {
               href="mailto:rto1680@gmail.com"
               rightSection={<IconArrowUpRight size={22} />}
             >
-              Let's Talk
+              Let&apos;s Talk
             </Button>
           </GridCol>
         </Grid>

src/app/flutter/page.tsx

@@ -40,7 +40,7 @@ export default function AboutMe() {
   useEffect(() => {
     setExamples(originalData.slice(visibleCount, perPage));
     setVisibleCount(perPage);
-  }, []);
+  }, [perPage, visibleCount]);
 
   const handleSearch = useDebouncedCallback(async (query: string) => {
     if (query.length) {
@@ -108,9 +108,9 @@ export default function AboutMe() {
         </Box>
         <Space h={40} />
         <Grid>
-          {examples.map((day) => {
+          {examples.map((day, i) => {
             return (
-              <GridCol span={{ lg: 4, sm: 6, xs: 12 }}>
+              <GridCol key={`id-${i}`} span={{ lg: 4, sm: 6, xs: 12 }}>
                 <Card radius="md" withBorder style={{ overflow: "hidden" }}>
                   <CardSection>
                     <Box>

src/app/page.tsx

@@ -63,7 +63,7 @@ export default function Home() {
             fz={32}
             c={"light-dark(var(--mantine-color-dark-9), white)"}
           >
-            Hey 👋🏼 I'm{" "}
+            Hey 👋🏼 I'm{" "}
             <span
               style={{
                 color:
@@ -159,7 +159,7 @@ export default function Home() {
           <GridCol span={{ lg: 4 }}>
             <Space h={16} />
             <Text fz={18}>
-              I'm a Full-Stack Software Developer living in Kabul 🇦🇫, and I
+              I&apos;m a Full-Stack Software Developer living in Kabul 🇦🇫, and I
               focus on making digital experiences that are easy to use,
               enjoyable, and get the job done. I love tackling challenging
               problems and creating solutions that truly matter to people.
@@ -180,7 +180,6 @@ export default function Home() {
           </GridCol>
         </Grid>
         <Space h={150} />
-        {/* <WorkSection /> */}
       </Container>
       <SiteFooter />
     </>