hqasmei · JamShou · Jan 29, 2023 · Jan 31, 2023 · Aug 20, 2023 · Aug 20, 2023
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+package-lock.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -6,10 +6,6 @@ First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

diff --git a/app/head.tsx b/app/head.tsx
@@ -1,10 +1,13 @@
 export default function Head() {
   return (
     <>
-      <title>Create Next App</title>
+      <title>Jamal Shoubaki</title>
       <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <meta name="description" content="Generated by create next app" />
-      <link rel="icon" href="/favicon.ico" />
+      <meta name="description" content="Welcome to my Portfolio!" />
+      <link
+        rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👋</text></svg>"
+      />
     </>
   )
-}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,8 @@
-import '../styles/globals.css'
+"use client"
+import "../styles/globals.css"
+import Navbar from "@/components/Navbar"
+import Footer from "@/components/Footer"
+import { ThemeProvider } from "next-themes"
 
 export default function RootLayout({
   children,
@@ -12,7 +16,13 @@ export default function RootLayout({
         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
       */}
       <head />
-      <body>{children}</body>
+      <body className="dark:bg-stone-900">
+        <ThemeProvider enableSystem={true} attribute="class">
+          <Navbar />
+          {children}
+          <Footer />
+        </ThemeProvider>
+      </body>
     </html>
   )
-}
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,91 +1,14 @@
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from '../styles/page.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
+import AboutSection from "@/components/AboutSection"
+import HeroSection from "@/components/HeroSection"
+import ProjectsSection from "@/components/ProjectsSection"
+import WorkSection from "@/components/WorkSection"
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-        <div className={styles.thirteen}>
-          <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
-        </div>
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+    <main className="mx-auto max-w-3xl px-4 sm:px-6 md:max-w-5xl ">
+      <HeroSection />
+      <AboutSection />
+      <WorkSection />
+      <ProjectsSection />
     </main>
   )
-}
+}
diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import Image from "next/image";
+
+const skills = [
+  { skill: "Spring Boot" },
+  { skill: "Java" },
+  { skill: "SQL" },
+  { skill: "Git" },
+  { skill: "Agile" },
+  { skill: "GitHub" },
+  { skill: "Jenkins" },
+  { skill: "React" },
+  { skill: "TypeScript" },
+  { skill: "Next.js" },
+  { skill: "Tailwind CSS" },
+];
+
+const AboutSection = () => {
+  return (
+    <section id="about">
+      <div className="my-12 pb-12 md:pt-16 md:pb-48">
+        <h1 className="text-center font-bold text-4xl">
+          About Me
+          <hr className="w-6 h-1 mx-auto my-4 bg-gray-500 border-0 rounded"></hr>
+        </h1>
+
+        <div className="flex flex-col space-y-10 items-stretch justify-center align-top md:space-x-10 md:space-y-0 md:p-4 md:flex-row md:text-left">
+          <div className="md:w-1/2 ">
+            <h1 className="text-center text-2xl font-bold mb-6 md:text-left ">
+              Get to know me!
+            </h1>
+            <p>
+              Hi, my name is Jamal and I am a{" "}
+              <span className="font-bold text-gray-500">{"highly ambitious"}</span>,
+              <span className="font-bold text-gray-500">{" self-motivated"}</span>, and
+              <span className="font-bold text-gray-500">{" driven"}</span> software engineer
+              based in Dallas, TX.
+            </p>
+            <br />
+            <p>
+              I graduated from University of Illinois at Chicago, 2019 with a BS
+              in Computer Science and have been working in the field ever
+              since.
+            </p>
+            <br />
+            <p>
+              I&#39;m engaged in a diverse array of hobbies and passions that
+              consistently occupy my time. Whether it&#39;s reading, playing the
+              guitar, traveling, or weightlifting, I have an ongoing enthusiasm
+              for embracing novel experiences and continuously expanding my
+              knowledge.
+            </p>
+            <br />
+            <p>
+              I believe everyone should{" "}
+              <span className="font-bold text-gray-500">
+                never stop growing
+              </span>{" "}
+              and that&#39;s what I strive to do, I have a passion for
+              technology and a desire to always push the limits of what is
+              possible. I am excited to see where my career takes me and am
+              always open to new opportunities.
+            </p>
+          </div>
+          <div className="text-center md:w-1/2 md:text-left">
+            <h1 className="text-2xl font-bold mb-6">My Skills</h1>
+            <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
+              {skills.map((item, idx) => {
+                return (
+                  <p
+                    key={idx}
+                    className="bg-gray-200 px-4 py-2 mr-2 mt-2 text-gray-500 rounded font-semibold"
+                  >
+                    {item.skill}
+                  </p>
+                );
+              })}
+            </div>
+            <Image
+              src="/hero-image.png"
+              alt=""
+              width={350}
+              height={350}
+              className="hidden md:block md:relative md:bottom-4 md:top-5 md:left-25 md:z-0"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutSection;
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { AiOutlineGithub, AiOutlineLinkedin } from "react-icons/ai";
+
+const Footer = () => {
+  return (
+    <footer className="mx-auto max-w-3xl px-4 sm:px-6 md:max-w-5xl ">
+      <hr className="w-full h-0.5 mx-auto mt-8 bg-neutral-200 border-0"></hr>
+      <div className="mx-auto  p-4 flex flex-col text-center text-neutral-900 md:flex-row md:justify-between">
+        <div className="flex flex-row items-center justify-center space-x-1 text-neutral-500 dark:text-neutral-100">
+          © 2023 Jamal Shoubaki<a href="/" className="hover:underline"></a>
+        </div>
+        <div className="flex flex-row items-center justify-center space-x-2 mb-1">
+          <a href="https://github.com/JamShou" rel="noreferrer" target="_blank">
+            <AiOutlineGithub
+              className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
+              size={30}
+            />
+          </a>
+          <a
+            href="https://www.linkedin.com/in/jamal-shoubaki/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <AiOutlineLinkedin
+              className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
+              size={30}
+            />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;