@portosaur/theme 0.1.0

package/theme/hooks/useScrollReveal.jsx

@@ -0,0 +1,20 @@
+import { useState, useEffect, useRef } from "react";
+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/theme/pages/index.jsx

@@ -0,0 +1,104 @@
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import UpdateTitle from "../utils/updateTitle.js";
+import HeroSection from "../components/HeroSection/index.js";
+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 NavArrow from "../components/NavArrow/index.js";
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+
+  const sectionTitles = {
+    me: `Home | ${siteConfig.title}`,
+    about: `About Me | ${siteConfig.title}`,
+    projects: `Projects | ${siteConfig.title}`,
+    experience: `Experience | ${siteConfig.title}`,
+    contact: `Contact | ${siteConfig.title}`,
+  };
+  const customStyles = `
+  /* For future */
+  `;
+  return jsxDEV_7x81h0kn(
+    Layout,
+    {
+      title: "Me",
+      description: "My portfolio website",
+      children: [
+        jsxDEV_7x81h0kn(
+          "style",
+          { children: customStyles },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          UpdateTitle,
+          { sections: sectionTitles, defaultTitle: siteConfig.title },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "main",
+          {
+            children: [
+              jsxDEV_7x81h0kn(
+                HeroSection,
+                { id: "me" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                AboutSection,
+                { id: "about" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                ProjectsSection,
+                { id: "projects" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                ExperienceSection,
+                { id: "experience" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                ContactSection,
+                { id: "contact" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(NavArrow, {}, undefined, false, undefined, this),
+            ],
+          },
+          undefined,
+          true,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/pages/notes.jsx

@@ -0,0 +1,131 @@
+import Layout from "@theme/Layout";
+import NoteCards from "../components/NoteIndex/index.js";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import NavArrow from "../components/NavArrow/index.js";
+import HashNavigation from "../utils/HashNavigation.js";
+const style = {
+  notesContainer: { padding: "2rem 0", maxWidth: "1200px", margin: "0 auto" },
+  pageTitle: {
+    fontSize: "2.5rem",
+    textAlign: "center",
+    marginBottom: "0.5rem",
+    color: "var(--ifm-color-primary)",
+    animation: "slideUp 0.5s ease-out forwards",
+  },
+  pageDescription: {
+    fontSize: "0.9rem",
+    textAlign: "center",
+    color: "var(--ifm-font-color-tertiary)",
+    marginBottom: "2rem",
+    animation: "slideUp 0.5s ease-out 0.2s forwards",
+  },
+  "@keyframes slideUp": {
+    from: { opacity: 0, transform: "translateY(20px)" },
+    to: { opacity: 1, transform: "translateY(0)" },
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    notesContainer: { animation: "none !important" },
+    pageTitle: { animation: "none !important" },
+    pageDescription: { animation: "none !important", opacity: 1 },
+  },
+};
+export default function Notes() {
+  const { path: docsBasePath } = usePluginData(
+    "docusaurus-plugin-content-docs",
+  );
+  const pathName = docsBasePath.replace("/", "");
+  const pageTitle = pathName.charAt(0).toUpperCase() + pathName.slice(1);
+  return jsxDEV_7x81h0kn(
+    Layout,
+    {
+      title: pageTitle,
+      description: `My ${pageTitle}`,
+      children: jsxDEV_7x81h0kn(
+        "main",
+        {
+          style: style.notesContainer,
+          children: jsxDEV_7x81h0kn(
+            "div",
+            {
+              className: "container",
+              children: [
+                jsxDEV_7x81h0kn(
+                  "header",
+                  {
+                    className: "text-center mb-4",
+                    children: [
+                      jsxDEV_7x81h0kn(
+                        "h1",
+                        { style: style.pageTitle, children: "My Notes" },
+                        undefined,
+                        false,
+                        undefined,
+                        this,
+                      ),
+                      jsxDEV_7x81h0kn(
+                        "p",
+                        {
+                          style: style.pageDescription,
+                          children:
+                            "A collection of my self written notes & reference guides",
+                        },
+                        undefined,
+                        false,
+                        undefined,
+                        this,
+                      ),
+                    ],
+                  },
+                  undefined,
+                  true,
+                  undefined,
+                  this,
+                ),
+                jsxDEV_7x81h0kn(
+                  NoteCards,
+                  {},
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+                jsxDEV_7x81h0kn(
+                  NavArrow,
+                  {},
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+                jsxDEV_7x81h0kn(
+                  HashNavigation,
+                  {
+                    elementPrefix: "note-",
+                    elementSelector: ".note-card",
+                    effectDuration: 6000,
+                  },
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+              ],
+            },
+            undefined,
+            true,
+            undefined,
+            this,
+          ),
+        },
+        undefined,
+        false,
+        undefined,
+        this,
+      ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}