portosaurus 2.0.2 → 2.1.0

package/src/{components → theme/components}/ContactSection/index.js

@@ -1,17 +1,19 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { iconMap } from "@site/src/config/iconMappings";
+import { iconMap } from "../../config/iconMappings";
 import { FaQuestionCircle } from "react-icons/fa";
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 const sortEmail = (links) => {
   return [...links].sort((a, b) => {
-    const isEmailA = a.url?.startsWith('mailto:') || 
-                    a.icon?.toLowerCase().includes('email') || 
-                    a.name?.toLowerCase().includes('email');
+    const isEmailA =
+      a.url?.startsWith("mailto:") ||
+      a.icon?.toLowerCase().includes("email") ||
+      a.name?.toLowerCase().includes("email");
 
-    const isEmailB = b.url?.startsWith('mailto:') || 
-                    b.icon?.toLowerCase().includes('email') || 
-                    b.name?.toLowerCase().includes('email');
+    const isEmailB =
+      b.url?.startsWith("mailto:") ||
+      b.icon?.toLowerCase().includes("email") ||
+      b.name?.toLowerCase().includes("email");
 
     if (isEmailA && !isEmailB) return -1;
     if (!isEmailA && isEmailB) return 1;
@@ -24,31 +26,40 @@ export default function ContactSection({ id, className, title, subtitle }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
   let socialLinks = customFields.socialLinks.links || [];
-  
+
   socialLinks = sortEmail(socialLinks);
 
   return (
-    <div id={id} className={`${styles.contactSection} ${className || ''}`} role="region" aria-label="Contact section">
+    <div
+      id={id}
+      className={`${styles.contactSection} ${className || ""}`}
+      role="region"
+      aria-label="Contact section"
+    >
       <div className={styles.contactContainer}>
         <div className={styles.contactHeader}>
-          <h2 className={styles.contactTitle}>
-            {title || "Get In Touch"}
-          </h2>
+          <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!"}
+            {subtitle ||
+              "Feel free to reach out for collaborations, questions, or just to say hello!"}
           </p>
         </div>
-        
+
         {/* SocialCard */}
         <div className={styles.gridWrapper}>
-          <div className={styles.socialGrid} role="list" aria-label="Social media and contact links">
+          <div
+            className={styles.socialGrid}
+            role="list"
+            aria-label="Social media and contact links"
+          >
             {socialLinks.map((social, index) => {
               const iconData = iconMap[social.icon] || {};
-              
+
               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 description =
+                name === "?" ? "" : social.desc || `Connect with me on ${name}`;
               const url = social.url;
 
               return (
@@ -70,12 +81,8 @@ export default function ContactSection({ id, className, title, subtitle }) {
                       <Icon aria-hidden="true" />
                     </div>
                   )}
-                  <h3 className={styles.socialTitle}>
-                    {name}
-                  </h3>
-                  <p className={styles.socialDesc}>
-                    {description}
-                  </p>
+                  <h3 className={styles.socialTitle}>{name}</h3>
+                  <p className={styles.socialDesc}>{description}</p>
                 </a>
               );
             })}

package/src/{components → theme/components}/ContactSection/styles.module.css

@@ -1,13 +1,12 @@
-
 /* Animations */
 @keyframes slideUp {
-  from { 
+  from {
     opacity: 0;
-    transform: translateY(20px); 
+    transform: translateY(20px);
   }
-  to { 
+  to {
     opacity: 1;
-    transform: translateY(0); 
+    transform: translateY(0);
   }
 }
 
@@ -22,7 +21,6 @@
   }
 }
 
-
 /* Contact Section styles */
 .contactSection {
   scroll-margin-top: var(--ifm-scroll-margin-top);
@@ -70,7 +68,6 @@
   animation: slideUp 0.5s ease-out 0.2s forwards;
 }
 
-
 /* SocialCard */
 .gridWrapper {
   display: flex;
@@ -98,7 +95,10 @@
   padding: 1.3rem 1.2rem;
   background-color: var(--ifm-card-background-color);
   opacity: 0;
-  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+  transition:
+    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);
@@ -122,7 +122,7 @@
 }
 
 .socialCard::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
@@ -140,7 +140,9 @@
   font-size: 3.5rem;
   margin-bottom: 0.3rem;
   color: var(--ifm-color-primary);
-  transition: color 0.3s ease, transform 0.3s ease;
+  transition:
+    color 0.3s ease,
+    transform 0.3s ease;
 }
 
 .socialCard:hover .socialIcon {
@@ -160,7 +162,7 @@
 }
 
 .socialTitle::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -181,7 +183,8 @@
   width: 100%;
 }
 
-.socialTitle:hover, .socialDesc:hover {
+.socialTitle:hover,
+.socialDesc:hover {
   text-decoration: none;
 }
 
@@ -190,7 +193,7 @@
   .socialCard {
     width: 140px;
   }
-  
+
   .socialGrid {
     gap: 1.1rem;
   }
@@ -200,7 +203,7 @@
   .socialCard {
     width: 150px;
   }
-  
+
   .socialGrid {
     gap: 1rem;
     max-width: 100%;
@@ -212,43 +215,43 @@
     scroll-margin-top: 70px;
     padding: 0.5rem 0 4rem;
   }
-  
+
   .contactContainer {
     padding: 0;
   }
-  
+
   .contactHeader {
     margin-bottom: 1.2rem;
     margin-top: 0rem;
   }
-  
+
   .contactTitle {
     font-size: 2.2rem;
   }
-  
+
   .contactSubtitle {
     font-size: 0.9rem;
   }
-  
+
   .socialCard {
     width: 150px;
     min-height: 150px;
     padding: 1.2rem 1.2rem;
   }
-  
+
   .socialIcon {
     font-size: 3rem;
     margin-bottom: 0.25rem;
   }
-  
+
   .socialTitle {
     font-size: 1.5rem;
   }
-  
+
   .socialGrid {
     padding: 0 1rem;
   }
-  
+
   .gridWrapper {
     margin-top: 1rem;
   }
@@ -259,7 +262,7 @@
     scroll-margin-top: var(--ifm-scroll-margin-top-mobile);
     padding: 0rem 0 3rem;
   }
-  
+
   .contactContainer {
     padding: 0;
   }
@@ -300,7 +303,7 @@
     top: 1.5px;
   }
 
