Merge pull request #12 from ecobanoglu/develop

Develop
ecobanoglu · Jan 29, 2025 · f7d499d · f7d499d
2 parents 073cbd2 + fcdc815
commit f7d499d
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 49 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,13 +1,14 @@
 /** @type {import('next').NextConfig} */
+
+const isProd = process.env.NODE_ENV === "production";
+
 const nextConfig = {
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "raw.githubusercontent.com",
-      },
-    ],
+    unoptimized: true,
   },
+  assetPrefix: isProd ? "/ergun.github.io/" : "",
+  basePath: isProd ? "/ergun.github.io" : "",
+  output: "export",
 };
 
 module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,14 @@
 {
+  "homepage": "https://ecobanoglu.github.io/ergun.github.io",
   "name": "ecobanoglu",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "deploy": "npm run build"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.2",
@@ -18,7 +20,6 @@
     "eslint": "9.18.0",
     "eslint-config-next": "15.1.5",
     "next": "15.1.5",
-    "next-themes": "^0.4.4",
     "postcss": "8.5.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { ThemeProvider } from "next-themes";
 
 import { Header, ProfileCard } from "@/components";
 
@@ -25,17 +24,15 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="bg-gray-200/30 text-gray-600 dark:bg-[#0f1629] dark:text-gray-400">
-        <ThemeProvider attribute="class">
-          <Header />
-          <div className="max-w-screen-xl px-3 md:px-4 lg:px-8 mx-auto pt-6">
-            <div className="grid grid-cols-1 lg:grid-cols-9 gap-4 lg:gap-x-6">
-              <div className="lg:col-span-3">
-                <ProfileCard />
-              </div>
-              <div className="lg:col-span-6">{children}</div>
+        <Header />
+        <div className="max-w-screen-xl px-3 md:px-4 lg:px-8 mx-auto pt-6">
+          <div className="grid grid-cols-1 lg:grid-cols-9 gap-4 lg:gap-x-6">
+            <div className="lg:col-span-3">
+              <ProfileCard />
             </div>
+            <div className="lg:col-span-6">{children}</div>
           </div>
-        </ThemeProvider>
+        </div>
       </body>
     </html>
   );

diff --git a/src/components/blocks/experience.tsx b/src/components/blocks/experience.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Card, Item } from "@/components/ui";
+import { Card } from "@/components/ui";
 import ExperienceItem from "@/components/experience-item";
 
 import { IExperienceItem } from "@/lib/types";

diff --git a/src/components/dark-mode.tsx b/src/components/dark-mode.tsx
@@ -1,32 +1,51 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import { Button } from "@/components/ui";
 
-import { useDarkMode } from "@/lib/hooks";
-
 export default function DarkMode() {
-  const [checked, setChecked] = useState(false);
+  const [darkMode, setDarkMode] = useState<boolean>(false);
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem("darkMode") === "true";
+    setDarkMode(isDarkMode);
+    setTheme(isDarkMode);
+  }, []);
 
-  const toggleMenu = () => {
-    setChecked(!checked);
+  const setTheme = (theme: boolean) => {
+    const root = window.document.documentElement;
+    const colorTheme = theme ? "dark" : "light";
 
-    if (checked) {
-      useDarkMode("dark");
+    console.log(colorTheme);
+
+    if (theme) {
+      root.classList.remove("light");
+      root.classList.add("dark");
     } else {
-      useDarkMode("light");
+      root.classList.remove("dark");
+      root.classList.add("light");
     }
+
+    if (typeof window !== "undefined") {
+      localStorage.setItem("ec_theme", colorTheme);
+    }
+    root.setAttribute("style", `color-scheme: ${colorTheme};`);
+  };
+
+  const toggleDarkMode = () => {
+    setDarkMode((prevMode) => !prevMode);
+    setTheme(darkMode);
   };
 
   return (
     <Button
       variant="link"
-      onClick={toggleMenu}
+      onClick={toggleDarkMode}
       className={`relative ml-4 z-50 `}
       aria-label="Toogle mode"
     >
-      {!checked ? (
+      {!darkMode ? (
         <svg
           xmlns="http://www.w3.org/2000/svg"
           className="w-6 h-6"

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Logo, DarkMode, Menu } from "@/components";
+import { Logo, DarkMode } from "@/components";
 
-import { useSticky } from "@/lib/hooks";
+import useSticky from "@/lib/hooks/use-sticky";
 
 export default function Header() {
   const sticky = useSticky(5) ? "bg-white dark:bg-gray-800 shadow-md" : "";

diff --git a/src/components/profile-card.tsx b/src/components/profile-card.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { Social, Logo } from "@/components";
 import { Button, Card, Box } from "./ui";
+import Link from "next/link";
 
 export default function ProfileCard() {
   return (
@@ -13,7 +14,7 @@ export default function ProfileCard() {
         </div>
         */}
         <h1 className="text-3xl font-bold text-black dark:text-white mb-3 lg:mb-4">
-          <a href="/">Ergün Çobanoğlu</a>
+          <Link href="/">Ergün Çobanoğlu</Link>
         </h1>
         <h2 className="text-lg font-semibold bg-gray-100 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 py-2 px-3 leading-none inline-block rounded-lg mb-3 lg:mb-4">
           Sn. Front-end Developer