@portosaur/theme 0.1.0

package/theme/MDXComponents.jsx

@@ -0,0 +1,19 @@
+import MDXComponents from "@docusaurus/theme-classic/lib/theme/MDXComponents";
+import Details from "@theme/Details";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { Pv, SrcPv } from "./components/Preview/index.js";
+import Tooltip from "./components/Tooltip/index.js";
+import NoteCards, { TopicList } from "./components/NoteIndex/index.js";
+const components = {
+  ...MDXComponents,
+  Pv,
+  SrcPv,
+  TopicList,
+  NoteCards,
+  Details,
+  Tabs,
+  TabItem,
+  Tooltip,
+};
+export default components;

package/theme/README.md

@@ -0,0 +1,9 @@
+# Portosaur Theme Source
+
+This is the heart of the Portosaur visual experience. It contains the React components, styles, and MDX configurations that define the look and feel of the site.
+
+- **`Root.js`**: The top-level wrapper providing global state (Preview Context).
+- **`MDXComponents.js`**: Maps custom components (`<Pv>`, `<SrcPv>`) so they are available in markdown files without explicit imports.
+- **`components/`**: Modular React components (Navbar, Footer, Previewer, etc.).
+- **`css/`**: Global styles and theme tokens.
+- **`pages/`**: Template pages (Notes index, Tasks index).

package/theme/Root.jsx

@@ -0,0 +1,11 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { PreviewProvider, ViewerWindow } from "./components/Preview/index.js";
+
+export default function Root({ children }) {
+  return (
+    <PreviewProvider>
+      {children}
+      <BrowserOnly>{() => <ViewerWindow />}</BrowserOnly>
+    </PreviewProvider>
+  );
+}

package/theme/components/AboutSection/index.jsx

