portosaurus 3.0.2 → 4.0.1

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

@@ -8,98 +8,161 @@
 
 .hasUnderline {
   cursor: help;
-  border-bottom: 1.5px dotted var(--ifm-color-primary);
-  transition: border-bottom-color 0.2s ease;
+  text-decoration: none;
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--ifm-color-primary), transparent 40%) 1px,
+    transparent 1.2px
+  );
+  background-position: bottom;
+  background-size: 6px 2.5px;
+  background-repeat: space no-repeat;
+  padding-bottom: 1px;
+  transition: background-image 0.2s ease;
 }
 
 .hasUnderline:hover {
-  border-bottom-style: dashed;
-  border-bottom-color: var(--ifm-color-primary-darker);
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--ifm-color-primary-darker), transparent 10%) 1.2px,
+    transparent 1.5px
+  );
 }
 
 .tooltip {
   position: fixed;
   background-color: var(--tooltip-color, var(--ifm-background-surface-color));
   color: var(--tooltip-text-color, var(--ifm-font-color-base));
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-weight: 400;
+  padding: 8px 12px;
+  border-radius: var(--ifm-global-radius);
+  font-size: 0.85rem;
+  font-weight: 450;
+  text-align: center;
+  line-height: 1.4;
   white-space: normal;
   word-break: break-word;
-  max-width: min(320px, 90vw);
+  overflow-wrap: anywhere;
+  max-width: min(240px, 90vw);
   width: max-content;
   z-index: 9999;
   opacity: 0;
-  animation: tooltipFadeIn 0.15s ease-out forwards;
-  box-shadow: var(--ifm-global-shadow-md);
+  filter: var(
+    --tooltip-shadow,
+    drop-shadow(0 8px 24px rgba(var(--ifm-color-emphasis-900-rgb), 0.3))
+  );
+  border: 1px solid var(--ifm-color-emphasis-300);
   pointer-events: none;
 }
 
-.arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background-color: inherit;
+.top {
+  transform: translateX(-50%) translateY(-100%);
+  animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
-/* Positioning: coordinates are set via JS (top/left on the element).
-   These classes only handle the transform offset from that anchor point. */
+.bottom {
+  transform: translateX(-50%);
+  animation: popDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
 
-.top {
-  transform: translateX(-50%) translateY(-100%);
+.left {
+  transform: translateX(-100%) translateY(-50%);
+  animation: popLeft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.right {
+  transform: translateY(-50%);
+  animation: popRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: inherit;
 }
 
 .top .arrow {
   top: 100%;
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
-  margin-top: -4px;
-}
-
-.bottom {
-  transform: translateX(-50%);
+  margin-top: -5.5px;
+  border-right: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
 }
 
 .bottom .arrow {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
-  margin-bottom: -4px;
-}
-
-.left {
-  transform: translateX(-100%) translateY(-50%);
+  margin-bottom: -5.5px;
+  border-left: 1px solid var(--ifm-color-emphasis-300);
+  border-top: 1px solid var(--ifm-color-emphasis-300);
 }
 
 .left .arrow {
-  right: -4px;
+  right: -5.5px;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
-}
-
-.right {
-  transform: translateY(-50%);
+  border-right: 1px solid var(--ifm-color-emphasis-300);
+  border-top: 1px solid var(--ifm-color-emphasis-300);
 }
 
 .right .arrow {
-  left: -4px;
+  left: -5.5px;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
+  border-left: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
 }
 
-@keyframes tooltipFadeIn {
+@keyframes popUp {
   from {
     opacity: 0;
+    transform: translateX(-50%) translateY(-95%) scale(0.9);
   }
   to {
     opacity: 1;
+    transform: translateX(-50%) translateY(-100%) scale(1);
+  }
+}
+
+@keyframes popDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-5%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes popLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-95%) translateY(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-100%) translateY(-50%) scale(1);
+  }
+}
+
+@keyframes popRight {
+  from {
+    opacity: 0;
+    transform: translateX(5%) translateY(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) translateY(-50%) scale(1);
   }
 }
 
 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
   .tooltip {
-    animation: none;
+    animation: none !important;
+    opacity: 1;
   }
 }

package/src/theme/config/iconMappings.js

@@ -106,6 +106,7 @@ import {
   SiElasticsearch,
   SiGraphql,
   SiGoogledrive,
+  SiLua,
 } from "react-icons/si";
 
 import {
@@ -204,6 +205,7 @@ export const iconMap = {
   php: { icon: FaPhp, color: "#777BB4" },
   html: { icon: FaHtml5, color: "#E34F26" },
   css: { icon: FaCss3Alt, color: "#1572B6" },
+  lua: { icon: SiLua, color: "#000080" },
   sql: { icon: SiMysql, color: "#4479A1" },
   postgresql: { icon: BiLogoPostgresql, color: "#336791" },
   postgres: { icon: BiLogoPostgresql, color: "#336791" },

package/src/theme/css/custom.css

@@ -179,3 +179,75 @@ mark {
   justify-content: center;
   align-items: center;
 }
+
+/* === Global Entrance Animations === */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes skillAppear {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Base reveal state */
+.reveal-on-scroll {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.reveal-on-scroll.isVisible {
+  opacity: 1;
+}

package/src/theme/hooks/useScrollReveal.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useRef } from "react";
+
+/**
+ * A reusable hook to detect when an element enters the viewport.
+ * @param {Object} options IntersectionObserver options
+ * @returns {Array} [ref, isVisible]
+ */
+export default function useScrollReveal(options = { threshold: 0.05 }) {
+  const [isVisible, setIsVisible] = useState(false);
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    }, options);
+
+    const currentElement = elementRef.current;
+    if (currentElement) {
+      observer.observe(currentElement);
+    }
+
+    return () => {
+      if (currentElement) {
+        observer.unobserve(currentElement);
+      }
+    };
+  }, [options]);
+
+  return [elementRef, isVisible];
+}

