From 0a0297581fb6c6919983b81759a807f6e5a63925 Mon Sep 17 00:00:00 2001
From: c0mputerGuy11 <khalilorab15@gmail.com>
Date: Sat, 29 Mar 2025 04:05:37 +0100
Subject: [PATCH] Fix Copy Button + Add Navbar + Update Blog, About & Projects
 Pages

Solved issue #4 (copy button), added navbar, and refined the blog, about, and projects pages with better layout and styling
---
 .hintrc                                       | 13 +++
 app/about/page.jsx                            | 77 +++++++++++++++
 .../page.mdx                                  |  0
 app/blog/{ => (post)}/layout.tsx              | 16 ++-
 app/blog/page.jsx                             | 56 +++++++++++
 app/header.tsx                                | 18 +++-
 app/layout.tsx                                |  2 +-
 app/solutions/page.jsx                        | 98 +++++++++++++++++++
 package-lock.json                             |  9 ++
 package.json                                  |  1 +
 public/solutions/projects.json                | 15 +++
 11 files changed, 296 insertions(+), 9 deletions(-)
 create mode 100644 .hintrc
 create mode 100644 app/about/page.jsx
 rename app/blog/{ => (post)}/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx (100%)
 rename app/blog/{ => (post)}/layout.tsx (79%)
 create mode 100644 app/blog/page.jsx
 create mode 100644 app/solutions/page.jsx
 create mode 100644 public/solutions/projects.json

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 00000000..9024f9c7
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/name-role-value": [
+      "default",
+      {
+        "button-name": "off"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/app/about/page.jsx b/app/about/page.jsx
new file mode 100644
index 00000000..903b5e6a
--- /dev/null
+++ b/app/about/page.jsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {  FaGithub } from "react-icons/fa";
+
+import Image from "next/image";
+
+export default function AboutPage() {
+  return (
+    <motion.main className="space-y-16 px-6 py-12" initial="hidden" animate="visible">
+      {/* 🌟 About Me Section */}
+      <motion.section className="space-y-4">
+        <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+          About Me
+        </h2>
+        <p className="text-zinc-600 dark:text-zinc-400 max-w-lg">
+          Hey, I'm Khalil! I love building intuitive and performant web experiences.
+          My focus is on bridging design and development, ensuring that every digital
+          product I create is smooth, functional, and visually appealing.
+        </p>
+      </motion.section>
+
+      {/* 🔥 Now Section */}
+      <motion.section className="space-y-4">
+        <h2 className="mb-3 text-lg font-medium">
+          Now
+        </h2>
+        <p className="text-zinc-600 dark:text-zinc-400">
+        I'm building tools that leverage DevOps to optimize software engineering workflows, exploring cloud computing to enhance scalability, and diving into distributed ledgers to push the boundaries of secure and decentralized systems. Through tackling complex logic challenges, I continuously refine my problem-solving skills, bridging the gap between infrastructure and innovation.
+        </p>
+
+      </motion.section>
+
+      {/* 🎉 Fun Facts Section */}
+<motion.section className="space-y-4">
+  <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+    Fun Facts
+  </h2>
+  <div className="grid gap-4 sm:grid-cols-2">
+    <div className="rounded-lg border p-4 dark:border-zinc-700">
+      <h3 className="text-lg font-medium">🔥 Night Owl Coder</h3>
+      <p className="text-sm text-zinc-500">
+        I do my best work late at night with a cup of coffee.
+      </p>
+    </div>
+    <div className="rounded-lg border p-4 dark:border-zinc-700">
+      <h3 className="text-lg font-medium">🎮 Gamer at Heart</h3>
+      <p className="text-sm text-zinc-500">
+        I enjoy playing strategy and open-world games in my free time.
+      </p>
+    </div>
+  </div>
+</motion.section>
+<motion.section
+
+>
+  <h3 className="mb-3 text-lg font-medium">More</h3>
+  <p className="text-zinc-600 dark:text-zinc-400">
+    Once, I heard <i>"software is just code."</i> But then I realized—it really is just code.
+    The magic isn’t in the lines themselves, but in how you put them together.
+  </p>
+  <p className="mt-2 text-zinc-600 dark:text-zinc-400">
+    Check out my <a
+    href="https://github.com/0xquirkai"
+    target="_blank"
+    rel="noopener noreferrer"
+    className="mt-4 inline-block font-medium text-dark-600 hover:underline dark:text-dark-400"
+  >
+<FaGithub/>  </a>  I keep it updated with projects, experiments, and things I break on purpose.
+    You might find something useful or at least interesting.
+  </p>
+
+</motion.section>
+
+    </motion.main>
+  );
+}
diff --git a/app/blog/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx b/app/blog/(post)/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx
similarity index 100%
rename from app/blog/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx
rename to app/blog/(post)/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx
diff --git a/app/blog/layout.tsx b/app/blog/(post)/layout.tsx
similarity index 79%
rename from app/blog/layout.tsx
rename to app/blog/(post)/layout.tsx
index d398a325..7c612fd9 100644
--- a/app/blog/layout.tsx
+++ b/app/blog/(post)/layout.tsx
@@ -2,10 +2,11 @@
 import { TextMorph } from '@/components/ui/text-morph'
 import { ScrollProgress } from '@/components/ui/scroll-progress'
 import { useEffect, useState } from 'react'
+import { FaRegCopy } from "react-icons/fa6";
 
 function CopyButton() {
   const [text, setText] = useState('Copy')
-  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+  const [currentUrl, setCurrentUrl] = useState('')
 
   useEffect(() => {
     setTimeout(() => {
@@ -13,6 +14,10 @@ function CopyButton() {
     }, 2000)
   }, [text])
 
+  useEffect(() => {
+    setCurrentUrl(window.location.href)
+  }, [])
+
   return (
     <button
       onClick={() => {
@@ -23,7 +28,6 @@ function CopyButton() {
       type="button"
     >
       <TextMorph>{text}</TextMorph>
-      <span>URL</span>
     </button>
   )
 }
@@ -43,9 +47,11 @@ export default function LayoutBlogPost({
         }}
       />
 
-      <div className="absolute right-4 top-24">
-        <CopyButton />
-      </div>
+<div className="absolute right-4 top-28 border border-zinc-500 px-3 py-1 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 shadow-md hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-all">
+  <CopyButton />
+</div>
+
+
       <main className="prose prose-gray mt-24 pb-20 prose-h4:prose-base dark:prose-invert prose-h1:text-xl prose-h1:font-medium prose-h2:mt-12 prose-h2:scroll-m-20 prose-h2:text-lg prose-h2:font-medium prose-h3:text-base prose-h3:font-medium prose-h4:font-medium prose-h5:text-base prose-h5:font-medium prose-h6:text-base prose-h6:font-medium prose-strong:font-medium">
         {children}
       </main>
diff --git a/app/blog/page.jsx b/app/blog/page.jsx
new file mode 100644
index 00000000..f163f90d
--- /dev/null
+++ b/app/blog/page.jsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { AnimatedBackground } from '@/components/ui/animated-background'
+import {
+
+    BLOG_POSTS,
+
+  } from '../data'
+const VARIANTS_SECTION = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+
+const TRANSITION_SECTION = { duration: 0.3, ease: "easeInOut" };
+
+export default function BlogPage() {
+  const [posts, setPosts] = useState([]);
+
+
+  return (
+    <motion.section
+      variants={VARIANTS_SECTION}
+      initial="hidden"
+      animate="visible"
+      transition={TRANSITION_SECTION}
+    >
+      <h3 className="mb-3 text-lg font-medium">Blog</h3>
+      <div className="flex flex-col space-y-0">
+        <AnimatedBackground
+          enableHover
+          className="h-full w-full rounded-lg bg-zinc-100 dark:bg-zinc-900/80 -z-10"
+          transition={{ type: "spring", bounce: 0, duration: 0.2 }}
+        >
+          {BLOG_POSTS.map((post) => (
+            <Link
+              key={post.uid}
+              className="-mx-3 rounded-xl px-3 py-3 block"
+              href={post.link}
+              data-id={post.uid}
+            >
+              <div className="flex flex-col space-y-1">
+                <h4 className="font-normal dark:text-zinc-100">{post.title}</h4>
+                <p className="text-black-500 dark:text-zinc-400">
+                  {post.description}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </AnimatedBackground>
+      </div>
+    </motion.section>
+  );
+}
diff --git a/app/header.tsx b/app/header.tsx
index 872f234e..3599e128 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -4,11 +4,11 @@ import Link from 'next/link'
 
 export function Header() {
   return (
-    <header className="mb-8 flex items-center justify-between">
-      <div>
+    <header className="mb-8 flex items-center justify-between ">
+      <div className='flex items-center gap-2'>
         <Link href="/" className="font-medium text-black dark:text-white">
           Julien Nim
-        </Link>
+        </Link> -
         <TextEffect
           as="p"
           preset="fade"
@@ -19,6 +19,18 @@ export function Header() {
           Design Engineer
         </TextEffect>
       </div>
+      <div className='flex items-center gap-4 justify-between'>
+      <Link href="/solutions" className="text-black dark:text-white">
+          Solutions
+        </Link>
+        <Link href="/about" className="text-black dark:text-white">
+          About
+        </Link>
+        <Link href="/blog" className="text-black dark:text-white">
+          Blog
+        </Link>
+
+      </div>
     </header>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index a43b5408..f73fea9b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geist.variable} ${geistMono.variable} bg-white tracking-tight antialiased dark:bg-zinc-950`}
+        className={`${geist.variable} ${geistMono.variable} bg-white tracking-tight antialiased dark:bg-zinc-900`}
       >
         <ThemeProvider
           enableSystem={true}
diff --git a/app/solutions/page.jsx b/app/solutions/page.jsx
new file mode 100644
index 00000000..14fcde2f
--- /dev/null
+++ b/app/solutions/page.jsx
@@ -0,0 +1,98 @@
+"use client";
+import { motion } from 'motion/react'
+
+import { useEffect, useState } from "react";
+import {  FaGithub } from "react-icons/fa";
+import { CgWebsite } from "react-icons/cg";
+
+export default function ProjectsPage() {
+    const TRANSITION_SECTION = {
+        duration: 0.3,
+      }
+
+      const VARIANTS_SECTION = {
+        hidden: { opacity: 0, y: 20, filter: 'blur(8px)' },
+        visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
+      }
+
+  const [projects, setProjects] = useState([]);
+
+  useEffect(() => {
+    fetch("/solutions/projects.json")
+      .then((res) => res.json())
+      .then((data) => setProjects(data))
+      .catch((error) => console.error("Error loading projects:", error));
+  }, []);
+
+  return (
+    <motion.section
+    variants={VARIANTS_SECTION}
+        transition={TRANSITION_SECTION}
+        >
+ <h3 className="mb-5 text-lg font-medium">Solutions</h3>
+      <div className="grid grid-cols-1 gap-6">
+        {projects.map((project) => (
+          <ProjectItem key={project.name} project={project} />
+        ))}
+      </div>
+    </motion.section>
+
+  );
+}
+
+function ProjectItem({ project }) {
+  const [hovered, setHovered] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = (event) => {
+    setPosition({ x: event.clientX + 15, y: event.clientY + 15 });
+  };
+
+  return (
+    <div
+      className="flex justify-between items-center gap-4 p-4 rounded-lg  border-zinc-200 dark:border-zinc-700 transition hover:bg-zinc-100 dark:hover:bg-zinc-800 relative"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+    >
+      {/* Project Info */}
+      <div className="flex gap-2">
+      <span className="font-medium text-zinc-900 dark:text-zinc-50">
+        {project.name}
+      </span>
+      <span className="text-zinc-600 dark:text-zinc-400">&nbsp;&#8226;&nbsp; {project.description}</span>
+      </div>
+
+
+      {/* Icons */}
+      <div className="flex gap-2">
+      <a href={project.link} target="_blank" rel="noopener noreferrer">
+        <CgWebsite
+          size={18}
+          className="text-zinc-600 dark:text-zinc-400 hover:text-blue-500 dark:hover:text-blue-400 transition justify-self-end
+"
+        />
+      </a>
+
+      <a href={project.github} target="_blank" rel="noopener noreferrer">
+        <FaGithub
+          size={20}
+          className="text-zinc-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-gray-100 transition  justify-self-end"
+        />
+      </a>
+
+      </div>
+
+
+      {/* Floating Image Next to Cursor */}
+      {hovered && (
+        <img
+          src={project.image}
+          alt={project.name}
+          className="fixed w-40 h-40 object-cover rounded-lg shadow-lg border border-zinc-300 dark:border-zinc-700 pointer-events-none z-10"
+          style={{ top: `${position.y}px`, left: `${position.x}px` }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 149b8403..52c9001d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "next-themes": "^0.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^2.5.5"
       },
       "devDependencies": {
@@ -5710,6 +5711,14 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index d84bc9f2..c2f3d1fe 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
diff --git a/public/solutions/projects.json b/public/solutions/projects.json
new file mode 100644
index 00000000..9cf9498c
--- /dev/null
+++ b/public/solutions/projects.json
@@ -0,0 +1,15 @@
+[{
+        "name": "Project 1",
+        "description": "This is a cool project.",
+        "link": "https://example.com",
+        "github": "https://github.com/example",
+        "image": "https://images.unsplash.com/photo-1742943679521-f4736500a471?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+        "name": "Project 2",
+        "description": "Another awesome project.",
+        "link": "https://example.com",
+        "github": "https://github.com/example",
+        "image": "/images/project2.jpg"
+    }
+]
\ No newline at end of file