Develop

.gitignore

@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+package-lock.json
 
 # production
 /build
@@ -32,3 +33,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+/tmp

README.md

@@ -79,6 +79,51 @@ npm run dev
 -   Feel free to use it as your own portfolio
 -   Contributions are welcome
 
+## Notebooks rendering with Quarto
+
+1. Transform the jupyter notebook into a qmd file:
+
+```
+quarto convert isic-2024_kaggle.ipynb -o isic-2024_kaggle.qmd
+```
+
+2. Transform the qmd file to suit your layout needs, for example add this at the head of the qmd file: 
+
+```
+---
+format:
+  html:
+    title: ''
+    toc: true
+    toc-title: "<strong>Table of contents</strong>"
+    toc-location: right
+    toc-depth: 5
+    toc-expand: true 
+    toc-float:
+      collapsed: true
+      smooth-scroll: true
+      width: 300px
+    theme: cosmo
+    code-fold: false
+    code-fold-show: true  
+    page-layout: full
+    number-sections: true
+    code-tools: false
+    code-line-numbers: false
+    code-summary: "Show Code"
+    code-block-bg: true
+    include-in-header: styles/toc-scrollbar-hide.html
+execute:
+  enabled: false
+---
+```
+
+3. Convert the qmd into an html file:
+
+```
+quarto render isic-2024_kaggle.qmd   
+```
+
 ### License
 
 [MIT](https://github.com/realstoman/nextjs-tailwindcss-portfolio/blob/main/LICENSE)

clean_project.sh

@@ -0,0 +1,34 @@
+rm -rf .next node_modules package-lock.json yarn.lock
+npm cache clean --force
+npm install
+npm run build
+npm run dev
+
+
+npm install next@latest react@latest react-dom@latest --force
+npm install
+npm run build
+npm run dev
+
+
+
+npm install framer-motion@latest
+rm -rf node_modules package-lock.json .next
+npm install
+npm run build
+npm run dev
+
+
+brew install trash
+trash node_modules
+rm -rf ~/.Trash/*
+
+npm install
+
+
+
+trash node_modules
+rm -rf ~/.Trash/*
+rm -rf .next node_modules package-lock.json yarn.lock
+npm install
+npm run dev

components/HireMeModal.jsx

@@ -3,10 +3,11 @@ import { FiX } from 'react-icons/fi';
 import Button from './reusable/Button';
 
 const selectOptions = [
-	'Web Application',
-	'Mobile Application',
-	'UI/UX Design',
-	'Branding',
+	'Data Science',
+	'Generative AI',
+	'Data Engineering',
+	'Software Engineering',
+	'Web Application'
 ];
 
 function HireMeModal({ onClose, onRequest }) {
@@ -25,23 +26,22 @@ function HireMeModal({ onClose, onRequest }) {
 				<div className="modal-wrapper flex items-center z-30">
 					<div className="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative">
 						<div className="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark">
-							<h5 className=" text-primary-dark dark:text-primary-light text-xl">
+							<h5 className=" text-primary-dark dark:text-gray-300 text-xl">
 								What project are you looking for?
 							</h5>
 							<button
 								onClick={onClose}
-								className="px-4 font-bold text-primary-dark dark:text-primary-light"
+								className="px-4 font-bold text-primary-dark dark:text-gray-300 "
 							>
 								<FiX className="text-3xl" />
 							</button>
 						</div>
 						<div className="modal-body p-5 w-full h-full">
-							<form
-								onSubmit={(e) => {
-									e.preventDefault();
-								}}
-								className="max-w-xl m-4 text-left"
-							>
+								<form
+									action="https://formspree.io/f/mldjbkwy" 
+									method="POST"
+									className="max-w-xl m-4 text-left"
+								>
 								<div className="">
 									<input
 										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
@@ -97,22 +97,13 @@ function HireMeModal({ onClose, onRequest }) {
 								</div>
 
 								<div className="mt-6 pb-4 sm:pb-1">
-									<span
-										onClick={onRequest}
+									<button
 										type="submit"
-										className="px-4
-											sm:px-6
-											py-2
-											sm:py-2.5
-											text-white
-											bg-indigo-500
-											hover:bg-indigo-600
-											rounded-md
-											focus:ring-1 focus:ring-indigo-900 duration-500"
+										className="px-4 sm:px-6 py-2 sm:py-2.5 text-white bg-indigo-500 hover:bg-indigo-600 rounded-md focus:ring-1 focus:ring-indigo-900 duration-500"
 										aria-label="Submit Request"
 									>
-										<Button title="Send Request" />
-									</span>
+									<Button title="Send Request" />
+									</button>
 								</div>
 							</form>
 						</div>

components/PagesMetaHead.jsx

@@ -10,7 +10,7 @@ function PagesMetaHead({ title, keywords, description }) {
 			<meta name="keywords" content={keywords} />
 			<meta name="description" content={description} />
 			<meta charSet="utf-8" />
-			<link rel="icon" href="/favicon.ico" />
+			<link rel="icon" href="/favicon.png" />
 			<title>{title}</title>
 		</Head>
 	);
@@ -22,4 +22,4 @@ PagesMetaHead.defaultProps = {
 	keywords: 'Simple and multi-page next.js and react application',
 };
 
-export default PagesMetaHead;
+export default PagesMetaHead;

components/TableOfContents.jsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+
+export default function TableOfContents({ className = '' }) {
+  const [headings, setHeadings] = useState([])
+  const [activeId, setActiveId] = useState(null)
+  const itemRefs = useRef({})
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const elements = Array.from(document.querySelectorAll('h2[id], h3[id]'))
+      const newHeadings = elements.map((el) => ({
+        id: el.id,
+        text: el.textContent || '',
+        level: el.tagName === 'H2' ? 2 : 3,
+      }))
+      setHeadings(newHeadings)
+    }, 500)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
+  useEffect(() => {
+    if (!headings.length) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.target.offsetTop - b.target.offsetTop)
+
+        if (visible.length > 0) {
+          setActiveId(visible[0].target.id)
+        }
+      },
+      {
+        rootMargin: '-40% 0% -40% 0%',
+        threshold: 0.1,
+      }
+    )
+
+    const elements = document.querySelectorAll('h2[id], h3[id]')
+    elements.forEach((el) => observer.observe(el))
+
+    return () => {
+      elements.forEach((el) => observer.unobserve(el))
+    }
+  }, [headings])
+
+  if (!headings.length) return null
+
+  return (
+    <aside
+      className={`hidden [@media(min-width:2000px)]:block fixed top-60 right-10 bottom-32 w-64 z-40 overflow-y-auto text-sm text-gray-500 dark:text-gray-300 transition-all duration-300 ${className} mt-5`}
+    >
+     <div className="pl-2">
+  <p className="mb-2 text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-200">
+    On This Article
+  </p>
+
+  <div className="relative">
+    {/* vertical bar limited to list height */}
+    <div className="absolute left-2 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-600" />
+
+    <ul className="space-y-1 pl-4">
+      {headings.map((heading) => (
+        <li
+          key={heading.id}
+          className={`relative ${
+            heading.level === 3 ? 'pl-[21px]' : 'pl-0'
+          }`}
+        >
+          <a
+            ref={(el) => (itemRefs.current[heading.id] = el)}
+            href={`#${heading.id}`}
+            className={`block truncate transition-colors duration-200 ml-1 ${
+              activeId === heading.id
+                ? 'text-indigo-600 font-semibold dark:text-indigo-400'
+                : 'hover:text-primary-dark dark:hover:text-primary-light'
+            }`}
+          >
+            {heading.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</div>
+
+    </aside>
+  )
+}

components/ThemeToggle.js

@@ -0,0 +1,21 @@
+// components/ThemeToggle.js
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export default function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null; // avoids hydration error
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      className="px-4 py-2 rounded bg-gray-200 dark:bg-gray-500 text-sm"
+    >
+      Switch to {resolvedTheme === 'dark' ? 'light' : 'dark'} mode
+    </button>
+  );
+}

components/about/AboutClientSingle.jsx

@@ -2,14 +2,14 @@ import Image from 'next/image';
 
 function AboutClientSingle({ title, image }) {
 	return (
-		<div className="py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark  shadow-sm rounded-lg mb-5 cursor-pointer">
+		<div className="py-5 px-10 border bg-secondary-light border-gray-200 dark:border-ternary-dark  shadow-sm rounded-lg mb-5 cursor-pointer">
 			<Image
-				src={image}
-				alt={title}
-				layout="responsive"
-				width={100}
-				height={50}
+			src={image}
+			alt={title}
+
+			className="object-contain w-full h-auto"
 			/>
+
 		</div>
 	);
 }