improve contact form and changes texts and reduced home image size

Author: sunjay-dev

app.js

@@ -14,7 +14,12 @@ const webRouter = require('./router/web.router.js');
 app.use('/', webRouter);
 app.use('/api', emailRouter);
 
-app.use(express.static(path.resolve(__dirname, "public")));
+app.use(express.static(path.resolve(__dirname, "public"),{
+ setHeaders: (res, path) => {
+        res.status(200);
+        res.setHeader('Cache-Control', 'public, max-age=86400');
+    }
+}));
 const PORT = process.env.PORT || 3000;
 app.listen(PORT, () => {
   console.log(`App is running at PORT:${PORT}`);

public/css/style.css

@@ -608,14 +608,46 @@ video {
   bottom: 1.5rem;
 }
 
+.bottom-\[10\%\] {
+  bottom: 10%;
+}
+
 .left-1\/2 {
   left: 50%;
 }
 
+.left-\[15\%\] {
+  left: 15%;
+}
+
+.left-\[20\%\] {
+  left: 20%;
+}
+
+.left-\[23\%\] {
+  left: 23%;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.left-\[55\%\] {
+  left: 55%;
+}
+
 .right-6 {
   right: 1.5rem;
 }
 
+.right-\[10\%\] {
+  right: 10%;
+}
+
+.right-\[5\%\] {
+  right: 5%;
+}
+
 .top-1\/2 {
   top: 50%;
 }
@@ -624,6 +656,22 @@ video {
   top: 1.75rem;
 }
 
+.top-\[10\%\] {
+  top: 10%;
+}
+
+.top-\[15\%\] {
+  top: 15%;
+}
+
+.top-\[25\%\] {
+  top: 25%;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -649,6 +697,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mb-14 {
   margin-bottom: 3.5rem;
 }
@@ -697,10 +750,6 @@ video {
   margin-top: 3.75rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -761,10 +810,6 @@ video {
   height: 360px;
 }
 
-.h-dvh {
-  height: 100dvh;
-}
-
 .h-full {
   height: 100%;
 }
@@ -781,10 +826,6 @@ video {
   min-height: 120px;
 }
 
-.min-h-dvh {
-  min-height: 100dvh;
-}
-
 .w-36 {
   width: 9rem;
 }
@@ -1120,6 +1161,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[url\(\/img\/homeBg\.jpg\)\] {
+  background-image: url(/img/homeBg.jpg);
+}
+
 .bg-\[url\(\/img\/homeBg\.jpeg\)\] {
   background-image: url(/img/homeBg.jpeg);
 }
@@ -1211,6 +1256,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-32 {
+  padding-bottom: 8rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1239,28 +1288,12 @@ video {
   padding-top: 0.25rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.pb-10 {
-  padding-bottom: 2.5rem;
-}
-
-.pb-28 {
-  padding-bottom: 7rem;
-}
-
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
 .pt-16 {
   padding-top: 4rem;
 }
 
-.pb-24 {
-  padding-bottom: 6rem;
+.pt-4 {
+  padding-top: 1rem;
 }
 
 .text-center {
@@ -1378,6 +1411,11 @@ video {
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1568,16 +1606,6 @@ video {
   display: none;
 }
 
-.dark\:border-\[\#3d3d3d\]:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(61 61 61 / var(--tw-border-opacity, 1));
-}
-
-.dark\:border-gray-200:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-}
-
 .dark\:border-white:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));

public/img/homeBg.jpeg

@@ -3,24 +3,29 @@ let form = document.querySelector('form');
 form.querySelectorAll('input, textarea').forEach(field => {
     field.addEventListener('input', () => {
         field.classList.remove('border-red-500');
+        form.querySelector(`#${field.id}Error`)?.classList.add('hidden');
     });
 });
+
 form.onsubmit = (e) => {
     e.preventDefault();
 
     let name = form.querySelector('#name');
     if (!name.value.trim()) {
         name.classList.add('border-red-500');
+        form.querySelector('#nameError').classList.remove('hidden')
         return;
     }
     let email = form.querySelector('#email');
     if (!email.value.trim()) {
         email.classList.add('border-red-500');
+        form.querySelector('#emailError').classList.remove('hidden')
         return;
     }
     let message = form.querySelector('#message');
     if (!message.value.trim()) {
         message.classList.add('border-red-500');
+        form.querySelector('#messageError').classList.remove('hidden')
         return;
     }
 
@@ -137,7 +142,7 @@ let achievements = [
         KeyAchievement: [
             "Created a carpooling web app to solve university commute issues.",
             "Developed backend using Express.js and MongoDB to handle ride creation, joining, and real-time updates via WebSockets.",
-            "Designed responsive frontend using EJS and Tailwind CSS for a unified login and dashboard experience.",
+            "Designed frontend using EJS and Tailwind CSS.",
             "Implemented ride history, live ride tracking, and notification system for cancellations"
         ]
     },
@@ -147,11 +152,11 @@ let achievements = [
         name: "Bachelor's in Software Engineering",
         place: "MUET, Jamshoro",
         url: "https://www.muet.edu.pk/",
-        shortDesc: "Completed 4-year undergraduate degree with a strong foundation in full-stack web development and software engineering principles.",
+        shortDesc: "Pursuing Bachelor’s with practical projects, covering areas like web development, AI, and more—graduating in 2026.",
         KeyAchievement: [
-            "Graduated with hands-on experience in MERN stack development, database design, and RESTful APIs.",
-            "Built multiple academic projects, including a real-time carpooling app, a weather dashboard, and a file-sharing platform.",
-            "Contributed to open-source projects and actively participated in hackathons and coding competitions.",
+            "Studied core and advanced software engineering topics with practicals, and hands-on projects.",
+            "Gained experience in DSA, Web Development, and Database Systems.",
+            "Developed skills in Software Project Management, Object-Oriented Programming, and Human-Computer Interaction.",
             "Developed strong problem-solving skills through regular coursework, labs, and collaborative team-based projects."
         ]
     },
@@ -161,12 +166,12 @@ let achievements = [
         name: "Web Development Course",
         place: "National Freelancing Training Program",
         url: "https://nftp.pitb.gov.pk/",
-        shortDesc: "Completed a comprehensive full-stack web development training with a focus on Node.js backend, RESTful APIs, and database integration.",
+        shortDesc: "Joined during my <b>First year</b> of university to learn basics of web development.",
         KeyAchievement: [
-            "Built foundational knowledge in JavaScript, Node.js, and Express.js.",
-            "Learned RESTful API design, server-side rendering, and web security best practices.",
-            "Worked with both SQL and NoSQL databases for backend integration.",
-            "Practiced version control using Git and gained exposure to real-world web development workflows."
+            "Learned the basics of HTML, CSS, and JavaScript.",
+            "Gained an understanding of how backend systems work behind the scenes.",
+            "Learned to use MySQL for managing databases and organizing data.",
+            "Created multiple projects to apply concepts learned from course."
         ]
     }
 ];
@@ -242,6 +247,7 @@ document.querySelectorAll('#menu a').forEach(a => {
     a.addEventListener('click', () => {
         menu.classList.add('hidden');
         menu.classList.remove('flex');
+        document.body.classList.remove('overflow-hidden');
     });
 });
 

public/img/homeBg.jpg

@@ -14,7 +14,7 @@
   <meta property="og:image" content="https://sunjay.xyz/img/me.jpg" />
   <meta property="og:url" content="https://sunjay.xyz/" />
   <meta property="og:type" content="website" />
-  <title>Sunjay Kumar | MERN Stack Developer</title>
+  <title>Sunjay Kumar | Full Stack Developer</title>
   <link href="/css/style.css" rel="stylesheet" />
 </head>
 

public/js/script.js

@@ -3,22 +3,21 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
         <!-- Left Side -->
         <div class="space-y-4 sm:px-0 px-6">
-            <h2 class="text-4xl font-bold text-[#3d3d3d] mb-14"><u>About </u>me</h2>
+            <h2 class="text-4xl font-bold mb-14"><u>About </u>me</h2>
                 <p class="text-2xl font-semibold">Hey! I'm Sunjay Kumar</p>
             <div class="font-normal opacity-80 selection:opacity-100 space-y-4">
 
-                <p>I am a passionate software engineer specializing in full-stack development. I love crafting clean,
+                <p>I am a passionate software engineer specializing in full-stack development. I love writing clean,
                     efficient code and building amazing user experiences.</p>
-                <p>Skilled in JavaScript, Node.js, React, and databases like MongoDB, I enjoy working on innovative
+                <p>Skilled in JavaScript, Node.js, React, and databases like MongoDB, and MySQL, I enjoy working on innovative
                     projects that solve real-world problems.</p>
                 <p>Always eager to learn new technologies and improve my skills through collaborative teamwork and
                     challenging tasks.</p>
-
             </div>
         </div>
 
         <!-- Right Side Avatar + Icons -->
-        <div class="relative w-[360px] h-[360px] sm:w-[480px] sm:h-[480px] mx-auto sm:-mt-10">
+        <div class="relative w-[360px] h-[360px] sm:w-[480px] sm:h-[480px] mx-auto sm:-mt-10 select-none">
             <div
                 class="absolute border border-dashed border-gray-300 rounded-full w-[340px] h-[340px] sm:w-[440px] sm:h-[440px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
             </div>
@@ -31,44 +30,44 @@
 
             <!-- Icons -->
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="top: 10%; left: 50%; transform: translate(-50%, 0);">
+            <div class="absolute px-3 py-3 top-[10%] left-[50%] bg-white rounded-full shadow-lg animate-float"
+                style="transform: translate(-50%, 0);">
                 <img src="/svg/techIcons/react.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="React" />
             </div>
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="top: 50%; right: 10%; animation-delay: 0.5s; transform: translate(50%, -50%);">
+            <div class="absolute px-3 py-3 top-[50%] right-[10%] bg-white  rounded-full shadow-lg animate-float"
+                style="animation-delay: 0.5s; transform: translate(50%, -50%);">
                 <img src="/svg/techIcons/javascript.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="JavaScript" />
             </div>
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="bottom: 10%; left: 55%; animation-delay: 1s; transform: translate(-50%, 0);">
+            <div class="absolute px-3 py-3 bottom-[10%] left-[55%] bg-white rounded-full shadow-lg animate-float"
+                style="animation-delay: 1s; transform: translate(-50%, 0);">
                 <img src="/svg/techIcons/typescript.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="TypeScript" />
             </div>
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="top: 15%; left: 20%; animation-delay: 0.7s;">
+            <div class="absolute px-3 py-3 bg-white top-[15%] left-[20%] rounded-full shadow-lg animate-float"
+                style="animation-delay: 0.7s;">
                 <img src="/svg/techIcons/nodejs.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="Node.js" />
             </div>
 
-            <div class="absolute px-2 py-2 bg-white rounded-full shadow-lg animate-float"
-                style="top: 25%; right: 5%; animation-delay: 1.3s;">
+            <div class="absolute px-2 py-2 top-[25%] right-[5%] bg-white rounded-full shadow-lg animate-float"
+                style="animation-delay: 1.3s;">
                 <img src="/svg/techIcons/docker.svg"
                     class="w-9 h-9 sm:w-10 sm:h-10" alt="Docker" />
             </div>
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="top: 50%; left: 15%; animation-delay: 0.9s; transform: translateY(-50%);">
+            <div class="absolute px-3 py-3 top-[50%] left-[15%] bg-white rounded-full shadow-lg animate-float"
+                style="animation-delay: 0.9s; transform: translateY(-50%);">
                 <img src="/svg/techIcons/mongodb.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="MongoDB" />
             </div>
 
-            <div class="absolute px-3 py-3 bg-white rounded-full shadow-lg animate-float"
-                style="bottom: 5%; left: 25%; animation-delay: 1.5s; transform: translateX(-50%);">
+            <div class="absolute px-3 py-3 bottom-[10%] left-[23%] bg-white rounded-full shadow-lg animate-float"
+                style="animation-delay: 1.5s; transform: translateX(-50%);">
                 <img src="/svg/techIcons/tailwindcss.svg"
                     class="w-7 h-7 sm:w-8 sm:h-8" alt="Tailwind CSS" />
             </div>