updated the details with resume

Author: Venkata Mouli

public/Kundula_Venkata_Mouli_resume.pdf

@@ -11,20 +11,14 @@ export default function About() {
           {...fadeInUp}
         >
           <p className="text-lg mb-6 dark:text-gray-300">
-            I am a passionate Software Engineer with experience in building modern web applications. 
-            Currently working at Genesys, I focus on developing robust, user-friendly interfaces and 
-            improving application performance.
+            I am a Software Engineer at Genesys with a strong focus on frontend engineering and building modern web applications.
+            I enjoy collaborating with product and design teams to deliver customer-centric features with strong performance and usability.
           </p>
           <p className="text-lg mb-6 dark:text-gray-300">
-            My journey in software development has equipped me with a strong foundation in both 
-            frontend and backend technologies. I enjoy solving complex problems and creating 
-            efficient solutions that deliver exceptional user experiences.
-          </p>
-          <p className="text-lg dark:text-gray-300">
-            Outside of coding, I'm passionate about continuous learning and staying updated with 
-            the latest trends in technology. I have solved over 500 programming problems across 
-            various competitive platforms.
+            My experience spans the full SDLC, including requirement understanding, design discussions, implementation, testing, and production support.
+            I care about clean architecture, maintainable code, and shipping reliable UI at scale.
           </p>
+          <p className="text-lg dark:text-gray-300">Outside of work, I stay active in coding and continuous learning. I have solved 500+ problems across platforms and enjoy sharpening fundamentals in data structures and algorithms. I also explore databases and backend systems, and enjoy experimenting with AI-powered tooling to build smarter applications.</p>
         </motion.div>
       </div>
     </section>

public/profile.jpg

@@ -31,7 +31,7 @@ const certifications = [
 
 export default function Achievements() {
   return (
-    <section id="achievements" className="py-16 bg-gray-50 dark:bg-gray-800 transition-colors duration-200">
+    <section id="achievements" className="py-16 section-wrap transition-colors duration-200">
       <div className="container mx-auto px-4">
         <h2 className="section-title dark:text-white">Achievements & Certifications</h2>
 
@@ -41,7 +41,7 @@ export default function Achievements() {
         >
           {/* Achievements */}
           <motion.div 
-            className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
+            className="surface-card surface-card-hover surface-border p-6"
             {...fadeInUp}
           >
             <div className="flex items-center mb-6">
@@ -62,7 +62,7 @@ export default function Achievements() {
 
           {/* Certifications */}
           <motion.div 
-            className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
+            className="surface-card surface-card-hover surface-border p-6"
             {...fadeInUp}
           >
             <div className="flex items-center mb-6">

src/components/About.tsx

@@ -3,7 +3,6 @@ import { fadeInUp, slideLeft, slideRight } from "@/utils/animations";
 import { Mail, Phone, MapPin } from "lucide-react";
 import { FaLinkedin, FaPaperPlane } from "react-icons/fa";
 import { useState } from "react";
-import { apiRequest } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -65,8 +64,9 @@ export default function Contact() {
   };
 
   return (
-    <section id="contact" className="py-16 bg-gray-900 text-white transition-colors duration-200">
-      <div className="container mx-auto px-4">
+    <section id="contact" className="py-16 section-wrap transition-colors duration-200 bg-gray-900 text-white">
+      <div className="absolute inset-0 section-glow opacity-60" />
+      <div className="container mx-auto px-4 relative">
         <h2 className="section-title text-white">Contact Me</h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
@@ -121,12 +121,12 @@ export default function Contact() {
                 <div>
                   <h4 className="font-semibold text-lg">LinkedIn</h4>
                   <a 
-                    href="https://linkedin.com/in/venkatamouli" 
+                    href="https://linkedin.com/in/venkata-mouli/" 
                     target="_blank" 
                     rel="noreferrer" 
                     className="text-blue-300 hover:underline"
                   >
-                    linkedin.com/in/venkatamouli
+                    linkedin.com/in/venkata-mouli/
                   </a>
                 </div>
               </div>
@@ -139,7 +139,7 @@ export default function Contact() {
           >
             <form 
               onSubmit={handleSubmit} 
-              className="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg p-6 shadow-lg"
+              className="surface-card surface-border p-6 text-gray-800 dark:text-gray-200"
             >
               <div className="space-y-4">
                 <div>
@@ -151,7 +151,7 @@ export default function Contact() {
                     value={formData.name}
                     onChange={handleChange}
                     required
-                    className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                    className="dark:bg-gray-900/20 dark:border-gray-700/60 dark:text-gray-200"
                   />
                 </div>
 
@@ -164,7 +164,7 @@ export default function Contact() {
                     value={formData.email}
                     onChange={handleChange}
                     required
-                    className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                    className="dark:bg-gray-900/20 dark:border-gray-700/60 dark:text-gray-200"
                   />
                 </div>
 
@@ -177,7 +177,7 @@ export default function Contact() {
                     value={formData.subject}
                     onChange={handleChange}
                     required
-                    className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                    className="dark:bg-gray-900/20 dark:border-gray-700/60 dark:text-gray-200"
                   />
                 </div>
 
@@ -187,7 +187,7 @@ export default function Contact() {
                     id="message" 
                     name="message"
                     rows={4} 
-                    className="resize-none dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                    className="resize-none dark:bg-gray-900/20 dark:border-gray-700/60 dark:text-gray-200"
                     value={formData.message}
                     onChange={handleChange}
                     required

src/components/Achievements.tsx

@@ -11,13 +11,13 @@ export default function Education() {
           className="max-w-3xl mx-auto"
           {...fadeInUp}
         >
-          <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md border-l-4 border-primary">
+          <div className="surface-card surface-card-hover p-6 border-l-4 border-primary">
             <div className="flex justify-between flex-wrap mb-2">
-              <h3 className="text-xl font-bold dark:text-white">Bachelor of Technology in Information Technology</h3>
+              <h3 className="text-xl font-bold dark:text-white">Bachelor of Technology in Computer Science</h3>
               <span className="text-gray-500 dark:text-gray-300">July 2019 - June 2023</span>
             </div>
             <p className="text-primary font-medium mb-2">KL University, Guntur, India</p>
-            <p className="text-gray-700 dark:text-gray-300">CGPA: 9.02/10.0</p>
+            <p className="text-gray-700 dark:text-gray-300">CGPA: 9.02</p>
           </div>
         </motion.div>
       </div>

src/components/Contact.tsx

@@ -5,34 +5,74 @@ import { BriefcaseIcon } from "lucide-react";
 const experiences = [
   {
     title: "Software Engineer",
-    company: "Genesys",
-    period: "Feb 2024 - Present",
+    company: "Genesys (Chennai, India)",
+    period: "Aug 2022 - Present",
     responsibilities: [
-      "Enhanced application's date and time formatting for sub-regions by implementing a solution that utilizes browser locale and app language to determine the end locale, resolving customer's issue regarding dates."
+      "Develop and deliver high-quality frontend features across the Software Development Lifecycle (SDLC) including requirement understanding, design discussions, implementation, testing, and production support.",
+      "Built scalable and reusable UI components using Vue.js, JavaScript, HTML5 and CSS3 to enhance digital user experiences for enterprise customers.",
+      "Collaborate closely with product managers, designers and senior engineers to clarify requirements, propose technical solutions, and deliver customer-centric features.",
+      "Contribute actively to code reviews and design discussions, ensuring adherence to internal engineering standards, performance best practices and maintainable architecture.",
+      "Improved application performance by implementing API caching strategies and virtual rendering techniques, enabling smooth scheduling experience for 30,000+ concurrent users.",
+      "Enhanced global usability by implementing an automatic locale detection mechanism for date/time formatting, reducing customer-reported issues across multiple regions.",
+      "Strengthened product quality by developing unit and integration tests achieving 95%+ coverage, improving release confidence and reducing regression defects.",
+      "Debugged complex UI production issues using browser profiling tools and performance analysis, improving responsiveness and accessibility compliance.",
+      "Mentored junior engineers and supported onboarding, fostering collaborative team culture and engineering excellence."
     ]
   },
-  {
-    title: "Associate Software Engineer",
-    company: "Genesys",
-    period: "Jun 2023 - Feb 2024",
-    responsibilities: [
-      "Worked on implementing unit testing for entire application with a spec coverage of over 95%",
-      "Optimized application performance by implementing API request caching, reducing server load and improving response times.",
-      "Got promoted to Software engineer in 9 months"
-    ]
-  },
-  {
-    title: "Software Engineer Intern",
-    company: "Genesys",
-    period: "August 2022 - May 2023",
-    responsibilities: [
-      "Responsible for development of notification rules management UI that includes development of custom components that can handle huge data interactively.",
-      "Worked on user reported defects to improve customer experience of the product."
-    ]
-  }
 ];
 
-const technologies = ["Vue.js", "KnockoutJS", "Less", "Jest", "Webpack"];
+const technologies = [
+  "Vue.js",
+  "JavaScript",
+  "HTML5",
+  "CSS3",
+  "API Caching",
+  "Virtual Rendering",
+  "Unit/Integration Testing"
+];
+
+const impactTerms = [
+  "Software Development Lifecycle (SDLC)",
+  "30,000+ concurrent users",
+  "95%+ coverage",
+  "performance",
+  "scalable",
+  "reusable",
+  "customer-centric",
+  "code reviews",
+  "global usability",
+  "regression defects",
+  "accessibility compliance",
+  "Mentored"
+];
+
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const impactRegex = new RegExp(
+  `(${impactTerms
+    .slice()
+    .sort((a, b) => b.length - a.length)
+    .map(escapeRegExp)
+    .join("|")})`,
+  "gi"
+);
+
+function highlightImpactTerms(text: string) {
+  const parts = text.split(impactRegex);
+  return parts.map((part, index) => {
+    const isImpactTerm = impactTerms.some((term) => term.toLowerCase() === part.toLowerCase());
+    if (!isImpactTerm) return <span key={index}>{part}</span>;
+
+    return (
+      <span
+        key={index}
+        className="font-semibold text-primary dark:text-blue-300"
+      >
+        {part}
+      </span>
+    );
+  });
+}
 
 export default function Experience() {
   return (
@@ -55,23 +95,23 @@ export default function Experience() {
               <div className="absolute left-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
                 <BriefcaseIcon size={20} />
               </div>
-              <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border-l-4 border-primary">
+              <div className="surface-card surface-card-hover p-6 border-l-4 border-primary">
                 <div className="flex justify-between flex-wrap">
                   <h3 className="text-xl font-bold dark:text-white">{exp.title}</h3>
                   <span className="text-sm text-gray-500 dark:text-gray-300">{exp.period}</span>
                 </div>
                 <p className="text-primary font-medium mb-4">{exp.company}</p>
-                <ul className="list-disc list-inside text-gray-700 dark:text-gray-200 space-y-2">
+                <ul className="list-disc list-outside pl-6 text-gray-700 dark:text-gray-200 space-y-2 leading-relaxed">
                   {exp.responsibilities.map((responsibility, idx) => (
-                    <li key={idx}>{responsibility}</li>
+                    <li key={idx}>{highlightImpactTerms(responsibility)}</li>
                   ))}
                 </ul>
               </div>
             </motion.div>
           ))}
 
           <motion.div 
-            className="ml-12 animate-in bg-gray-100 dark:bg-gray-600 p-5 rounded-lg shadow-sm"
+            className="ml-12 animate-in surface-card surface-card-hover p-5"
             {...fadeInUp}
           >
             <h4 className="font-semibold mb-2 dark:text-white">Technologies Used:</h4>

src/components/Education.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
 
           <div className="flex space-x-6">
             <a 
-              href="https://linkedin.com/in/venkatamouli" 
+              href="https://linkedin.com/in/venkata-mouli/" 
               target="_blank" 
               rel="noreferrer" 
               className="text-gray-400 hover:text-primary transition-colors"
@@ -29,7 +29,7 @@ export default function Footer() {
               <FaGithub className="text-xl" />
             </a>
             <a 
-              href="https://leetcode.com/venkatamouli" 
+              href="https://leetcode.com/u/mouli_2303/" 
               target="_blank" 
               rel="noreferrer" 
               className="text-gray-400 hover:text-primary transition-colors"

src/components/Experience.tsx

@@ -16,7 +16,7 @@ export default function Header() {
   const { isOpen, toggle, close } = useMobileMenu();
 
   return (
-    <header className="fixed top-0 left-0 right-0 bg-white dark:bg-gray-900 shadow-md z-50 transition-colors duration-200">
+    <header className="fixed top-0 left-0 right-0 bg-white/70 dark:bg-gray-900/60 backdrop-blur-md border-b border-gray-200/60 dark:border-gray-800/60 z-50 transition-colors duration-200">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
         <a href="#home" className="text-2xl font-bold text-primary">
           Venkata Mouli
@@ -38,7 +38,7 @@ export default function Header() {
               <a
                 key={link.href}
                 href={link.href}
-                className="text-gray-800 dark:text-gray-200 hover:text-primary dark:hover:text-primary transition-colors"
+                className="text-gray-800 dark:text-gray-200 hover:text-primary dark:hover:text-primary transition-colors relative after:absolute after:left-0 after:-bottom-1 after:h-0.5 after:w-0 after:bg-gradient-to-r after:from-primary after:to-indigo-500 after:transition-all hover:after:w-full"
               >
                 {link.label}
               </a>
@@ -54,7 +54,7 @@ export default function Header() {
           animate={{ opacity: 1, height: "auto" }}
           exit={{ opacity: 0, height: 0 }}
           transition={{ duration: 0.2 }}
-          className="md:hidden bg-white dark:bg-gray-800 py-4 px-4 shadow-lg"
+          className="md:hidden bg-white/80 dark:bg-gray-800/70 backdrop-blur-md py-4 px-4 shadow-lg border-t border-gray-200/60 dark:border-gray-700/40"
         >
           <div className="flex flex-col space-y-4">
             {navLinks.map((link) => (