Clean up home page

amrabed · Sep 2, 2024 · 9e67520 · 9e67520
1 parent 0385487
commit 9e67520
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 99 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,20 +1,86 @@
 import dynamic from "next/dynamic";
+import Image from "next/image";
 
+import Section from "@/components/Section";
 import { MainHeader } from "@/components/header";
+import certificates from "@/data/certifications";
+import degrees from "@/data/degrees";
+import skills from "@/data/skills";
+import type { Certification, Degree, Skill } from "@/types";
+import "@/types";
 
+const Intro = dynamic(() => import("@/components/intro"));
 const SocialMedia = dynamic(() => import("@/components/social"));
-const Intro = dynamic(() => import("@/sections/intro"));
-const Skills = dynamic(() => import("@/sections/skills"));
-const Certifications = dynamic(() => import("@/sections/certifications"));
-const Education = dynamic(() => import("@/sections/education"));
+
+const Skills = () => (
+  <Section id="skills" title="Technical Skills">
+    {Object.values(skills).map((skill: Skill) => (
+      <div
+        className="transition-all duration-700 section-item md:py-5 w-[120px] md:w-[150px]"
+        key={skill.name}
+      >
+        <p className="md:text-4xl text-2xl">{skill.icon}</p>
+        <p>{skill.name}</p>
+      </div>
+    ))}
+  </Section>
+);
+
+const Certifications = () => (
+  <Section id="certifications" title="Certifications">
+    {certificates.map((certificate: Certification) => (
+      <div className="transition-all duration-700" key={certificate.title}>
+        <a href={certificate.link} target="_blank">
+          <div className="section-item p-3 md:p-1">
+            <Image
+              src={certificate.badge}
+              alt={`Badge for ${certificate.title}`}
+              width={150}
+              height={150}
+            />
+            <p className="text-nowrap md:text-xl">{certificate.title}</p>
+            <p className="text-primary">{certificate.organization.name}</p>
+            <p className="text-secondary">{certificate.date}</p>
+          </div>
+        </a>
+      </div>
+    ))}
+  </Section>
+);
+
+const Degrees = () => (
+  <Section id="degrees" title="Education">
+    {degrees.map((degree: Degree) => (
+      <div className="transition-all duration-700 gap-6" key={degree.title}>
+        <a href={degree.university.url} target="_blank">
+          <div className="section-item">
+            <Image
+              src={degree.university.logo ?? ""}
+              alt={`${degree.university.name} logo`}
+              height={150}
+              width={150}
+            />
+            <p className="text-xl md:text-2xl text-foreground">
+              {degree.title}
+            </p>
+            <p className="dark:text-primary-dark text-primary">
+              {degree.university.name}
+            </p>
+            <p className="text-secondary">{degree.duration}</p>
+          </div>
+        </a>
+      </div>
+    ))}
+  </Section>
+);
 
 const Home = () => (
   <>
     <MainHeader />
     <Intro />
     <Skills />
     <Certifications />
-    <Education />
+    <Degrees />
     <SocialMedia />
   </>
 );

diff --git a/src/sections/intro.jsx → src/components/intro.jsx b/src/sections/intro.jsx → src/components/intro.jsx
@@ -70,7 +70,7 @@ const Intro = () => {
             {/* Profile Name */}
             <p className="text-2xl md:text-4xl py-2 font-sans text-center text-nowrap">
               I&apos;m
-              <span className="text-primary dark:text-primary-dark">
+              <span className="text-primary">
                 {" a"}
                 <TypeAnimation
                   sequence={[

diff --git a/src/sections/certifications.tsx b/src/sections/certifications.tsx
diff --git a/src/sections/education.tsx b/src/sections/education.tsx
diff --git a/src/sections/skills.tsx b/src/sections/skills.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 import { nextui } from "@nextui-org/react";
 
@@ -14,14 +15,18 @@ const config: Config = {
       themes: {
         dark: {
           colors: {
-            primary: "#07d0e5",
-            secondary: "#333333",
+            primary: colors.indigo[300],
+            secondary: colors.zinc[400],
+            foreground: colors.slate[400],
+            background: colors.slate[950],
           },
         },
         light: {
           colors: {
-            primary: "#006994",
-            secondary: "#f7f7f7",
+            primary: colors.indigo[600],
+            secondary: colors.zinc[600],
+            foreground: colors.slate[600],
+            background: colors.white,
           },
         },
       },