ByteGrad · RajkumarManala1 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/.claude/launch.json b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "next-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}
diff --git a/.claude/worktrees/serene-wu b/.claude/worktrees/serene-wu
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.blame.editorDecoration.enabled": true
+}
diff --git a/README.md b/README.md
@@ -1,30 +1 @@
-[![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
+Portfolio
diff --git a/actions/sendEmail.ts b/actions/sendEmail.ts
@@ -5,9 +5,11 @@ import { Resend } from "resend";
 import { validateString, getErrorMessage } from "@/lib/utils";
 import ContactFormEmail from "@/email/contact-form-email";
 
-const resend = new Resend(process.env.RESEND_API_KEY);
+
 
 export const sendEmail = async (formData: FormData) => {
+
+  const resend = new Resend(process.env.RESEND_API_KEY);
   const senderEmail = formData.get("senderEmail");
   const message = formData.get("message");
 
@@ -27,7 +29,7 @@ export const sendEmail = async (formData: FormData) => {
   try {
     data = await resend.emails.send({
       from: "Contact Form <onboarding@resend.dev>",
-      to: "bytegrad@gmail.com",
+      to: "manalarajkumar.rm@gmail.com",
       subject: "Message from contact form",
       reply_to: senderEmail,
       react: React.createElement(ContactFormEmail, {

diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,12 +6,14 @@ import Footer from "@/components/footer";
 import ThemeSwitch from "@/components/theme-switch";
 import ThemeContextProvider from "@/context/theme-context";
 import { Toaster } from "react-hot-toast";
+import Script from "next/script";   // ✅ Import Script from next/script
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Ricardo | Personal Portfolio",
-  description: "Ricardo is a full-stack developer with 8 years of experience.",
+  title: "Raj Kumar Manala | Personal Portfolio",
+  description:
+    "Raj Kumar Manala is a Data Engineer & Analyst with more than 5+ years of Expericence",
 };
 
 export default function RootLayout({
@@ -24,6 +26,20 @@ export default function RootLayout({
       <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`}
       >
+        {/* ✅ Google Analytics Script */}
+        <Script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-CD24S95HF1"
+        />
+        <Script id="google-analytics">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-CD24S95HF1');
+          `}
+        </Script>
+
         <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>
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,8 @@ import Intro from "@/components/intro";
 import Projects from "@/components/projects";
 import SectionDivider from "@/components/section-divider";
 import Skills from "@/components/skills";
-
+import CertificationsSection from "@/components/certifications"; // Import your updated certifications section
+import Education from "@/components/education";
 export default function Home() {
   return (
     <main className="flex flex-col items-center px-4">
@@ -15,6 +16,8 @@ export default function Home() {
       <Projects />
       <Skills />
       <Experience />
+      <Education/>
+      <CertificationsSection />
       <Contact />
     </main>
   );

diff --git a/components/about.tsx b/components/about.tsx
@@ -17,33 +17,45 @@ export default function About() {
       transition={{ delay: 0.175 }}
       id="about"
     >
-      <SectionHeading>About me</SectionHeading>
+      <SectionHeading>About Me</SectionHeading>
+
+      <p className="mb-3">
+        I am a <span className="font-medium">Cloud AI & Data Engineer</span> with{" "}
+        <span className="font-medium">6+ years of experience</span>. My goal is simple: 
+        I build secure cloud systems that turn raw data into intelligent action within the{" "}
+        <span className="font-medium">Microsoft Azure Ecosystem</span>.
+      </p>
+
+      <p className="mb-3">
+        My technical foundation is rooted in <span className="font-medium">Data Engineering</span>. 
+        I believe that AI is only as good as the data feeding it. That’s why I specialize 
+        in using tools like <span className="font-medium">Azure Data Factory</span>,{" "}
+        <span className="font-medium">Databricks</span>, and{" "}
+        <span className="font-medium">SQL</span> to build clean, high-performance pipelines 
+        that enterprises can actually trust.
+      </p>
+
+      <p className="mb-3">
+        I build upon this stability with advanced <span className="font-medium">AI Engineering</span>. 
+        Moving beyond simple prototypes, I architect{" "}
+        <span className="font-medium">Production-Grade GenAI</span> solutions. Using{" "}
+        <span className="font-medium">Azure AI Foundry</span> and{" "}
+        <span className="font-medium">RAG (Retrieval-Augmented Generation)</span>, I create 
+        custom "Copilots" and intelligent search systems that understand your internal business data, 
+        driving real operational efficiency.
+      </p>
+
       <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">
-          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
-        developer.
+        Having recently graduated with my <span className="font-medium">Master's in Computer Science (Dec 2025)</span>{" "}
+        from <span className="font-medium">Concordia University Chicago</span>, I am open to{" "}
+        <span className="font-medium">relocation</span> and eager to bring this blend of 
+        data stability and AI innovation to a new team. Let's connect!
       </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.
+        Outside of work, I enjoy <span className="font-medium">playing soccer, the gym</span>,{" "}
+        <span className="font-medium">watching movies</span>, and spending time with my friends.
       </p>
     </motion.section>
   );
-}
+}
diff --git a/components/certifications.tsx b/components/certifications.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import SectionHeading from "./section-heading";
+import { certificationsData } from "@/lib/data";
+import { useSectionInView } from "@/lib/hooks";
+import Image from "next/image";
+
+export default function Certifications() {
+  const { ref } = useSectionInView("Certifications", 0.5);
+
+  return (
+    <section ref={ref} id="certifications" className="scroll-mt-28 mb-28">
+      <SectionHeading>My Certifications</SectionHeading>
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {certificationsData.map((cert, index) => (
+          <div
+            key={index}
+            className="border border-gray-300 p-4 rounded-lg shadow-md hover:shadow-lg transition dark:bg-gray-800 dark:border-gray-600"
+          >
+            <div className="flex items-center gap-4">
+              {/* Badge Image */}
+              {cert.imageUrl && (
+                <Image
+                  src={cert.imageUrl}
+                  alt={`${cert.title} badge`}
+                  width={100} // Adjusted size
+                  height={100} // Adjusted size
+                  className="rounded-full"
+                />
+              )}
+              <div>
+                <div className="text-xl font-medium">{cert.title}</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  {cert.issuer} - {cert.date}
+                </div>
+              </div>
+            </div>
+            {/* Certification Link */}
+            {cert.link && (
+              <div className="flex justify-center mt-4">
+                <a
+                  href={cert.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-gray-700 text-white hover:bg-gray-800 py-2 px-6 rounded-full text-sm text-center transition-all duration-300 ease-in-out transform hover:scale-105"
+                >
+                  View Certification
+                </a>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/contact.tsx b/components/contact.tsx
@@ -33,8 +33,8 @@ export default function Contact() {
 
       <p className="text-gray-700 -mt-6 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:manalarajkumar.rm@gmail.com">
+          manalarajkumar.rm@gmail.com
         </a>{" "}
         or through this form.
       </p>

diff --git a/components/education.tsx b/components/education.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import SectionHeading from "./section-heading";
+import { educationData } from "@/lib/data";
+import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+import { useSectionInView } from "@/lib/hooks";
+import { useTheme } from "@/context/theme-context";
+
+export default function Education() {
+  const { ref } = useSectionInView("Education");
+  const { theme } = useTheme();
+
+  return (
+    <section id="education" ref={ref} className="scroll-mt-28 mb-28 sm:mb-40">
+      <SectionHeading>My Education</SectionHeading>
+      <VerticalTimeline lineColor="">
+        {educationData.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="font-normal !mt-0">{item.location}</p>
+              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
+                {item.description}
+              </p>
+            </VerticalTimelineElement>
+          </React.Fragment>
+        ))}
+      </VerticalTimeline>
+    </section>
+  );
+}
diff --git a/components/experience.tsx b/components/experience.tsx
@@ -44,15 +44,21 @@ export default function Experience() {
                 fontSize: "1.5rem",
               }}
             >
-              <h3 className="font-semibold capitalize">{item.title}</h3>
-              <p className="font-normal !mt-0">{item.location}</p>
-              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
-                {item.description}
-              </p>
+              <h2 className="font-bold capitalize dark:text-white/75">{item.companyName}</h2>
+              <p className="font-extralight !mt-0 text-slate-400">{item.title}</p>
+              <p className="font-extralight !mt-0 text-slate-400">{item.location}</p>
+              <ul className="list-disc pl-5 space-y-2">
+                {item.description.map((point, idx) => (
+                  // <li key={idx} className="text-justify text-gray-700 dark:text-white/75">
+                  <li key={idx} className="text-gray-700 dark:text-white/75">
+                    {point}
+                  </li>
+                ))}
+              </ul>
             </VerticalTimelineElement>
           </React.Fragment>
         ))}
       </VerticalTimeline>
     </section>
   );
-}
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -4,13 +4,11 @@ export default function Footer() {
   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.
+        &copy; 2025 <a className="underline" href="https://github.com/RajkumarManala1/">RajkumarManala</a>. 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.
+        <span className="font-semibold">About this website:</span>Template taken from <a className="underline" href="https://github.com/ByteGrad/portfolio-website">ByteGrad</a>. Edited by <a className="underline" href="https://github.com/RajkumarManala1/">Raj Kumar Manala</a>
       </p>
     </footer>
   );
-}
+}
diff --git a/components/header.tsx b/components/header.tsx
@@ -14,7 +14,7 @@ export default function Header() {
   return (
     <header className="z-[999] relative">
       <motion.div
-        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
+        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadw-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[52rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
         initial={{ y: -100, x: "-50%", opacity: 0 }}
         animate={{ y: 0, x: "-50%", opacity: 1 }}
       ></motion.div>