Merge pull request #3 from meeIbrahim/dev

Dev

src/App.tsx

@@ -3,6 +3,7 @@ import Home from "./components/Home";
 import About from "./components/About";
 import Projects from "./components/Projects";
 import Skills from "./components/Skills";
+import Experience from "./components/Experience";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Navbar />
         <Home />
         <About />
+        <Experience />
         <Projects />
         <Skills />
       </div>

src/components/About.tsx

@@ -1,13 +1,14 @@
 import { HiArrowNarrowDown } from "react-icons/hi";
 import { Link } from "react-scroll";
-
+import { IdentificationIcon } from "@heroicons/react/24/solid";
 const About = () => {
   return (
     <div id="about" className="w-full h-screen">
       <div className="flex flex-col justify-center items-center w-full h-full">
         <div className=" flex flex-col justify-center items-center w-4/6">
+          <IdentificationIcon className="py-11 w-10 inline-block" />
           <p className="text-4xl font-bold inline border-b-4 border-cyan-950 text-center">
-            About
+            About Me
           </p>
           <div className="py-5"></div>
           <div className="py-16 rounded-md bg-cyan-950 max-w-[1000px] w-full grid sm:grid-cols-2 gap-8 px-4">
@@ -28,12 +29,12 @@ const About = () => {
           </div>
           <div className="py-2">
             <Link
-              to="work"
+              to="experiences"
               smooth
               duration={500}
               className="group text-white w-fit px-6 py-3 my-2 flex items-center rounded-md bg-gradient-to-r from-cyan-900 to-blue-900 cursor-pointer"
             >
-              Work
+              Experience
               <span className="">
                 <HiArrowNarrowDown size={25} className="ml-3" />
               </span>

src/components/Experience.tsx

@@ -0,0 +1,85 @@
+import { BriefcaseIcon } from "@heroicons/react/24/solid";
+import emumba from "../assets/emumba.jpg";
+
+export default function Experience() {
+  return (
+    <section id="experiences" className="w-full h-screen">
+      <div className="container px-5 py-10 mx-auto">
+        <div className="flex flex-col w-full items-center mb-20">
+          <BriefcaseIcon className="w-10 py-11 mx-auto inline-block mb-4" />
+          <h1 className="sm:text-4xl text-3xl inline border-b-4 border-cyan-950 font-medium title-font mb-4">
+            My Experience
+          </h1>
+          <div className="container px-5 py-10 mx-auto">
+            <div className="flex flex-col items-center">
+              <div className="grid grid-cols-3 gap-8">
+                <div className="flex items-center justify-end justify-top">
+                  <div className="h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center">
+                    <img src={emumba} className="rounded-2xl" />
+                  </div>
+                </div>
+                <div className="col-span-2 flex flex-col">
+                  <h3 className="text-xl font-bold mb-2">
+                    Software Development Engineer in Test
+                  </h3>
+                  <p className="text-sm text-gray-500 mb-2">
+                    July 2022 - Current
+                  </p>
+                  <p className="">
+                    In my role as an experienced Software Development Engineer
+                    in Test (SDET), I have successfully fostered collaboration
+                    between automation engineers and the manual testing team,
+                    streamlining processes and significantly reducing testing
+                    timelines. By effectively engaging with clients, I ensure
+                    alignment with their expectations and contribute to the
+                    development of robust processes for improved code quality
+                    and efficient automation of user stories. My
+                    responsibilities extend to the regular design and
+                    enhancement of frameworks, reinforcing the automation
+                    suite's reliability and usability. Through these efforts, I
+                    aim to minimize the manual team's workload, elevate
+                    application quality, and deliver enhanced value. This role
+                    also entails mentorship of junior team members and
+                    leveraging my expertise to help them grow
+                  </p>
+                </div>
+                <div className="flex items-center justify-end justify-top">
+                  <div className="h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center">
+                    <img src={emumba} className="rounded-2xl" />
+                  </div>
+                </div>
+                <div className="col-span-2 flex flex-col">
+                  <h3 className="text-xl font-bold mb-2">QA Engineer</h3>
+                  <p className="text-sm text-gray-500 mb-2">
+                    Sep 2021 - July 2022
+                  </p>
+                  <p className="">
+                    In this role as a QA Engineer, I played a pivotal role in
+                    ensuring the quality and reliability of web applications,
+                    spanning both front-end and back-end, as well as
+                    infrastructure components. My contributions went beyond
+                    routine testing, encompassing process improvements and the
+                    creation of comprehensive test cases and test plans. One of
+                    my significant accomplishments was designing a test bed that
+                    closely mirrored our client's expected infrastructure for
+                    testing purposes. This initiative enhanced the value of our
+                    testing efforts by providing a more realistic environment
+                    for evaluation. This test bed was meticulously managed and
+                    deployed using Terraform, ensuring consistency and
+                    efficiency in our testing processes As part of my
+                    responsibilities, I assumed the role of managing AWS
+                    resources for the team. This involved provisioning,
+                    configuring, and maintaining AWS infrastructure to support
+                    our testing needs. By taking on this role, I streamlined
+                    resource allocation and management, optimizing our testing
+                    workflowIn
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Navbar.tsx

@@ -1,11 +1,6 @@
 import { useState } from "react";
 import resume from "../assets/resume.pdf";
-import {
-  FaBars,
-  FaTimes,
-  FaGithub,
-  FaLinkedin
-} from "react-icons/fa";
+import { FaBars, FaTimes, FaGithub, FaLinkedin } from "react-icons/fa";
 import { HiOutlineMail } from "react-icons/hi";
 import { BsFillPersonLinesFill } from "react-icons/bs";
 import { Link } from "react-scroll";
@@ -31,6 +26,11 @@ const Navbar = () => {
             About
           </Link>
         </button>
+        <button>
+          <Link to="experiences" smooth={true} duration={500}>
+            Experience
+          </Link>
+        </button>
         <button>
           <Link to="work" smooth={true} duration={500}>
             Work
@@ -41,11 +41,6 @@ const Navbar = () => {
             Skills
           </Link>
         </button>
-        <button>
-          <Link to="contact" smooth={true} duration={500}>
-            Contact
-          </Link>
-        </button>
       </ul>
       {/* Hamburger */}
       <div onClick={handleClick} className="md:hidden z-10">
@@ -72,20 +67,25 @@ const Navbar = () => {
         </li>
         <li className="py-6 text-4xl">
           {" "}
-          <Link onClick={handleClick} to="skills" smooth={true} duration={500}>
-            Skills
+          <Link
+            onClick={handleClick}
+            to="experiences"
+            smooth={true}
+            duration={500}
+          >
+            Experience
           </Link>
         </li>
         <li className="py-6 text-4xl">
           {" "}
-          <Link onClick={handleClick} to="work" smooth={true} duration={500}>
-            Work
+          <Link onClick={handleClick} to="skills" smooth={true} duration={500}>
+            Skills
           </Link>
         </li>
         <li className="py-6 text-4xl">
           {" "}
-          <Link onClick={handleClick} to="contact" smooth={true} duration={500}>
-            Contact
+          <Link onClick={handleClick} to="work" smooth={true} duration={500}>
+            Work
           </Link>
         </li>
       </ul>

src/components/Projects.tsx

@@ -3,7 +3,7 @@ import { projects } from "../data/projects";
 
 export default function Projects() {
   return (
-    <section id="work" className="body-font w-full h-screen">
+    <section id="work" className="body-font w-full h-screen mt-20">
       <div className="container px-5 py-10 mx-auto text-center lg:px-40">
         <div className="flex flex-col w-full mb-20  items-center">
           <ComputerDesktopIcon className="py-11 mx-auto inline-block w-10 mb-4" />

src/components/Skills.tsx

@@ -5,12 +5,12 @@ export default function Skills() {
   return (
     <section id="skills" className="w-full h-screen">
       <div className="container px-5 py-10 mx-auto">
-        <div className="text-center mb-20">
-          <CpuChipIcon className="py-11 w-10 inline-block mb-4" />
-          <h1 className="sm:text-4xl text-3xl  font-medium title-font text-white mb-4">
+        <div className="flex flex-col w-full mb-20  items-center">
+          <CpuChipIcon className="py-11 mx-auto w-10 inline-block" />
+          <h1 className="sm:text-4xl text-3xl inline border-b-4 border-cyan-950 font-medium title-font mb-4">
             Skills &amp; Technologies
           </h1>
-          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+          <p className="mt-2 text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
             ipsa delectus eum quo voluptas aspernatur accusantium distinctio
             possimus est.