WIP

.archived/App.jsx

@@ -0,0 +1,87 @@
+
+import { useEffect } from react;
+
+function Heading(title) {
+    return (
+        <div className="Container">
+            <div className="row">
+                <div className="col-lg-12 text-center">
+                    <h2 className="section-heading">{title}</h2>
+                    <hr class-name="mx-auto" />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+function DegreeView(degree) {
+    return (
+        <div className="container-fluid align-middle my-auto mx-auto">
+            <div className="row">
+                <div className="col-lg-4 col-md-6 mx-auto">
+                    <div className="service-box mt-5 mx-auto">
+                        {/* <img src="assets/img/education.png" style={{ height: 200 }} /> */}
+                        <Image src="/next.svg" width={200} height={200} priority />
+                        <h4>{degree.title}</h4>
+                        <h5><a href={degree.institute.url} target="_blank">{degree.institute.name}</a></h5>
+                        <p className="text-muted">{degree.time}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+function Section(id, heading, view) {
+    return (
+        <div id={id} className="section my-auto">
+            <Heading title={heading} />
+            {view}
+        </div>
+    )
+}
+
+
+const MainPage = () => {
+    function getView(data, itemView) {
+        return data.map((item) => { itemView(item) })
+    }
+
+    function loadData(file) {
+        return useEffect(() => {
+            fetch('/path-to-your-json/data.json')
+                .then(response => response.json())
+                .then(data => setItems(data))
+                .catch(error => console.error('Error loading data:', error));
+        }, []);
+    }
+
+    return (
+        <main>
+            <header class="masthead text-center text-white d-flex">
+                <div class="container my-auto">
+                    <div class="row">
+                        <div class="col-lg-10 mx-auto">
+                            <img src="assets/img/amrabed.jpeg" alt="profile picture" class="rounded-circle" style="width: 140px" />
+                            <h1 class="text-uppercase">Amr Abed</h1>
+                            <hr />
+                            <div class="col-lg-8 mx-auto">
+                                <p>Computer Engineer • Researcher • Instructor</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <div className="container">
+                <Section id="education" heading="Education" view={loadData("education.json").map((degree) => <DegreeView degree={degree} />)} />
+                {/* <Section id="certifications" heading="Certifications" view={getView()} />
+                <Section id="experience" heading="Certifications" view={getView()} />
+                <Section id="skills" heading="Skills" view={getView()} /> */}
+            </div>
+        </main>
+    )
+}
+
+export default MainPage

next/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "rules": {
+    "no-multiple-empty-lines": ["error", { "max": 2 }],
+    "import/no-duplicates": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
+        "newlines-between": "always"
+      }
+    ],
+    "quotes": ["error", "double"],
+    "react/jsx-max-props-per-line": ["error", { "maximum": 3 }],
+    "react/jsx-sort-props": ["error", { "ignoreCase": true }],
+    "react/self-closing-comp": "error"
+  }
+}

next/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.vscode
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next/components/Footer.jsx

@@ -0,0 +1,14 @@
+import React, { Fragment } from "react";
+
+const Footer = () => {
+  return (
+    <Fragment>
+      <div className="p-2 dark:bg-black bg-[#ecf8f9] font-sans text-sm left-15 bottom-10">
+        &copy; {new Date().getFullYear()} Amr Abed - Built with {" "}
+        <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>
+      </div>
+    </Fragment>
+  );
+};
+
+export default Footer;

next/components/Header.jsx

@@ -0,0 +1,95 @@
+"use client";
+import React, { Fragment, useContext, useEffect, useState } from "react";
+import Link from "next/link";
+import { FaSun, FaMoon } from "react-icons/fa";
+
+
+import MobileNavbar from "./mobile/Sidebar";
+import NavbarMobile from "./mobile/Header";
+import { NavbarMenu } from "../data/navbar";
+
+import { ThemeContext } from "@/context/themeContext";
+
+const Header = () => {
+  const [top, setTop] = useState("0");
+  const [showMenu, setShowMenu] = useState(false);
+
+  const { setThemeFun, theme } = useContext(ThemeContext);
+
+  // Logic for Navbar Hide and Show on scrolling behaviour
+  useEffect(() => {
+    let prevScrollPos = window.scrollY;
+
+    const handleScroll = () => {
+      const currentScrollPos = window.scrollY;
+
+      if (prevScrollPos > currentScrollPos) {
+        setTop("0"); // Show the navbar
+      } else {
+        setTop("-80px"); // Hide the navbar
+      }
+
+      prevScrollPos = currentScrollPos;
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      // Cleanup: Remove the event listener when the component unmounts
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <Fragment>
+      {/* Desktop Header */}
+      <div
+        className='w-full h-[70px] px-8 bg-[rgba(255,255,255,0.8)] dark:bg-[rgba(0,0,0,0.8)] backdrop-filter backdrop-blur-lg hidden md:flex justify-between items-center gap-4 shadow-sm shadow-gray-300 dark:shadow-gray-800 fixed z-10 transition-all duration-500'
+        style={{ top: top }}
+      >
+        {/* Name Logo */}
+        <a href="#">
+          <p className='text-white-400 dark:text-black-400 flex'>
+            <span className='text-lg font-bold'>AMR ABED</span>
+          </p>
+        </a>
+        <div className='h-full flex gap-4'>
+          {/* Navbar Links */}
+          {NavbarMenu.map((navbar) => (
+            <Link
+              className={"text-[#665DC3] dark:text-[#07d0e5] font-semibold"}
+              href={navbar.link}
+              key={navbar.name}
+            >
+              <div className='h-full pb-1 hover:pb-0 px-2 flex items-center hover:border-b-4  border-[#665DC3] dark:border-[#07d0e5] transition-all'>
+                {navbar.name}
+              </div>
+            </Link>
+          ))}
+        </div>
+        {/* Toggle Theme button */}
+        <div className='flex items-center gap-4'>
+          <button
+            className='text-xl text-[#665DC3] dark:text-[#07d0e5] hover:scale-110'
+            onClick={setThemeFun}
+          >
+            {theme === "dark" ? <FaSun /> : <FaMoon />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Header */}
+      <NavbarMobile
+        setShowMenu={setShowMenu}
+        setThemeFun={setThemeFun}
+        showMenu={showMenu}
+        theme={theme}
+        top={top}
+      />
+
+      {/* SideMenu For Mobile Screen */}
+      <MobileNavbar setShowMenu={setShowMenu} showMenu={showMenu} />
+    </Fragment>
+  );
+};
+
+export default Header;

next/components/Layout.jsx

@@ -0,0 +1,16 @@
+// import Social from './Social';
+import { Header } from './Header';
+
+const Layout = ({ children }) => {
+    return (
+        <div className="flex h-screen bg-gray-100 dark:bg-gray-800">
+            <div className="w-1/5 p-8 bg-white dark:bg-gray-900">
+                <Header />
+                {/* <Social /> */}
+            </div>
+            <div className="flex-1 p-8">{children}</div>
+        </div>
+    );
+};
+
+export default Layout;

next/components/List.jsx

@@ -0,0 +1,53 @@
+"use client";
+import React, { Fragment, useState, useEffect, useRef } from "react";
+
+const List = (id, title, view) => {
+  const [istechStack, setIsTechStack] = useState(false);
+  const itemRef = useRef();
+  const boxRef = useRef();
+
+  useEffect(() => {
+    const getScreenWidth = () =>
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth;
+
+    const techStackObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsTechStack(entry.isIntersecting);
+      },
+      {
+        rootMargin: `${getScreenWidth() <= 700 ? "-100px" : "-250px"}`,
+      }
+    );
+
+    techStackObserver.observe(itemRef.current);
+
+    if (istechStack) {
+      boxRef.current.classList.add("pop-up-child");
+    } else {
+      boxRef.current.classList.remove("pop-up-child");
+    }
+  }, [istechStack]);
+
+  return (
+    <Fragment>
+      <section id={id}>
+        <div
+          className='min-h-[100vh] overflow-x-hidden content-evenly items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm overflow-hidden'
+          ref={itemRef}
+        >
+          <h2 className='text-3xl font-bold text-center p-4 flex justify-center items-center gap-3'>{title}</h2>
+          <div
+            className='pop-down-child flex min-h-[450px] py-[30px] px-[20px] md:px-[100px] flex-wrap justify-center items-center gap-5'
+            ref={boxRef}
+          >
+            {view}
+          </div>
+        </div>
+      </section>
+    </Fragment>
+  );
+};
+
+export default List;

next/components/ScrollToTopButton.jsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { FaArrowUp } from 'react-icons/fa';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  return (
+    <div className="scroll-to-top flex justify-center">
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-button">
+          <FaArrowUp />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

next/components/Social.jsx

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import Link from "next/link";
+
+import { social } from "@/data/social";
+
+const SocialMedia = () => {
+  return (
+    <Fragment>
+      <div className='fixed right-10 bottom-10 flex text-center flex-col gap-4 z-10'>
+        {social.map((profile) => (
+          <Link className='w-fit' href={profile.link} key={profile.name} target="_blank" rel="noreferrer">
+            <div
+              className={"p-2 rounded-full text-xl text-white"}
+              style={{ background: "#000000" }}
+            >
+              {profile.icon}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </Fragment>
+  );
+};
+
+export default SocialMedia;