diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..d3534d9e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "cSpell.words": [ + "clsx", + "Skillset" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 518412d3..2efe27fd 100644 --- a/README.md +++ b/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! 🌍 diff --git a/actions/sendEmail.ts b/actions/sendEmail.ts index 047508da..36847e06 100644 --- a/actions/sendEmail.ts +++ b/actions/sendEmail.ts @@ -26,8 +26,8 @@ export const sendEmail = async (formData: FormData) => { let data; try { data = await resend.emails.send({ - from: "Contact Form ", - to: "bytegrad@gmail.com", + from: "Contact Form ", + 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, }; diff --git a/app/favicon.ico b/app/favicon.ico index f155228d..0924df59 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index 95827716..d50d613c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -13,3 +13,4 @@ html.dark { .borderBlack { @apply border border-black/10; } +p {text-align: left;margin-bottom: 2rem;} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 38cb5595..d45fc1fa 100644 --- a/app/layout.tsx +++ b/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 (
diff --git a/app/page.tsx b/app/page.tsx index 63955de3..77b2f7e3 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,7 +4,9 @@ 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 ( @@ -12,9 +14,15 @@ export default function Home() { - + + + + + + + ); diff --git a/components/about.tsx b/components/about.tsx index 5383cb71..1d33aa8b 100644 --- a/components/about.tsx +++ b/components/about.tsx @@ -18,32 +18,54 @@ export default function About() { id="about" > About me -

- After graduating with a degree in{" "} - Accounting, I decided to pursue my - passion for programming. I enrolled in a coding bootcamp and learned{" "} - full-stack web development.{" "} - My favorite part of programming is the - problem-solving aspect. I love the - feeling of finally figuring out a solution to a problem. My core stack - is{" "} - +

+ 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 architecting robust backend + systems or{" "} + designing responsive frontends, + 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 + full-time position as a software developer.

- -

- When I'm not coding, I enjoy playing - video games, watching movies, and playing with my dog. I also enjoy{" "} - learning new things. I am currently - learning about{" "} - history and philosophy. I'm also - learning how to play the guitar. -

); } diff --git a/components/certification.tsx b/components/certification.tsx new file mode 100644 index 00000000..af5159c7 --- /dev/null +++ b/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 ( +
+ My Certification + + {schoolData.map((item, index) => ( + + +

{item.title}

+

+ {item.description} +

+

Skillset:

+

+ {item.skills} +

+ + + ))} + +
+ ); +} diff --git a/components/contact.tsx b/components/contact.tsx index a85b2be1..766d8886 100644 --- a/components/contact.tsx +++ b/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(null); return ( Contact me -

+

Please contact me directly at{" "} - - example@gmail.com + + mail@amosdesigns.net {" "} or through this form.

{ const { data, error } = await sendEmail(formData); - if (error) { toast.error(error); return; } + formRef.current?.reset(); toast.success("Email sent successfully!"); }} >