@@ -0,0 +1,264 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useScrollReveal from "../../hooks/useScrollReveal";
+import { FaDownload } from "react-icons/fa";
+import { Pv } from "../Preview/index.js";
+import useBrokenLinks from "@docusaurus/useBrokenLinks";
+import styles from "./styles.module.css";
+export default function AboutSection({ id, className }) {
+  const { siteConfig } = useDocusaurusContext();
+  const brokenLinks = useBrokenLinks();
+  if (id) {
+    brokenLinks.collectAnchor(id);
+  }
+  const { customFields } = siteConfig;
+  const aboutMe = customFields.aboutMe || {};
+  if (aboutMe.enable === false) return null;
+  const [sectionRef, isVisible] = useScrollReveal();
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      id,
+      ref: sectionRef,
+      className: `${styles.aboutSection} ${isVisible ? "is-visible" : ""} ${className || ""}`,
+      role: "region",
+      "aria-label": "About me section",
+      children: jsxDEV_7x81h0kn(
+        "div",
+        {
+          className: styles.aboutContainer,
+          children: [
+            jsxDEV_7x81h0kn(
+              "div",
+              {
+                className: styles.aboutHeader,
+                children: jsxDEV_7x81h0kn(
+                  "h2",
+                  {
+                    className: styles.aboutHeading,
+                    children: aboutMe.heading || "About Me",
+                  },
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+              },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+            jsxDEV_7x81h0kn(
+              "div",
+              {
+                className: styles.aboutContent,
+                children: jsxDEV_7x81h0kn(
+                  "div",
+                  {
+                    className: styles.aboutCard,
+                    children: [
+                      jsxDEV_7x81h0kn(
+                        "div",
+                        {
+                          className: styles.bioImageContainer,
+                          children: [
+                            aboutMe.image &&
+                              jsxDEV_7x81h0kn(
+                                "div",
+                                {
+                                  className: styles.imageWrapper,
+                                  children: jsxDEV_7x81h0kn(
+                                    "img",
+                                    {
+                                      src: aboutMe.image,
+                                      alt: aboutMe.name || "About Me",
+                                      className: styles.aboutImage,
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                },
+                                undefined,
+                                false,
+                                undefined,
+                                this,
+                              ),
+                            aboutMe.resume &&
+                              jsxDEV_7x81h0kn(
+                                "div",
+                                {
+                                  className: styles.resumeContainer,
+                                  children: jsxDEV_7x81h0kn(
+                                    Pv,
+                                    {
+                                      href: aboutMe.resume,
+                                      title: "My Resume",
+                                      children: jsxDEV_7x81h0kn(
+                                        "span",
+                                        {
+                                          className: styles.resumeButton,
+                                          children: [
+                                            jsxDEV_7x81h0kn(
+                                              FaDownload,
+                                              {},
+                                              undefined,
+                                              false,
+                                              undefined,
+                                              this,
+                                            ),
+                                            " View Resume",
+                                          ],
+                                        },
+                                        undefined,
+                                        true,
+                                        undefined,
+                                        this,
+                                      ),
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                },
+                                undefined,
+                                false,
+                                undefined,
+                                this,
+                              ),
+                          ],
+                        },
+                        undefined,
+                        true,
+                        undefined,
+                        this,
+                      ),
+                      jsxDEV_7x81h0kn(
+                        "div",
+                        {
+                          className: styles.bioTextContainer,
+                          children: [
+                            jsxDEV_7x81h0kn(
+                              "div",
+                              {
+                                className: styles.bioText,
+                                children: Array.isArray(aboutMe.bio)
+                                  ? aboutMe.bio.map((paragraph, index) =>
+                                      jsxDEV_7x81h0kn(
+                                        "p",
+                                        {
+                                          className: styles.aboutParagraph,
+                                          children: paragraph,
+                                        },
+                                        index,
+                                        false,
+                                        undefined,
+                                        this,
+                                      ),
+                                    )
+                                  : jsxDEV_7x81h0kn(
+                                      "p",
+                                      {
+                                        className: styles.aboutParagraph,
+                                        children: aboutMe.bio,
+                                      },
+                                      undefined,
+                                      false,
+                                      undefined,
+                                      this,
+                                    ),
+                              },
+                              undefined,
+                              false,
+                              undefined,
+                              this,
+                            ),
+                            aboutMe.skills &&
+                              aboutMe.skills.length > 0 &&
+                              jsxDEV_7x81h0kn(
+                                "div",
+                                {
+                                  className: styles.skillsContainer,
+                                  children: [
+                                    jsxDEV_7x81h0kn(
+                                      "h3",
+                                      {
+                                        className: styles.skillsTitle,
+                                        children:
+                                          aboutMe.skillsHeading || "My Skills",
+                                      },
+                                      undefined,
+                                      false,
+                                      undefined,
+                                      this,
+                                    ),
+                                    jsxDEV_7x81h0kn(
+                                      "div",
+                                      {
+                                        className: styles.skillsGrid,
+                                        children: aboutMe.skills.map(
+                                          (skill, index) =>
+                                            jsxDEV_7x81h0kn(
+                                              "span",
+                                              {
+                                                className: styles.skillTag,
+                                                style: {
+                                                  animationDelay: `${index * 0.05}s`,
+                                                },
+                                                children: skill,
+                                              },
+                                              index,
+                                              false,
+                                              undefined,
+                                              this,
+                                            ),
+                                        ),
+                                      },
+                                      undefined,
+                                      false,
+                                      undefined,
+                                      this,
+                                    ),
+                                  ],
+                                },
+                                undefined,
+                                true,
+                                undefined,
+                                this,
+                              ),
+                          ],
+                        },
+                        undefined,
+                        true,
+                        undefined,
+                        this,
+                      ),
+                    ],
+                  },
+                  undefined,
+                  true,
+                  undefined,
+                  this,
+                ),
+              },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          ],
+        },
+        undefined,
+        true,
+        undefined,
+        this,
+      ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}

package/theme/components/AboutSection/styles.module.css

@@ -0,0 +1,309 @@
+/* Animations */
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Base Section */
+.aboutSection {
+  scroll-margin-top: var(--ifm-scroll-margin-top);
+  padding: 2rem 0 4rem;
+  background-color: var(--ifm-background-color);
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.aboutContainer {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 3rem 2rem 0;
+}
+
+.aboutHeader {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.aboutHeading {
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  margin-bottom: 0.6rem;
+  opacity: 0;
+  position: relative;
+  display: inline-block;
+}
+
+:global(.is-visible) .aboutHeading {
+  animation: slideUp 0.6s ease-out forwards;
+}
+
+.aboutHeading::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 3px;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--ifm-color-primary);
+  border-radius: 2px;
+}
+
+/* The Main Card */
+.aboutCard {
+  display: flex;
+  background-color: var(--ifm-card-background-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: var(--ifm-global-shadow-md);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:global(.is-visible) .aboutCard {
+  animation: slideUp 0.8s ease-out forwards;
+}
+
+/* Left Column: Image & Resume */
+.bioImageContainer {
+  flex: 0.8;
+  background-color: rgba(var(--ifm-color-primary-rgb), 0.03);
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3.5rem;
+  border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.imageWrapper {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  padding: 6px;
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-primary),
+    var(--ifm-color-primary-light)
+  );
+  box-shadow: 0 10px 30px rgba(var(--ifm-color-primary-rgb), 0.2);
+  transition: transform 0.3s ease;
+}
+
+.imageWrapper:hover {
+  transform: scale(1.05);
+}
+
+.aboutImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid var(--ifm-card-background-color);
+}
+
+.resumeContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.resumeButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 1.4rem;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: 12px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  transition: all 0.2s ease;
+}
+
+.resumeButton:hover {
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(var(--ifm-color-primary-rgb), 0.2);
+}
+
+/* Right Column: Bio & Skills */
+.bioTextContainer {
+  flex: 1.2;
+  padding: 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.bioText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  max-height: 320px;
+  overflow-y: auto;
+  padding-right: 1rem;
+}
+
+/* Custom Scrollbar for Bio */
+.bioText::-webkit-scrollbar {
+  width: 5px;
+}
+
+.bioText::-webkit-scrollbar-track {
+  background: rgba(var(--ifm-color-primary-rgb), 0.05);
+  border-radius: 10px;
+}
+
+.bioText::-webkit-scrollbar-thumb {
+  background: rgba(var(--ifm-color-primary-rgb), 0.2);
+  border-radius: 10px;
+}
+
+.bioText::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-color-primary);
+}
+
+.aboutParagraph {
+  font-size: 1.1rem;
+  line-height: 1.4;
+  color: var(--ifm-font-color-base);
+  margin: 0;
+}
+
+/* Skills Grid */
+.skillsContainer {
+  margin-top: 1.7rem;
+}
+
+.skillsTitle {
+  font-size: 1.4rem;
+  color: var(--ifm-color-primary);
+  margin-bottom: 1.4rem;
+  font-weight: 600;
+  position: relative;
+  display: inline-block;
+}
+
+.skillsTitle::after {
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 2px;
+  bottom: -0.4rem;
+  left: 0;
+  background-color: var(--ifm-color-primary);
+  border-radius: 1px;
+  opacity: 0.6;
+}
+
+.skillsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.skillTag {
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-tertiary);
+  padding: 0.4rem 0.8rem;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all 0.2s ease;
+  cursor: default;
+}
+
+.skillTag:hover {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  background-color: rgba(var(--ifm-color-primary-rgb), 0.05);
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .aboutCard {
+    flex-direction: column;
+  }
+
+  .bioImageContainer {
+    border-right: none;
+    border-bottom: 1px solid var(--ifm-color-emphasis-200);
+    padding: 2.5rem;
+  }
+
+  .bioTextContainer {
+    padding: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .aboutSection {
+    padding: 4rem 0;
+  }
+
+  .aboutHeading {
+    font-size: 2rem;
+  }
+
+  .imageWrapper {
+    width: 160px;
+    height: 160px;
+  }
+
+  .aboutParagraph {
+    font-size: 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aboutCard,
+  .imageWrapper,
+  .resumeButton,
+  .skillTag {
+    animation: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}