-  .socialTitle, 
+  .socialTitle,
   .socialDesc,
   .socialCard::after {
     display: none;
@@ -316,7 +319,9 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .contactTitle, .contactSubtitle, .socialCard {
+  .contactTitle,
+  .contactSubtitle,
+  .socialCard {
     animation: none !important;
     transition: none !important;
   }

package/src/{components → theme/components}/ExperienceSection/index.js

@@ -1,22 +1,27 @@
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 export default function ExperienceSection({ id, className, title, subtitle }) {
   return (
-    <div id={id} className={`${styles.experienceSection} ${className || ''}`} role="region" aria-label="Experience section">
+    <div
+      id={id}
+      className={`${styles.experienceSection} ${className || ""}`}
+      role="region"
+      aria-label="Experience section"
+    >
       <div className={styles.experienceContainer}>
         <div className={styles.experienceHeader}>
-          <h2 className={styles.experienceTitle}>
-            {title || "Experience"}
-          </h2>
+          <h2 className={styles.experienceTitle}>{title || "Experience"}</h2>
           <p className={styles.experienceSubtitle}>
             {subtitle || "My professional journey and work experience"}
           </p>
         </div>
-        
+
         <div className={styles.noticeWrapper}>
           <div className={styles.noticeBox} role="status" aria-live="polite">
             <p className={styles.noticeText}>Coming Soon!</p>
-            <p className={styles.noticeDesc}>This section is under construction.</p>
+            <p className={styles.noticeDesc}>
+              This section is under construction.
+            </p>
           </div>
         </div>
       </div>

package/src/{components → theme/components}/ExperienceSection/styles.module.css

@@ -1,4 +1,3 @@
-
 .experienceSection {
   scroll-margin-top: var(--ifm-scroll-margin-top);
   min-height: calc(100vh - 45px);
@@ -60,7 +59,9 @@
   border: 1px solid var(--ifm-color-emphasis-300);
   animation: fadeIn 0.5s ease-out 0.3s forwards;
   opacity: 0;
-  transition: transform 0.3s ease, background-color 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    background-color 0.3s ease;
   width: 100%;
   max-width: 600px;
 }
@@ -85,13 +86,13 @@
 
 /* Animations */
 @keyframes slideUp {
-  from { 
+  from {
     opacity: 0;
-    transform: translateY(20px); 
+    transform: translateY(20px);
   }
-  to { 
+  to {
     opacity: 1;
-    transform: translateY(0); 
+    transform: translateY(0);
   }
 }
 
@@ -112,24 +113,24 @@
     scroll-margin-top: 70px;
     padding: 0.5rem 0 4rem;
   }
-  
+
   .experienceContainer {
     padding: 0 1.5rem;
   }
-  
+
   .experienceHeader {
     margin-bottom: 1.5rem;
-    margin-top: -2.5rem; 
+    margin-top: -2.5rem;
   }
-  
+
   .experienceTitle {
     font-size: 2.2rem;
   }
-  
+
   .experienceSubtitle {
     font-size: 0.9rem;
   }
-  
+
   .noticeText {
     font-size: 1.8rem;
   }
@@ -140,40 +141,42 @@
     scroll-margin-top: var(--ifm-scroll-margin-top-mobile);
     padding: 0rem 0 3rem;
   }
-  
+
   .experienceContainer {
     padding: 0 1rem;
   }
-  
+
   .experienceHeader {
     margin-bottom: 1.2rem;
     margin-top: -2rem;
   }
-  
+
   .experienceTitle {
     font-size: 1.9rem;
   }
-  
+
   .experienceSubtitle {
     font-size: 0.9rem;
     max-width: 90%;
   }
-  
+
   .noticeText {
     font-size: 1.5rem;
   }
-  
+
   .noticeDesc {
     font-size: 0.9rem;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .experienceTitle, .experienceSubtitle, .noticeBox {
+  .experienceTitle,
+  .experienceSubtitle,
+  .noticeBox {
     animation: none !important;
     transition: none !important;
   }
-  
+
   .noticeBox {
     opacity: 1;
   }

package/src/{components → theme/components}/HeroSection/index.js

@@ -1,6 +1,6 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import SocialLinks from "@site/src/components/SocialLinks/index.js";
-import styles from './styles.module.css';
+import SocialLinks from "../SocialLinks/index.js";
+import styles from "./styles.module.css";
 
 export default function HeroSection({ id, className }) {
   const { siteConfig } = useDocusaurusContext();
@@ -16,10 +16,10 @@ export default function HeroSection({ id, className }) {
 
   return (
     <div
-        className={`${styles.hero} ${className || ''}`}
-        id={id} 
-        role="region" 
-        aria-label="Hero section"
+      className={`${styles.hero} ${className || ""}`}
+      id={id}
+      role="region"
+      aria-label="Hero section"
     >
       <div className={styles.container}>
         <div className={styles.leftSection}>
@@ -33,17 +33,15 @@ 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}>{description}</p>
           <div className={styles.actionRow}>
             <div className={styles.cta}>
-              <a 
+              <a
                 href="#about"
                 className={styles.ctaButton}
                 aria-label="Learn more about me"
               >
-                {learnMoreButtonText} 
+                {learnMoreButtonText}
               </a>
             </div>
             <SocialLinks />

package/src/{components → theme/components}/HeroSection/styles.module.css

@@ -1,17 +1,21 @@
 /* Animations */
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideUp {
-  from { 
+  from {
     opacity: 0;
-    transform: translateY(20px); 
+    transform: translateY(20px);
   }
-  to { 
+  to {
     opacity: 1;
-    transform: translateY(0); 
+    transform: translateY(0);
   }
 }
 
@@ -48,7 +52,6 @@
   }
 }
 
-
 /* Base layout */
 .hero {
   display: flex;
@@ -68,7 +71,7 @@
   width: 90%;
   margin: 0 auto;
   margin-bottom: 2rem;
-  padding: 0 2rem; 
+  padding: 0 2rem;
 }
 
 /* Left section */
@@ -76,7 +79,7 @@
   flex: 1;
   text-align: left;
   padding-right: 3rem;
-  padding-left: 1rem; 
+  padding-left: 1rem;
   animation: slideInLeft 0.8s ease-out 0.2s both;
 }
 
@@ -108,7 +111,7 @@
 }
 
 .title::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0;
   height: 3px;
@@ -164,7 +167,7 @@
 }
 
 .profession::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0;
   height: 3px;
@@ -207,13 +210,15 @@
 .ctaButton {
   display: inline-block;
   padding: 0.5rem 1.2rem;
-  font-size: 0.95rem; 
+  font-size: 0.95rem;
   font-weight: 500;
   text-decoration: none;
   color: var(--ifm-background-color);
   background-color: var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
-  transition: all 0.3s ease, transform 0.2s ease;
+  transition:
+    all 0.3s ease,
+    transform 0.2s ease;
   border: 2px solid var(--ifm-color-primary);
   cursor: pointer;
   outline: none;
@@ -242,18 +247,20 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 0;
-  padding-right: 2rem; 
+  padding-right: 2rem;
   animation: slideInRight 0.8s ease-out 0.3s both;
 }
 
 .profilePic {
-  height: 270px; 
+  height: 270px;
   border-radius: 20%;
   object-fit: cover;
   box-shadow: 0 10px 25px var(--ifm-shadow-color);
   margin-top: -30px;
-  margin-right: 2rem; 
-  transition: transform 0.5s ease, box-shadow 0.5s ease;
+  margin-right: 2rem;
+  transition:
+    transform 0.5s ease,
+    box-shadow 0.5s ease;
   animation: gentleAppear 0.8s ease-out both;
   will-change: transform;
   position: relative;
@@ -266,7 +273,6 @@
 
 /* Responsive styles for sections */
 @media (max-width: 768px) {
-
   .intro {
     animation: slideUp 0.6s ease-out 0.4s both;
   }
@@ -393,19 +399,17 @@
     width: 25px;
     height: 25px;
   }
-  
 }
 
 /* Responsive styles for mobile devices */
 @media (max-width: 480px) {
-
   .hero {
     min-height: calc(100vh);
     padding: 0.5rem 0 2rem;
   }
 
   .rightSection {
-    margin-top: -2.0rem; 
+    margin-top: -2rem;
     margin-bottom: 0;
   }
 
@@ -417,8 +421,8 @@
     box-shadow: 0 6px 15px var(--ifm-shadow-color);
   }
 
-  .title { 
-    font-size: 2.3rem; 
+  .title {
+    font-size: 2.3rem;
     animation: slideUp 0.5s ease-out 0.3s both;
   }
 
@@ -427,13 +431,13 @@
     animation: slideUp 0.5s ease-out 0.3s both;
   }
 
-  .subtitle { 
-    font-size: 1rem; 
-    margin-right: 0.3rem; 
+  .subtitle {
+    font-size: 1rem;
+    margin-right: 0.3rem;
   }
 
-  .profession { 
-    font-size: 1.5rem; 
+  .profession {
+    font-size: 1.5rem;
   }
 
   .description {
@@ -462,10 +466,18 @@
 
 /* Consolidated Accessibility */
 @media (prefers-reduced-motion: reduce) {
-  .hero, .leftSection, .rightSection, .profilePic, 
-  .intro, .title, .titleComma, .subtitleWrapper, .description, 
-  .actionRow, .socialIcons a {
+  .hero,
+  .leftSection,
+  .rightSection,
+  .profilePic,
+  .intro,
+  .title,
+  .titleComma,
+  .subtitleWrapper,
+  .description,
+  .actionRow,
+  .socialIcons a {
     animation: none !important;
     transition: none !important;
   }
-}
+}

package/src/{components → theme/components}/NoteIndex/index.js

@@ -2,9 +2,9 @@ import { useRef, useState, useEffect } from "react";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { iconMap } from "@site/src/config/iconMappings.js";
+import { iconMap } from "../../config/iconMappings.js";
 import DocCardList from "@theme/DocCardList";
-import Tooltip from "@site/src/components/Tooltip/index.js";
+import Tooltip from "../Tooltip/index.js";
 
 import { FaBook } from "react-icons/fa";
 import styles from "./styles.module.css";
@@ -85,7 +85,14 @@ function NoteCard({
       }}
     >
       <strong style={{ fontSize: "0.95em" }}>{title}</strong>
-      <span style={{ fontSize: "0.85em", opacity: 0.85, fontWeight: 400, textAlign: "left" }}>
+      <span
+        style={{
+          fontSize: "0.85em",
+          opacity: 0.85,
+          fontWeight: 400,
+          textAlign: "left",
+        }}
+      >
         {description}
       </span>
     </span>