Addcertsection

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "clsx",
+    "Skillset"
+  ]
+}

README.md

@@ -1,30 +1,28 @@
-[![Watch tutorial here](https://img.youtube.com/vi/sUKptmUVIBM/0.jpg)](https://youtu.be/sUKptmUVIBM)
-
-# [Watch video here](https://youtu.be/sUKptmUVIBM)
-
-## What you will learn
-
-- Latest Next.js 13 features
-- Next.js App Router
-- Next.js Server Actions
-- Client & Server Components
-- TypeScript (Beginner & Intermediate)
-- Tailwind CSS
-- Context API
-- Advanced Animations with Framer Motion
-- React.Email & Resend
-- Custom React hooks
-- Fresh, modern UI design
-- Light & Dark mode
-- Responsive website
-
-## Important
-
-If you want to be a professional developer, you have to know the fundamentals like JavaScript and CSS really well. I highly recommend you go through my [Professional JavaScript](https://bytegrad.com/courses/professional-javascript) and [Professional CSS](https://bytegrad.com/courses/professional-css) courses.
-
-I'm close to releasing a complete React & Next.js course. Get on the email list to receive early-bird pricing: [link](https://email.bytegrad.com/).
-
-## Setup
-
-1. Add RESEND_API_KEY environment variable in .env.local
-2. In the send-email.ts action file, change the "to" email to your own email
+👋 Hey, you. I'm Jerome Amos. I'm a senior full-stack developer with 10 plus years of experience. I enjoy building sites & apps. My focus is React(Typescript)| Next.js.
+
+About Me
+With over 10 years of hands-on expertise in software development, I bring a dynamic blend of creativity and technical proficiency to every project. My journey began with a rigorous boot camp education, where I honed my skills in full-stack development and discovered my passion for crafting innovative digital solutions.
+
+Throughout my career, I've had the privilege of contributing to the success of renowned brands such as NBC News, Today Show, MSNBC, Chanel, David Yurman, Clover POS, AceTools, Levi's, and CKOne, among others. These experiences have not only enriched my technical capabilities but also sharpened my ability to deliver high-quality, user-centric applications that exceed client expectations. Currently specializing in React.js/Next.js and embracing a full-stack approach, I thrive on tackling complex challenges and transforming ideas into seamless, intuitive user experiences. Whether it's creating a robust backend systems or designing responsive front-ends, I am committed to leveraging cutting-edge technologies to drive innovation and achieve tangible results.
+
+Beyond coding, I am dedicated to continuous learning and staying at the forefront of industry trends. My adaptable mindset and collaborative spirit enable me to thrive in fast-paced environments, where teamwork and creativity are paramount. I look forward to connecting with like-minded professionals and exploring opportunities to create impactful solutions that redefine user engagement and elevate digital experiences.
+
+My current core stack is React, Next.js, Node.js, and MongoDB. I am also familiar with TypeScript and Prisma. I am always looking to learn new technologies. I am currently looking for a full-time position as a software developer.
+
+Technical Skills 🛠️
+Languages: JavaScript, TypeScript, PHP, HTML, CSS, SASS, Tailwind CSS
+Frameworks & Libraries: React, Next.js, Node.js,React Testing Library, React, Redux, GraphQL, Remix,Express, JEST, JWT, PostgreSQL, MongoDB, Prisma, React Form, Next.js, Server Action, Zustand
+Tools & Platforms: GitHub, Vercel, Apollo, Vitest
+Key Projects 📚
+Amosdesigns.net: showing my portfolio site.
+You can view these and more here.
+
+Professional Goals 🚀
+Architectural Leadership: Take a lead role in designing scalable and efficient architectures for complex systems. This could involve mentoring junior developers, conducting architectural reviews, and ensuring that the overall system design aligns with best practices and business requirements.
+Technological Mastery: Stay at the forefront of technology trends and deepen expertise in key technologies relevant to full-stack development. This might include mastering new frameworks or languages, exploring advanced topics like microservices architecture or cloud-native development, and integrating cutting-edge solutions into existing systems.
+Process Improvement: Champion process improvements within the development team or organization. This could involve implementing agile practices more effectively, introducing automation to streamline workflows (such as CI/CD pipelines), or advocating for best practices in code quality, testing, and deployment.
+Connect with Me 📬
+🐦 X
+📫 Email
+🔗 LinkedIn
+I’m looking forward to collaborating on projects that are at the intersection of technology and social good. Let’s connect! 🌍

actions/sendEmail.ts

@@ -26,8 +26,8 @@ export const sendEmail = async (formData: FormData) => {
   let data;
   try {
     data = await resend.emails.send({
-      from: "Contact Form <onboarding@resend.dev>",
-      to: "bytegrad@gmail.com",
+      from: "Contact Form <mail@amosdesigns.net>",
+      to: "mail@amosdesigns.net",
       subject: "Message from contact form",
       reply_to: senderEmail,
       react: React.createElement(ContactFormEmail, {
@@ -40,7 +40,7 @@ export const sendEmail = async (formData: FormData) => {
       error: getErrorMessage(error),
     };
   }
-
+ 
   return {
     data,
   };

app/globals.css

@@ -13,3 +13,4 @@ html.dark {
 .borderBlack {
   @apply border border-black/10;
 }
+p {text-align: left;margin-bottom: 2rem;}

app/layout.tsx

@@ -1,17 +1,18 @@
 import Header from "@/components/header";
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Quicksand } from "next/font/google";
 import ActiveSectionContextProvider from "@/context/active-section-context";
 import Footer from "@/components/footer";
 import ThemeSwitch from "@/components/theme-switch";
 import ThemeContextProvider from "@/context/theme-context";
 import { Toaster } from "react-hot-toast";
 
-const inter = Inter({ subsets: ["latin"] });
+const quicksand = Quicksand({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Ricardo | Personal Portfolio",
-  description: "Ricardo is a full-stack developer with 8 years of experience.",
+  title: "Jerome Amos | Sr. Software Engineer Portfolio | Amos Designs.net",
+  description:
+    "Jerome Amos is a Sr. Software Engineer with 10 plus years of experience.| Amos Designs.net",
 };
 
 export default function RootLayout({
@@ -22,7 +23,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="!scroll-smooth">
       <body
-        className={`${inter.className} bg-gray-50 text-gray-950 relative pt-28 sm:pt-36 dark:bg-gray-900 dark:text-gray-50 dark:text-opacity-90`}
+        className={`${quicksand.className} bg-gray-50 text-gray-950 relative pt-28 sm:pt-36 dark:bg-gray-900 dark:text-gray-50 dark:text-opacity-90`}
       >
         <div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"></div>
         <div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394]"></div>

app/page.tsx

@@ -4,17 +4,25 @@ import Experience from "@/components/experience";
 import Intro from "@/components/intro";
 import Projects from "@/components/projects";
 import SectionDivider from "@/components/section-divider";
+import Service from "@/components/service";
 import Skills from "@/components/skills";
+import Certification from "@/components/certification";
 
 export default function Home() {
   return (
     <main className="flex flex-col items-center px-4">
       <Intro />
       <SectionDivider />
       <About />
-      <Projects />
+      <SectionDivider />
       <Skills />
+      <SectionDivider />
+      <Service />
+      <SectionDivider />
       <Experience />
+      <Certification/>
+      <Projects />
+      <SectionDivider />
       <Contact />
     </main>
   );

components/about.tsx

@@ -18,32 +18,54 @@ export default function About() {
       id="about"
     >
       <SectionHeading>About me</SectionHeading>
-      <p className="mb-3">
-        After graduating with a degree in{" "}
-        <span className="font-medium">Accounting</span>, I decided to pursue my
-        passion for programming. I enrolled in a coding bootcamp and learned{" "}
-        <span className="font-medium">full-stack web development</span>.{" "}
-        <span className="italic">My favorite part of programming</span> is the
-        problem-solving aspect. I <span className="underline">love</span> the
-        feeling of finally figuring out a solution to a problem. My core stack
-        is{" "}
-        <span className="font-medium">
+      <p>
+        With over 10 years of hands-on expertise in software development, I
+        bring a dynamic blend of creativity and technical proficiency to every
+        project. My journey began with a rigorous boot camp education, where I
+        honed my skills in <span className="font-medium">full-stack</span>{" "}
+        development and discovered my passion for crafting innovative digital
+        solutions.
+      </p>
+      <p>
+        Throughout my career, I've had the privilege of contributing to the
+        success of renowned brands such as{" "}
+        <span className="font-extrabold">
+          NBC News, Today Show, MSNBC, Chanel, David Yurman, Clover POS,
+          AceTools, Levi's, and CKOne,
+        </span>{" "}
+        among others. These experiences have not only enriched my technical
+        capabilities but also sharpened my ability to deliver{" "}
+        <span className="font-medium">high-quality</span>, user-centric
+        applications that exceed client expectations. Currently specializing in
+        React.js/Next.js and embracing a full-stack approach, I thrive on
+        tackling complex challenges and transforming ideas into seamless,
+        intuitive user experiences. Whether it's architecting robust backend
+        systems or{" "}
+        <span className="font-extrabold">designing responsive frontends</span>,
+        I am committed to leveraging{" "}
+        <span className="font-medium"> cutting-edge</span> technologies to drive
+        innovation and achieve tangible results.
+      </p>
+      <p>
+        Beyond coding, I am dedicated to continuous learning and staying at the
+        forefront of industry trends. My adaptable mindset and collaborative
+        spirit enable me to thrive in{" "}
+        <span className="font-extrabold">fast-paced environments</span>, where
+        teamwork and creativity are paramount. I look forward to connecting with
+        like-minded professionals and exploring opportunities to create
+        impactful solutions that redefine user engagement and elevate digital
+        experiences.
+      </p>
+      <p>
+        My current core stack is{" "}
+        <span className="font-extrabold">
           React, Next.js, Node.js, and MongoDB
         </span>
         . I am also familiar with TypeScript and Prisma. I am always looking to
         learn new technologies. I am currently looking for a{" "}
-        <span className="font-medium">full-time position</span> as a software
+        <span className="font-extrabold">full-time position</span> as a software
         developer.
       </p>
-
-      <p>
-        <span className="italic">When I'm not coding</span>, I enjoy playing
-        video games, watching movies, and playing with my dog. I also enjoy{" "}
-        <span className="font-medium">learning new things</span>. I am currently
-        learning about{" "}
-        <span className="font-medium">history and philosophy</span>. I'm also
-        learning how to play the guitar.
-      </p>
     </motion.section>
   );
 }

components/certification.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import SectionHeading from "./section-heading";
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+import { schoolData } from "@/lib/data";
+import { useSectionInView } from "@/lib/hooks";
+import { useTheme } from "@/context/theme-context";
+
+export default function Certification() {
+  const { ref } = useSectionInView("Certification");
+  const { theme } = useTheme();
+
+  return (
+    <section
+      id="certification"
+      ref={ref}
+      className="scroll-mt-28 mb-28 sm:mb-40"
+    >
+      <SectionHeading>My Certification</SectionHeading>
+      <VerticalTimeline lineColor="">
+        {schoolData.map((item, index) => (
+          <React.Fragment key={index}>
+            <VerticalTimelineElement
+              contentStyle={{
+                background:
+                  theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
+                boxShadow: "none",
+                border: "1px solid rgba(0, 0, 0, 0.05)",
+                textAlign: "left",
+                padding: "1.3rem 2rem",
+              }}
+              contentArrowStyle={{
+                borderRight:
+                  theme === "light"
+                    ? "0.4rem solid #9ca3af"
+                    : "0.4rem solid rgba(255, 255, 255, 0.5)",
+              }}
+              date={item.date}
+              icon={item.icon}
+              iconStyle={{
+                background:
+                  theme === "light" ? "white" : "rgba(255, 255, 255, 0.15)",
+                fontSize: "1.5rem",
+              }}
+            >
+              <h3 className="font-semibold capitalize">{item.title}</h3>
+              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
+                {item.description}
+              </p>
+              <h3 className="font-semibold capitalize">Skillset: </h3>
+              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
+                {item.skills}
+              </p>
+            </VerticalTimelineElement>
+          </React.Fragment>
+        ))}
+      </VerticalTimeline>
+    </section>
+  );
+}

components/contact.tsx

@@ -10,6 +10,7 @@ import toast from "react-hot-toast";
 
 export default function Contact() {
   const { ref } = useSectionInView("Contact");
+  const formRef = React.useRef<HTMLFormElement>(null);
 
   return (
     <motion.section
@@ -31,37 +32,39 @@ export default function Contact() {
     >
       <SectionHeading>Contact me</SectionHeading>
 
-      <p className="text-gray-700 -mt-6 dark:text-white/80">
+      <p className="-mt-6 text-gray-700 dark:text-white/80">
         Please contact me directly at{" "}
-        <a className="underline" href="mailto:example@gmail.com">
-          example@gmail.com
+        <a className="underline" href="mailto:mail@amosdesigns.net">
+          mail@amosdesigns.net
         </a>{" "}
         or through this form.
       </p>
 
       <form
-        className="mt-10 flex flex-col dark:text-black"
+        ref={formRef}
+        className="flex flex-col mt-10 dark:text-black"
         action={async (formData) => {
           const { data, error } = await sendEmail(formData);
-
           if (error) {
             toast.error(error);
             return;
           }
+          formRef.current?.reset();
 
           toast.success("Email sent successfully!");
         }}
       >
         <input
-          className="h-14 px-4 rounded-lg borderBlack dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 transition-all dark:outline-none"
+          className="px-4 transition-all rounded-lg h-14 borderBlack dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 dark:outline-none"
           name="senderEmail"
           type="email"
+
           required
           maxLength={500}
           placeholder="Your email"
         />
         <textarea
-          className="h-52 my-3 rounded-lg borderBlack p-4 dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 transition-all dark:outline-none"
+          className="p-4 my-3 transition-all rounded-lg h-52 borderBlack dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 dark:outline-none"
           name="message"
           placeholder="Your message"
           required

components/experience.tsx

@@ -49,6 +49,10 @@ export default function Experience() {
               <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                 {item.description}
               </p>
+              <h3 className="font-semibold capitalize">Skillset: </h3>
+              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
+                {item.requirements}
+              </p>
             </VerticalTimelineElement>
           </React.Fragment>
         ))}

components/footer.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 
 export default function Footer() {
+  const currentYear = new Date().getFullYear();
   return (
-    <footer className="mb-10 px-4 text-center text-gray-500">
-      <small className="mb-2 block text-xs">
-        &copy; 2030 Ricardo. All rights reserved.
+    <footer className="px-4 mb-10 text-center text-gray-500">
+      <small className="block mb-2 text-xs">
+        &copy;2000 - {currentYear} AmosDesigns.net. All rights reserved.
       </small>
-      <p className="text-xs">
-        <span className="font-semibold">About this website:</span> built with
-        React & Next.js (App Router & Server Actions), TypeScript, Tailwind CSS,
-        Framer Motion, React Email & Resend, Vercel hosting.
-      </p>
     </footer>
   );
 }