Update: resume, fix: heatmap, skillset, theme detection-based display, StakeLiGames pic UX

Fix: Skillset section UX, StakeLiGames project image

Added system detection-based theme display

Update heatmap color schema to GitHub default

Interactive Override, Session Cleanup on Close, No Sticky Light/Dark State

Chore: Added updated 2-pager resume

Author: Soumilgit

public/SoumilM_KJSCE_Resume.pdf

@@ -59,7 +59,7 @@ const Certf = () => {
         initial="hidden"
         whileInView="show"
         viewport={{ once: true, amount: 0.01 }}
-        className="mx-auto w-fit px-6 py-4 mt-10 bg-black/80 rounded-xl backdrop-blur-md"
+        className="mx-auto w-fit px-6 py-4 mt-6 bg-black/80 rounded-xl backdrop-blur-md"
       >
         <p className={`${styles.sectionSubText} text-center text-[#37b54a]`}>
           My Certifications

src/components/Certf.jsx

@@ -19,8 +19,9 @@ const Heatmap = () => {
   const { isLightMode } = useTheme();
 
   const theme = {
-    light: ["#e5e7eb","#c7f0d3","#80d49c","#45b96b","#188a42",],
-    dark: ["#18181b","#123d22","#25924a","#2ea043","#3ddc84",],
+    // GitHub's exact official contribution graph colors
+    light: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
+    dark:  ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
   };
 
   const scrollToLatest = useCallback(() => {

src/components/Heatmap.jsx

@@ -13,7 +13,7 @@ const skillGroups = [
   },
   {
     title: "Web & Full Stack",
-    skills: ["HTML 5", "CSS 3", "React JS", "Next JS", "Node JS", "Flask"],
+    skills: ["HTML 5", "CSS 3", "Tailwind CSS", "React JS", "Next JS", "Node JS", "Flask"],
   },
   {
     title: "AI, ML & Data",
@@ -29,7 +29,7 @@ const skillGroups = [
   },
 ];
 
-const SkillGroupCard = ({ title, skills, index }) => {
+const SkillGroup = ({ title, skills, index, isLast }) => {
   const { isLightMode } = useTheme();
   const groupSkills = skills
     .map((skillName) => technologies.find((tech) => tech.name === skillName))
@@ -41,31 +41,32 @@ const SkillGroupCard = ({ title, skills, index }) => {
       initial="hidden"
       whileInView="show"
       viewport={{ once: true, amount: 0.01 }}
-      className="relative bg-black p-[2px] rounded-lg transition-transform border border-white/30 hover:border-[#37b54a]"
-      whileHover={{ scaleY: 1.05 }}
+      className="w-full"
     >
-      <div className="bg-black p-5 rounded-lg h-full">
-        <h3 className="text-[#37b54a] font-bold text-[22px] text-center transition-all duration-300">
-          {title}
-        </h3>
+      {/* Domain Subheading with mode-compatible underline color */}
+      <h3 className={`text-[#37b54a] font-bold text-[22px] text-left border-b pb-2 mb-6 ${isLightMode ? "border-[#2a322b]/20" : "border-white/30"}`}>
+        {title}
+      </h3>
 
-        <div className="mt-5 grid grid-cols-2 gap-4">
-          {groupSkills.map((skill) => (
-            <div
-              key={`${title}-${skill.name}`}
-              className="flex min-h-[94px] flex-col items-center justify-center rounded-lg border border-white/20 bg-black/80 px-3 py-4 text-center transition-colors duration-200 hover:border-[#37b54a]/80"
-            >
+      {/* Wrapping flex row of skill icons with responsive gap and spacing */}
+      <div className={`flex flex-wrap gap-x-4 sm:gap-x-8 gap-y-6 justify-start ${isLast ? "mb-2" : "mb-8"}`}>
+        {groupSkills.map((skill) => (
+          <div
+            key={`${title}-${skill.name}`}
+            className="flex flex-col items-center justify-center text-center w-20 sm:w-24 group cursor-pointer"
+          >
+            <div className="w-16 h-16 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
               <img
                 src={isLightMode && skill.iconLight ? skill.iconLight : skill.icon}
                 alt={skill.name}
-                className="h-10 w-10 object-contain"
+                className="h-12 w-12 object-contain"
               />
-              <p className="mt-3 text-sm font-bold leading-tight text-white">
-                {skill.name}
-              </p>
             </div>
-          ))}
-        </div>
+            <p className="mt-2 text-sm font-semibold leading-tight text-white/80 skill-name transition-colors duration-300">
+              {skill.name}
+            </p>
+          </div>
+        ))}
       </div>
     </motion.div>
   );
@@ -74,27 +75,26 @@ const SkillGroupCard = ({ title, skills, index }) => {
 const Tech = () => {
   return (
     <div>
-      {/* Scroll animated section title with clear readable background */}
+      {/* Section Title Heading with reduced top margin */}
       <motion.div
-  variants={simpleFadeIn(0.05, 0.1)} 
-  initial="hidden"
-  whileInView="show"
-  viewport={{ once: true, amount: 0.01 }}
-  className="mx-auto w-fit px-6 py-4 mt-10 bg-black/80 rounded-xl backdrop-blur-md"
->
-  <p className={`${styles.sectionSubText} text-center text-white`}>
-    Technologies worked with
-  </p>
-  <h2 className={`${styles.sectionHeadText} text-center text-white`}>
-    Skillset
-  </h2>
-</motion.div>
-
+        variants={simpleFadeIn(0.05, 0.1)} 
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.01 }}
+        className="mx-auto w-fit px-6 py-4 mt-6 bg-black bg-opacity-80 rounded-xl backdrop-blur-md"
+      >
+        <p className={`${styles.sectionSubText} text-center text-white`}>
+          Technologies worked with
+        </p>
+        <h2 className={`${styles.sectionHeadText} text-center text-white`}>
+          Skillset
+        </h2>
+      </motion.div>
 
-      {/* Grouped skill cards */}
-      <div className="mt-20 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+      {/* Grouped Skills stacked vertically with reduced gap and margins */}
+      <div className="mt-8 bg-black bg-opacity-80 rounded-lg p-8 backdrop-blur-sm max-w-5xl mx-auto flex flex-col gap-2">
         {skillGroups.slice(0, 5).map((group, index) => (
-          <SkillGroupCard key={group.title} index={index} {...group} />
+          <SkillGroup key={group.title} index={index} isLast={index === 4} {...group} />
         ))}
       </div>
     </div>

src/components/Tech.jsx

@@ -6,7 +6,7 @@ import { SectionWrapper } from "../hoc";
 import { projects } from "../constants";
 import { textVariant, simpleFadeIn } from "../utils/motion"; // Use simpleFadeIn!
 
-const ProjectCard = ({ index, name, description, tags, image, source_code_link }) => {
+const ProjectCard = ({ index, name, description, tags, image, source_code_link, imageClass }) => {
   return (
     <motion.div
       variants={simpleFadeIn(index * 0.05, 0.1)} 
@@ -18,7 +18,7 @@ const ProjectCard = ({ index, name, description, tags, image, source_code_link }
     >
       <div className="bg-black p-5 rounded-lg w-full">
         <div className="relative w-full h-[230px] rounded-lg overflow-hidden">
-          <img src={image} alt="project_image" className="w-full h-full object-cover rounded-lg" />
+          <img src={image} alt="project_image" className={`w-full h-full ${imageClass || "object-cover"} rounded-lg`} />
           <div className="absolute inset-0 flex justify-end m-3 card-img_hover">
             <div
               onClick={() => window.open(source_code_link, "_blank")}

src/components/Works.jsx

@@ -252,7 +252,7 @@ const achievements = [
   {
     name: "Top 4% on Codolio, 1st rank in college",
     description:
-      "Stats: 480+ DSA problems solved, 8 awards, 2600+ dev contributions & C-Score of 775+ among 35,700+ global users.",
+      "Stats: 480+ DSA problems solved, 8 awards, 2700+ dev contributions & C-Score of 780+ among ~36,000 global users.",
     link: "https://codolio.com/profile/uQSHdtbA", 
   },
   {
@@ -287,7 +287,7 @@ const projects = [
   {
     name: "SimulateRecruitAI",
     description:
-      "Tech stack: Next, NeonDB, Docker, Clerk, Stripe, Tailwind, JSON, Gemini AI, API routes & Radix UI; achieved 80+ sign-ups.",
+      "Tech stack: Next, NeonDB, Docker, Clerk, Stripe, Tailwind, JSON, Gemini AI, API routes & Radix UI; achieved ~90 sign-ups.",
     tags: [
       {
         name: "next",
@@ -345,6 +345,7 @@ const projects = [
       },
     ],
     image: stakeligames,
+    imageClass: "object-contain bg-white",
     source_code_link: "https://github.com/Soumilgit/StakeLiGames",
   },
   {

src/constants/index.js

@@ -5,7 +5,17 @@ const ThemeContext = createContext(null);
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState(() => {
     if (typeof window === "undefined") return "dark";
-    return window.localStorage.getItem("portfolio-theme") || "dark";
+    
+    // Only use cached theme if the user explicitly clicked the toggle button previously in this session
+    const hasOverride = window.sessionStorage.getItem("portfolio-theme-override") === "true";
+    if (hasOverride) {
+      const savedTheme = window.localStorage.getItem("portfolio-theme");
+      if (savedTheme) return savedTheme;
+    }
+    
+    // Otherwise, dynamically default to system preference
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return prefersDark ? "dark" : "light";
   });
 
   useEffect(() => {
@@ -15,11 +25,41 @@ export const ThemeProvider = ({ children }) => {
     window.localStorage.setItem("portfolio-theme", theme);
   }, [theme]);
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemThemeChange = (e) => {
+      const newTheme = e.matches ? "dark" : "light";
+      setTheme(newTheme);
+    };
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleSystemThemeChange);
+    } else {
+      mediaQuery.addListener(handleSystemThemeChange);
+    }
+
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleSystemThemeChange);
+      } else {
+        mediaQuery.removeListener(handleSystemThemeChange);
+      }
+    };
+  }, []);
+
   const value = useMemo(
     () => ({
       theme,
       isLightMode: theme === "light",
-      toggleTheme: () => setTheme((current) => (current === "light" ? "dark" : "light")),
+      toggleTheme: () => {
+        setTheme((current) => {
+          const next = current === "light" ? "dark" : "light";
+          window.sessionStorage.setItem("portfolio-theme-override", "true");
+          return next;
+        });
+      },
     }),
     [theme]
   );

src/context/ThemeContext.jsx

@@ -358,3 +358,16 @@ html.light-mode .mobile-menu ul li:hover,
 html.light-mode .mobile-menu ul li:hover a {
   color: #37b54a !important;
 }
+
+/* Slightly reduce vertical spacing between Tech (Skillset) and Certifications sections */
+section:has(#technologies) {
+  padding-bottom: 40px !important;
+}
+section:has(#certf) {
+  padding-top: 40px !important;
+}
+
+/* Transiton skill label color to neon green on card/icon hover in both themes */
+.group:hover .skill-name {
+  color: #37b54a !important;
+}