package/src/theme/pages/index.js

@@ -8,7 +8,7 @@ import AboutSection from "../components/AboutSection/index.js";
 import ProjectsSection from "../components/ProjectsSection/index.js";
 import ContactSection from "../components/ContactSection/index.js";
 import ExperienceSection from "../components/ExperienceSection/index.js";
-import ScrollToTop from "../components/ScrollToTop/index.js";
+import NavArrow from "../components/NavArrow/index.js";
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
@@ -43,39 +43,19 @@ export default function Home() {
         <HeroSection id="me" />
 
         {/* About Section */}
-        {aboutMe.enable !== false && (
-          <AboutSection id="about" title="About Me" />
-        )}
+        <AboutSection id="about" />
 
         {/* Projects Section */}
-        {projects.enable !== false && (
-          <ProjectsSection
-            id="projects"
-            title="My Projects"
-            subtitle="A collection of all my works, with featured projects highlighted"
-          />
-        )}
+        <ProjectsSection id="projects" />
 
         {/* Experience Section */}
-        {experience.enable !== false && (
-          <ExperienceSection
-            id="experience"
-            title="Experience"
-            subtitle="My professional journey and work experience"
-          />
-        )}
+        <ExperienceSection id="experience" />
 
         {/* Contact Section */}
-        {socialLinks.enable !== false && (
-          <ContactSection
-            id="contact"
-            title="Get In Touch"
-            subtitle="Feel free to reach out for collaborations, questions, or just to say hello!"
-          />
-        )}
+        <ContactSection id="contact" />
 
-        {/* Scroll to top button */}
-        <ScrollToTop hideDelay={3500} />
+        {/* Smart Navigation Arrow */}
+        <NavArrow />
       </main>
     </Layout>
   );

package/src/theme/pages/notes.js

@@ -1,7 +1,7 @@
 import Layout from "@theme/Layout";
 import NoteCards from "../components/NoteIndex/index.js";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import ScrollToTop from "../components/ScrollToTop/index.js";
