portosaurus 3.0.2 → 4.0.0

package/src/theme/components/ContactSection/index.js

@@ -1,6 +1,8 @@
+import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { iconMap } from "../../config/iconMappings";
 import { FaQuestionCircle } from "react-icons/fa";
+import useScrollReveal from "../../hooks/useScrollReveal";
 import styles from "./styles.module.css";
 
 const sortEmail = (links) => {
@@ -22,27 +24,34 @@ const sortEmail = (links) => {
   });
 };
 
-export default function ContactSection({ id, className, title, subtitle }) {
+export default function ContactSection({ id, className }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
-  let socialLinks = customFields.socialLinks.links || [];
+  const socialLinksConfig = customFields.socialLinks || {};
+
+  if (socialLinksConfig.enable === false) return null;
+
+  let socialLinks = socialLinksConfig.links || [];
+
+  const displayHeading = socialLinksConfig.heading;
+  const displaySubheading = socialLinksConfig.subheading;
+
+  const [sectionRef, isVisible] = useScrollReveal();
 
   socialLinks = sortEmail(socialLinks);
 
   return (
     <div
       id={id}
-      className={`${styles.contactSection} ${className || ""}`}
+      ref={sectionRef}
+      className={`${styles.contactSection} ${isVisible ? "is-visible" : ""} ${className || ""}`}
       role="region"
       aria-label="Contact section"
     >
       <div className={styles.contactContainer}>
         <div className={styles.contactHeader}>
-          <h2 className={styles.contactTitle}>{title || "Get In Touch"}</h2>
-          <p className={styles.contactSubtitle}>
-            {subtitle ||
-              "Feel free to reach out for collaborations, questions, or just to say hello!"}
-          </p>
+          <h2 className={styles.contactTitle}>{displayHeading}</h2>
+          <p className={styles.contactSubtitle}>{displaySubheading}</p>
         </div>
 
         {/* SocialCard */}
@@ -53,13 +62,13 @@ export default function ContactSection({ id, className, title, subtitle }) {
             aria-label="Social media and contact links"
           >
             {socialLinks.map((social, index) => {
-              const iconData = iconMap[social.icon] || {};
+              const iconKey = (social.icon || social.name || "").toLowerCase();
+              const iconData = iconMap[iconKey] || {};
 
-              const name = social.name || "?";
+              const name = social.name;
               const Icon = iconData.icon || FaQuestionCircle;
               const iconColor = iconData.color || "var(--ifm-color-primary)";
-              const description =
-                name === "?" ? "" : social.desc || `Connect with me on ${name}`;
+              const desc = social.desc || `Connect with me on ${name}`;
               const url = social.url;
 
               return (
@@ -73,7 +82,7 @@ export default function ContactSection({ id, className, title, subtitle }) {
                     "--card-index": index,
                     "--icon-hover-color": iconColor,
                   }}
-                  aria-label={`Connect with me on ${name}: ${description}`}
+                  aria-label={`Connect with me on ${name}: ${desc}`}
                   role="listitem"
                 >
                   {Icon && (
@@ -82,7 +91,7 @@ export default function ContactSection({ id, className, title, subtitle }) {
                     </div>
                   )}
                   <h3 className={styles.socialTitle}>{name}</h3>
-                  <p className={styles.socialDesc}>{description}</p>
+                  <p className={styles.socialDesc}>{desc}</p>
                 </a>
               );
             })}

package/src/theme/components/ContactSection/styles.module.css

@@ -1,8 +1,8 @@
 /* Animations */
-@keyframes slideUp {
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -10,10 +10,10 @@
   }
 }
 
-@keyframes fadeIn {
+@keyframes slideUp {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -55,17 +55,25 @@
   font-weight: 600;
   color: var(--ifm-color-primary);
   margin-bottom: 0.6rem;
-  animation: slideUp 0.5s ease-out forwards;
+  opacity: 0;
   position: relative;
   display: inline-block;
 }
 
+:global(.is-visible) .contactTitle {
+  animation: slideUp 0.4s ease-out forwards;
+}
+
 .contactSubtitle {
   font-size: 0.95rem;
   color: var(--ifm-font-color-tertiary);
   max-width: 600px;
   margin: 0.05rem auto 0;
-  animation: slideUp 0.5s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
+:global(.is-visible) .contactSubtitle {
+  animation: slideUp 0.4s ease-out 0.1s forwards;
 }
 
 /* SocialCard */
@@ -99,8 +107,6 @@
     transform 0.3s ease,
     box-shadow 0.3s ease,
     background-color 0.3s ease;
-  animation: fadeIn 0.5s ease-out forwards;
-  animation-delay: calc(0.1s + (var(--card-index, 0) * 0.1s));
   box-shadow: var(--ifm-global-shadow-lw);
   text-decoration: none;
   display: flex;
@@ -114,6 +120,11 @@
   overflow: hidden;
 }
 
+:global(.is-visible) .socialCard {
+  animation: fadeIn 0.8s ease-out forwards;
+  animation-delay: calc(0.3s + (var(--card-index, 0) * 0.1s));
+}
+
 .socialCard:hover {
   transform: translateY(-5px);
   box-shadow: var(--ifm-global-shadow-md);

package/src/theme/components/ExperienceSection/index.js

@@ -1,6 +1,15 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./styles.module.css";
 
-export default function ExperienceSection({ id, className, title, subtitle }) {
+export default function ExperienceSection({ id, className }) {
+  const { siteConfig } = useDocusaurusContext();
+  const experience = siteConfig.customFields?.experience || {};
+
+  if (experience.enable === false) return null;
+
+  const displayHeading = experience.heading;
+  const displaySubheading = experience.subheading;
+
   return (
     <div
       id={id}
@@ -10,10 +19,8 @@ export default function ExperienceSection({ id, className, title, subtitle }) {
     >
       <div className={styles.experienceContainer}>
         <div className={styles.experienceHeader}>
-          <h2 className={styles.experienceTitle}>{title || "Experience"}</h2>
-          <p className={styles.experienceSubtitle}>
-            {subtitle || "My professional journey and work experience"}
-          </p>
+          <h2 className={styles.experienceTitle}>{displayHeading}</h2>
+          <p className={styles.experienceSubtitle}>{displaySubheading}</p>
         </div>
 
         <div className={styles.noticeWrapper}>

package/src/theme/components/HeroSection/index.js

@@ -1,5 +1,6 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import SocialLinks from "../SocialLinks/index.js";
+import { FaChevronDown } from "react-icons/fa";
 import styles from "./styles.module.css";
 
 export default function HeroSection({ id, className }) {
@@ -10,7 +11,7 @@ export default function HeroSection({ id, className }) {
   const title = customFields.heroSection.title;
   const subtitle = customFields.heroSection.subtitle;
   const profession = customFields.heroSection.profession;
-  const description = customFields.heroSection.description;
+  const desc = customFields.heroSection.desc;
   const profilePic = customFields.heroSection.profilePic;
   const learnMoreButtonText = customFields.heroSection.learnMoreButtonTxt;
 
@@ -33,7 +34,7 @@ export default function HeroSection({ id, className }) {
             <h2 className={styles.profession}>{profession}</h2>
             <span className={styles.subtitle}>.</span>
           </div>
-          <p className={styles.description}>{description}</p>
+          <p className={styles.description}>{desc}</p>
           <div className={styles.actionRow}>
             <div className={styles.cta}>
               <a
@@ -44,7 +45,7 @@ export default function HeroSection({ id, className }) {
                 {learnMoreButtonText}
               </a>
             </div>
-            <SocialLinks />
+            <SocialLinks links={customFields.heroSection.social} />
           </div>
         </div>
         <div className={styles.rightSection}>

package/src/theme/components/HeroSection/styles.module.css

@@ -11,7 +11,7 @@
 @keyframes slideUp {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -22,7 +22,7 @@
 @keyframes slideInLeft {
   from {
     opacity: 0;
-    transform: translateX(-30px);
+    transform: translateX(-40px);
   }
   to {
     opacity: 1;
@@ -33,7 +33,7 @@
 @keyframes slideInRight {
   from {
     opacity: 0;
-    transform: translateX(30px);
+    transform: translateX(40px);
   }
   to {
     opacity: 1;
@@ -41,10 +41,10 @@
   }
 }
 
-@keyframes gentleAppear {
+@keyframes scaleIn {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
@@ -54,6 +54,7 @@
 
 /* Base layout */
 .hero {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -89,7 +90,7 @@
   color: var(--ifm-font-color-tertiary);
   font-family: var(--ifm-font-family-base);
   margin-bottom: 0.2rem;
-  animation: slideUp 0.6s ease-out 0.4s both;
+  animation: slideUp 0.8s ease-out 0.4s both;
 }
 
 .title {
@@ -98,7 +99,7 @@
   margin: 0.2rem 0;
   color: var(--ifm-color-primary);
   font-family: var(--ifm-font-family-base);
-  animation: slideUp 0.6s ease-out 0.6s both;
+  animation: slideUp 0.8s ease-out 0.6s both;
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
@@ -132,7 +133,7 @@
   font-family: var(--ifm-font-family-base);
   margin-left: 0.1rem;
   margin-right: 0.5rem;
-  animation: slideUp 0.6s ease-out 0.6s both;
+  animation: slideUp 0.8s ease-out 0.6s both;
 }
 
 /* Subtitle section */
@@ -140,7 +141,7 @@
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
-  animation: slideUp 0.6s ease-out 0.8s both;
+  animation: slideUp 0.8s ease-out 0.8s both;
 }
 
 .subtitle {
@@ -189,7 +190,7 @@
   max-width: 600px;
   font-family: var(--ifm-font-family-base);
   text-align: left;
-  animation: slideUp 0.6s ease-out 1s both;
+  animation: slideUp 0.8s ease-out 1s both;
 }
 
 /* Action row styling */
@@ -197,7 +198,7 @@
   display: flex;
   align-items: center;
   margin-top: 2.5rem;
-  animation: slideUp 0.6s ease-out 1.2s both;
+  animation: slideUp 0.8s ease-out 1.2s both;
 }
 
 .cta {
@@ -255,20 +256,20 @@
   height: 270px;
   border-radius: 20%;
   object-fit: cover;
-  box-shadow: 0 10px 25px var(--ifm-shadow-color);
+  box-shadow: none;
   margin-top: -30px;
   margin-right: 2rem;
   transition:
     transform 0.5s ease,
     box-shadow 0.5s ease;
-  animation: gentleAppear 0.8s ease-out both;
+  animation: scaleIn 0.8s ease-out both;
   will-change: transform;
   position: relative;
 }
 
 .profilePic:hover {
   transform: scale(1.04) translateY(-8px);
-  box-shadow: 0 15px 30px var(--ifm-shadow-color);
+  box-shadow: 0 20px 40px var(--ifm-shadow-color);
 }
 
 /* Responsive styles for sections */
@@ -311,7 +312,7 @@
     margin-top: -20px;
     margin-bottom: 1.2rem;
     margin-right: 0;
-    box-shadow: 0 8px 20px var(--ifm-shadow-color);
+    box-shadow: none;
   }
 
   .profilePic:hover {
@@ -418,7 +419,7 @@
     height: 160px;
     margin-top: -25px;
     margin-bottom: 1.5rem;
-    box-shadow: 0 6px 15px var(--ifm-shadow-color);
+    box-shadow: none;
   }
 
   .title {

package/src/theme/components/NavArrow/index.js

@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import Tooltip from "../Tooltip";
+import styles from "./styles.module.css";
+
+export default function NavArrow() {
+  const [direction, setDirection] = useState("down");
+  const [isVisible, setIsVisible] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const scrollTimeoutRef = useRef(null);
+
+  const getSections = () => {
+    // Dynamically find all main sections with IDs
+    const main = document.querySelector("main");
+    if (!main) return [];
+
+    return Array.from(main.querySelectorAll(":scope > [id]"))
+      .map((el) => el.id)
+      .filter((id) => id !== "nav-arrow"); // Exclude itself if it had an ID
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+      const windowHeight = window.innerHeight;
+      const fullHeight = document.documentElement.scrollHeight;
+
+      // Show after initial scroll
+      setIsVisible(scrollTop > 100);
+
+      // Point UP only if we are at the very bottom
+      if (scrollTop + windowHeight >= fullHeight - 50) {
+        setDirection("up");
+      } else {
+        setDirection("down");
+      }
+
+      setIsScrolling(true);
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = setTimeout(() => setIsScrolling(false), 800);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+    };
+  }, []);
+
+  const handleClick = () => {
+    if (direction === "up") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } else {
+      const sections = getSections();
+      const windowTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+
+      let nextSectionId = null;
+
+      // Find the first section whose top is below the current scroll position + small offset
+      for (const id of sections) {
+        const element = document.getElementById(id);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          const absoluteTop = rect.top + windowTop;
+
+          if (absoluteTop > windowTop + 100) {
+            nextSectionId = id;
+            break;
+          }
+        }
+      }
+
+      if (nextSectionId) {
+        const element = document.getElementById(nextSectionId);
+        element.scrollIntoView({ behavior: "smooth" });
+      } else {
+        // If no more sections, just go to bottom
+        window.scrollTo({
+          top: document.documentElement.scrollHeight,
+          behavior: "smooth",
+        });
+      }
+    }
+  };
+
+  return (
+    <button
+      className={`${styles.navArrow} ${isVisible ? styles.visible : ""} ${isScrolling ? styles.scrolling : ""}`}
+      onClick={handleClick}
+      aria-label={
+        direction === "down" ? "Scroll to next section" : "Scroll to top"
+      }
+    >
+      <Tooltip
+        msg={direction === "down" ? "Next Section" : "Back to Top"}
+        position="top"
+        gap={25}
+        underline={false}
+      >
+        <div className={`${styles.iconWrapper} ${styles[direction]}`}>
+          {direction === "down" ? (
+            <FaChevronDown className={styles.chevron} />
+          ) : (
+            <FaChevronUp className={styles.chevron} />
+          )}
+        </div>
+      </Tooltip>
+    </button>
+  );
+}

package/src/theme/components/NavArrow/styles.module.css

@@ -0,0 +1,107 @@
+:root {
+  --nav-arrow-size: 50px;
+  --nav-arrow-bottom: 2.5rem;
+  --nav-arrow-mobile-size: 46px;
+  --nav-arrow-mobile-bottom: 1.5rem;
+  --nav-arrow-bounce-y: -8px;
+}
+
+.navArrow {
+  position: fixed;
+  bottom: var(--nav-arrow-bottom);
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  width: var(--nav-arrow-size);
+  height: var(--nav-arrow-size);
+  border-radius: 50%;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-black);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: var(--ifm-z-index-fixed, 1000);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition:
+    transform var(--ifm-transition-slow) cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    opacity var(--ifm-transition-slow) ease,
+    background-color var(--ifm-transition-fast) ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.navArrow.visible {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.navArrow:hover {
+  background-color: var(--ifm-color-primary-darker);
+  transform: translateX(-50%) translateY(-5px) scale(1.1);
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.navArrow:active {
+  transform: translateX(-50%) translateY(-2px) scale(0.95);
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.down {
+  animation: bounce 2s infinite;
+}
+
+.chevron {
+  font-size: 1.4rem;
+  color: inherit;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(var(--nav-arrow-bounce-y));
+  }
+  60% {
+    transform: translateY(calc(var(--nav-arrow-bounce-y) / 2));
+  }
+}
+
+/* Subtly fade during manual scroll */
+.navArrow.scrolling {
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .navArrow {
+    bottom: var(--nav-arrow-mobile-bottom);
+    width: var(--nav-arrow-mobile-size);
+    height: var(--nav-arrow-mobile-size);
+  }
+
+  .chevron {
+    font-size: 1.2rem;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .navArrow {
+    transition: opacity var(--ifm-transition-fast) ease;
+    animation: none !important;
+  }
+  .navArrow.visible {
+    transform: translateX(-50%) translateY(0);
+  }
+}