portosaurus 3.0.2 → 4.0.0

package/src/core/constants.mjs

@@ -1,14 +1,19 @@
 import path from "path";
 import { fileURLToPath } from "url";
+import { loadPkg } from "../utils/systemUtils.mjs";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /**
  * The absolute path to the Portosaurus package root.
- * Calculated relative to this file's location in src/utils/
  */
 export const PortoRoot = path.resolve(__dirname, "../../");
 
+/**
+ * The Portosaurus package.json content.
+ */
+export const PortoPkg = loadPkg(PortoRoot);
+
 /**
  * Common paths inside the framework
  */
@@ -18,4 +23,5 @@ export const Paths = {
   theme: path.join(PortoRoot, "src/theme"),
   core: path.join(PortoRoot, "src/core"),
   plugins: path.join(PortoRoot, "src/plugins"),
+  utils: path.join(PortoRoot, "src/utils"),
 };

package/src/template/config.yml

@@ -0,0 +1,150 @@
+# yaml-language-server: $schema=https://soymadip.github.io/portosaurus/configSchema.json
+# Portosaurus Project Configuration
+# This file is filled with example values
+# Check Config Docs: https://soymadip.is-a.dev/portosaurus/guide/config
+
+# Site Metadata & SEO
+site:
+  title: "Your Name"
+  tagline: "Short description about you, your passion, your goals etc."
+
+  favicon: "{{portoRoot}}/src/assets/img/svg/icon.svg"
+  social_card: "{{portoRoot}}/src/assets/img/social-card.jpeg"
+
+  # Auto set if deploying in Github/GitLab Pages
+  url: "auto"
+  path: "auto"
+
+# UI/UX & Theme Behavior
+theme:
+  appearance:
+    dark_mode: true
+    disable_switch: false
+
+  navigation:
+    collapsable_sidebar: true
+    hide_navbar_on_scroll: true
+
+# Page Content & Sections
+home_page:
+  hero:
+    title: null # Fallback to {{site.title}}
+    profession: "Your Profession"
+    desc: null # Fallback to {{site.tagline}}
+    profile_pic: null # Fallback to {{site.favicon}}
+
+    social:
+      - name: "LinkedIn"
+        url: "https://www.linked.com/in/yourusername"
+
+      - name: "GitHub"
+        icon: "githubalt"
+        url: "https://github.com/yourusername"
+
+      - name: "Telegram"
+        url: "https://t.me/yourusername"
+
+  about:
+    enable: true
+    image: null # Fallback to {{home_page.hero.profile_pic}}
+    bio:
+      - "I'm a {{home_page.hero.profession}} who loves turning ideas into reality."
+      - "With a background in computer science and a passion for design, I bridge the gap between aesthetics and functionality."
+      - "Also I am interested in Your interest1, interest2 etc etc......"
+    skills:
+      - "skill 1"
+      - "skill 2"
+      - "skill 3"
+    resume: "{{portoRoot}}/src/assets/sample-resume.pdf"
+
+  project_shelf:
+    enable: true
+    projects:
+      - title: "Your Awesome Project"
+        icon: null
+        state: "active" # options: active, completed, maintenance, paused, archived, planned
+        desc: "A brief description of what this project does and the tech used."
+        tags: ["tag1", "tag2", "tag3", "tag4", "tag5", "tag6", "tag7"]
+        website: "https://example.com"
+        repo: "https://github.com/yourname/project1"
+
+      - title: "Your Awesome Project 2"
+        icon: "{{portoRoot}}/src/assets/img/svg/icon.svg"
+        bg: "#5c8f2d"
+        tags: ["tag1", "tag2", "tag3", "tag4", "tag5", "tag6", "tag7"]
+        featured: true
+        state: "completed"
+        desc: "A brief description of what this project does and the tech used."
+        website: "https://example.com"
+        repo: "https://github.com/yourname/project2"
+        demo: "https://example.com/demo"
+
+      - title: "Your Awesome Project 3"
+        icon: "https://github.com/soymadip/KireiSakura-Kit/blob/main/Assets/icon.png?raw=true"
+        bg: "#aa47be"
+        state: "completed"
+        desc: "A brief description of what this project does and the tech used."
+        website: "https://example.com"
+        repo: "https://github.com/yourname/project2"
+        demo: "https://example.com/demo"
+
+  experience:
+    enable: false
+    list:
+      - company: "Tech Solutions Inc."
+        role: "Senior Developer"
+        duration: "2022 - Present"
+        desc: "Leading the frontend team in building a high-performance dashboard."
+
+  # Reach me out section
+  social:
+    enable: true
+    links:
+      - name: "Email"
+        desc: "Send me an email"
+        url: "mailto:yourname@example.com"
+
+      - name: "LinkedIn"
+        desc: "Connect on LinkedIn"
+        url: "https://linkedin.com/in/yourusername"
+
+      - name: "Telegram"
+        desc: "Reach me on Telegram"
+        url: "https://t.me/yourusername"
+
+      - name: "Discord"
+        desc: "Become my friend"
+        url: "https://discord.com/users/yourid"
+
+      - name: "Twitter"
+        desc: "Find me on Twitter"
+        url: "https://twitter.com/yourusername"
+
+      - name: "GitLab"
+        desc: "View my GitLab profile"
+        url: "https://gitlab.com/yourusername"
+
+      - name: "Anilist"
+        desc: "If you are otaku, check out!"
+        url: "https://anilist.co/user/yourusername"
+
+tasks:
+  enable: true
+  list:
+    - title: "Build the future"
+      status: "done"
+      desc: "Implementing the core framework."
+
+# Functional Tools
+tools:
+  link_shortener:
+    enable: false
+    deploy_path: "/l"
+    short_links:
+      "example": "https://example.com"
+
+# Custom variables for use in your content as {{custom.key}}
+custom:
+  twitter: "@yourhandle"
+  github: "yourname"
+  linkedin: "yourname"

package/src/template/notes/welcome.mdx

@@ -1,3 +1,9 @@
+---
+id: "welcome-to-notes"
+author: "Portosaurus"
+description: "Welcome to the notes section"
+---
+
 # Welcome
 
 Welcome to your notes! Add markdown or MDX files in this `notes/` directory.

package/src/template/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "portosaurus dev",
-    "start": "portosaurus start",
-    "build": "portosaurus build",
+    "dev": "$npm_execpath install && portosaurus dev",
+    "start": "$npm_execpath install && portosaurus start",
+    "build": "$npm_execpath install && portosaurus build",
     "serve": "portosaurus serve"
   },
   "dependencies": {

package/src/theme/MDXComponents.js

@@ -1,4 +1,3 @@
-import React from "react";
 import MDXComponents from "@docusaurus/theme-classic/lib/theme/MDXComponents";
 import Details from "@theme/Details";
 import Tabs from "@theme/Tabs";

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

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