+import NavArrow from "../components/NavArrow/index.js";
 import HashNavigation from "../utils/HashNavigation.js";
 
 const style = {
@@ -70,7 +70,7 @@ export default function Notes() {
             </p>
           </header>
           <NoteCards />
-          <ScrollToTop />
+          <NavArrow />
           <HashNavigation
             elementPrefix="note-"
             elementSelector=".note-card"

package/src/theme/pages/tasks.js

@@ -97,8 +97,8 @@ function TaskList({ filterStatus, taskList }) {
 
               <div className="task-cell task-cell-title">
                 <div className="task-title">{task.title}</div>
-                {task.description && (
-                  <div className="task-description">{task.description}</div>
+                {task.desc && (
+                  <div className="task-description">{task.desc}</div>
                 )}
               </div>
 
@@ -256,8 +256,8 @@ export default function TasksPage() {
   const { customFields } = siteConfig || {};
 
   const tasksPage = customFields?.tasksPage;
-  const title = tasksPage.title;
-  const description = tasksPage.description;
+  const heading = tasksPage.heading || "Tasks";
+  const subheading = tasksPage.subheading || "Roadmap & Goals";
   const taskList =
     tasksPage.enable && tasksPage.taskList ? tasksPage.taskList : [];
 
@@ -276,7 +276,7 @@ export default function TasksPage() {
               </div>
               <h2 className="disabled-title">Tasks are currently disabled</h2>
               <p className="disabled-help">
-                To enable tasks, set <code>tasks_page.enable</code> to{" "}
+                To enable tasks, set <code>tasks.enable</code> to{" "}
                 <code>true</code>
               </p>
             </div>
@@ -287,17 +287,18 @@ export default function TasksPage() {
   }
 
   return (
-    <Layout title={title} description={description}>
+    <Layout title={heading} description={subheading}>
       <Head>
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta name="twitter:title" content={title} />
-        <meta name="twitter:description" content={description} />
+        <meta property="og:title" content={heading} />
+        <meta property="og:description" content={subheading} />
+        <meta name="twitter:title" content={heading} />
+        <meta name="twitter:description" content={subheading} />
       </Head>
 
       <div className="tasks-container">
         <div className="tasks-header">
-          <h1 className="tasks-heading">{title}</h1>
+          <h1 className="tasks-heading">{heading}</h1>
+          {subheading && <p className="tasks-subheading">{subheading}</p>}
         </div>
 
         <div className="tasks-content">

package/src/utils/cliUtils.mjs

@@ -12,17 +12,32 @@ export function writePortoConfigShim(UserRoot) {
   const dotDir = path.join(UserRoot, ".docusaurus", "portosaurus");
   fs.mkdirSync(dotDir, { recursive: true });
 
-  const configJsAbsolute = path.join(UserRoot, "config.js").replace(/\\/g, "/");
+  const configYaml = ["config.yaml", "config.yml"].find((f) =>
+    fs.existsSync(path.join(UserRoot, f)),
+  );
+
+  if (!configYaml) {
+    logger.error("No config.yaml or config.yml found in project root.");
+    process.exit(1);
+  }
+
+  const configYamlAbsolute = path
+    .join(UserRoot, configYaml)
+    .replace(/\\/g, "/");
   const createDocuConfAbsolute = path
     .resolve(PortoRoot, "src/core/buildDocuConfig.mjs")
     .replace(/\\/g, "/");
 
   const shimContent = `// Auto-generated by Portosaurus CLI — do not edit
+import fs from "fs";
+import yaml from "js-yaml";
+
 /** @type {import('@docusaurus/types').Config} */
 export default async function getConfig() {
   const { buildDocuConfig } = await import("file://${createDocuConfAbsolute}");
-  const { usrConf } = await import("file://${configJsAbsolute}");
-  return buildDocuConfig(usrConf, "${UserRoot.replace(/\\/g, "/")}");
+  const yamlContent = fs.readFileSync("${configYamlAbsolute}", "utf8");
+  const rawConf = yaml.load(yamlContent);
+  return buildDocuConfig(rawConf, "${UserRoot.replace(/\\/g, "/")}");
 }
 `;
 
@@ -37,11 +52,13 @@ export default async function getConfig() {
  * Validate that the current directory is a Portosaurus project.
  */
 export function validateProject(UserRoot) {
-  const configPath = path.join(UserRoot, "config.js");
-  if (!fs.existsSync(configPath)) {
+  const configPath = ["config.yaml", "config.yml"].find((f) =>
+    fs.existsSync(path.join(UserRoot, f)),
+  );
+  if (!configPath) {
     logger.log("");
     logger.error(
-      "config.js not found. Are you in a Portosaurus project directory?",
+      "config.yml/config.yaml not found. Are you in a Portosaurus project directory?",
     );
     process.exit(1);
   }
@@ -99,48 +116,3 @@ export function runDocusaurus(command, extraArgs, UserRoot, configPath) {
     });
   });
 }
-
-// Recursively copy a directory and apply text replacements.
-export function mirrorSync(src, dest, replacements = {}, ignores = []) {
-  const ignoreSet = new Set(ignores);
-  const textExtensions = new Set([
-    ".js",
-    ".mjs",
-    ".json",
-    ".md",
-    ".mdx",
-    ".yml",
-    ".yaml",
-    ".css",
-    ".html",
-    ".txt",
-  ]);
-
-  fs.mkdirSync(dest, { recursive: true });
-
-  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
-    if (ignoreSet.has(entry.name)) continue;
-
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-
-    if (entry.isDirectory()) {
-      mirrorSync(srcPath, destPath, replacements, ignores);
-    } else {
-      const ext = path.extname(entry.name).toLowerCase();
-
-      // If replacements exist and it's a known text file, process it
-      if (Object.keys(replacements).length > 0 && textExtensions.has(ext)) {
-        let content = fs.readFileSync(srcPath, "utf8");
-        for (const [key, value] of Object.entries(replacements)) {
-          // Replace all occurrences of {{key}}
-          const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-          content = content.replace(regex, value);
-        }
-        fs.writeFileSync(destPath, content);
-      } else {
-        fs.copyFileSync(srcPath, destPath); // Safe copy for binaries (images, etc) or when no replacements needed
-      }
-    }
-  }
-}