Add portfolio template for init command

docs/userGuide/templates.md

@@ -32,6 +32,7 @@ Name    | Template key | Description | Quick Deploy
 Default | `default`    | Default template if `--template` is unspecified. Includes core features such as site and page navigation for a more convenient quick start. | <a href="https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-typical-netlify"><img src="https://www.netlify.com/img/deploy/button.svg" /></a>
 Minimal | `minimal`    | Minimalistic template that gets you started quickly. | <a href="https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-minimal-netlify"><img src="https://www.netlify.com/img/deploy/button.svg" /></a>
 Project     | `project`        | Project documentation template serves as a good starting point for project developers. This template includes both a user guide and a developer guide, with some formatted dummy content. | <a href="https://markbind-template-project.netlify.app/"><img src="https://www.netlify.com/img/deploy/button.svg" /></a>
+Portfolio | `portfolio` | Portfolio template to quickly build your portfolio. | <a href="">Quick deploy link to come!</a>
 
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('addingNavigationButtons', '') }}

packages/cli/test/functional/test_site_templates/test_portfolio/expected/.gitignore

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+_markbind/logs/
+
+# Dependency directories
+node_modules/
+
+# Production
+_site/
+
+# Env
+.env
+.env.local
+
+# IDE configs
+.vscode/
+.idea/*
+*.iml

packages/cli/test/functional/test_site_templates/test_portfolio/expected/404.md

@@ -0,0 +1,7 @@
+<frontmatter>
+  title: Page not found
+  layout: 404.md
+</frontmatter>
+
+-><p style="font-size: 10rem">404</p><-
+-><p style="font-size: 1.5rem">File not found<br>Click <a href="/">here</a> to go back to the home page.</p><-

packages/cli/test/functional/test_site_templates/test_portfolio/expected/_markbind/layouts/404.md

@@ -0,0 +1 @@
+<div>{{ content }}</div>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/_markbind/layouts/default.md

@@ -0,0 +1,35 @@
+<head-bottom>
+  <link rel="stylesheet" href="{{baseUrl}}/stylesheets/main.css">
+</head-bottom>
+
+<header sticky>
+  <navbar type="dark">
+    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">Your Name</a>
+    <li><a href="{{baseUrl}}/index.html#skills" class="nav-link">Skills</a></li>
+    <li><a href="{{baseUrl}}/index.html#experience" class="nav-link">Experience</a></li>
+    <dropdown header="Projects" class="nav-link">
+      <li><a href="{{baseUrl}}/index.html#project-1" class="dropdown-item">Project 1</a></li>
+      <li><a href="{{baseUrl}}/index.html#project-2" class="dropdown-item">Project 2</a></li>
+      <li><a href="{{baseUrl}}/index.html#other-projects" class="dropdown-item">Other projects</a></li>
+    </dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>
+
+<div id="flex-body">
+  <div id="content-wrapper">
+    {{ content }}
+  </div>
+  <scroll-top-button></scroll-top-button>
+</div>
+
+<footer>
+  <!-- Support MarkBind by including a link to us on your landing page! -->
+  <div class="text-center">
+    <small>[Generated by {{MarkBind}}]</small>
+  </div>
+</footer>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/_markbind/variables.md

@@ -0,0 +1,5 @@
+<variable name="name">[NAME]</variable>
+<variable name="javascript"><thumbnail src='../contents/assets/JavaScript.svg' size="50"/></variable>
+<variable name="typescript"><thumbnail src='../contents/assets/Typescript.svg' size="50"/></variable>
+<variable name="vue"><thumbnail src='../contents/assets/Vue.svg' size="50"/></variable>
+<variable name="java"><thumbnail src="../contents/assets/java-icon.svg" size="50"/></variable>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/contents/experience.md

@@ -0,0 +1,24 @@
+# Experience
+
+<ul class="nav nav-tabs" role="tablist">
+  <li class="nav-item" role="presentation">
+    <a class="nav-link active" data-bs-toggle="tab" href="#NUS" aria-selected="false" role="tab" tabindex="-1">NUS</a>
+  </li>
+  <li class="nav-item" role="presentation">
+    <a class="nav-link" data-bs-toggle="tab" href="#another-company" aria-selected="true" role="tab">Another Company</a>
+  </li>
+</ul>
+<div id="myTabContent" class="tab-content" style="margin-top:15px;">
+  <div class="tab-pane fade active show" id="NUS" role="tabpanel">
+    <h4>Software Engineering Intern @ <md>[NUS](https://nus.edu.sg/)</md></h4>
+    <h6>May 2024 - Aug 2024</h6>
+    <p>Some description of your role in the company and the technologies you've used.</p>
+    {{ vue }}
+  </div>
+  <div class="tab-pane fade" id="another-company" role="tabpanel">
+    <h4>Another role @ <md>[Another company](https://markbind.org/)</md></h4>
+    <h6>May 2022 - Aug 2022</h6>
+    <p>Some description of your role in the company and the technologies you've used.</p>
+    {{ javascript }}
+  </div>
+</div>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/contents/project1.md

@@ -0,0 +1,17 @@
+<div class="card mb-3">
+  <h3 class="card-header" id="project-1">Example project: iP for CS2103</h3>
+  <div class="card-body">
+    <md>This would be a good place to add images and embeds showcasing your contributions to a project. In this case, an `<iframe>` containing the [RepoSense](https://reposense.org/index.html) report of a student's contributions to their iP is embedded. For more information on embeds, refer to our user guide [here.](https://markbind.org/userGuide/formattingContents.html#embeds)</md>
+  </div>
+  <div>
+    <iframe src="https://nus-cs3281.github.io/2024-dashboard/#/widget/?search=Reposense&sort=groupTitle&sortWithin=title&timeframe=commit&mergegroup=&groupSelect=groupByAuthors&breakdown=false&since=2023-12-01&tabOpen=true&tabType=authorship&tabAuthor=asdfghjkxd&tabRepo=reposense%2Freposense%5Bmaster%5D&authorshipIsMergeGroup=false&authorshipFileTypes=java~md&authorshipIsBinaryFileTypeChecked=false&authorshipIsIgnoredFilesChecked=false&chartGroupIndex=5&chartIndex=0" width="100%"></iframe>
+  </div>
+  <div class="card-body">
+    <p class="card-text">Some further elaboration of the project can be added here</p>
+    {{ java }}
+  </div>
+  <div class="card-body">
+    <a href="https://github.com/MarkBind/markbind" class="btn btn-primary">View on Github</a>
+    <a href="https://markbind.org/" class="btn btn-primary">View Devpost</a>
+  </div>
+</div>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/contents/project2.md

@@ -0,0 +1,16 @@
+<div class="card mb-3">
+  <h3 class="card-header" id="project-2">Project 2</h3>
+  <div class="card-body">
+    This is another project. 
+  </div>
+   <pic src="https://markbind.org/images/logo-lightbackground.png" alt="markbind-logo" width="90%" height="200"></pic>
+  <div class="card-body">
+    <p class="card-text">Some further elaboration on the project.</p>
+    {{javascript}}
+    {{ vue }}
+  </div>
+  <div class="card-body">
+    <a href="https://github.com/MarkBind/markbind" class="btn btn-primary">View on Github</a>
+    <a href="https://markbind.org/" class="btn btn-primary">View Devpost</a>
+  </div>
+</div>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/contents/projects.md

@@ -0,0 +1,61 @@
+# Projects
+
+<include src="project1.md"/>
+<include src="project2.md"/>
+
+### Other projects
+
+<div class="row row-cols-1 row-cols-md-3 g-3">
+  <div class="col">
+    <div class="card">
+        <h4 class="card-header">Project title</h4>
+        <div class="card-body">
+            This is another project. 
+        </div>
+        <pic src="https://markbind.org/images/logo-lightbackground.png" alt="markbind-logo" width="90%" height="200"></pic>
+        <div class="card-body">
+            <p class="card-text">Some further elaboration on the project.</p>
+            {{javascript}}
+            {{ vue }}
+        </div>
+        <div class="card-body">
+            <a href="https://github.com/MarkBind/markbind" class="btn btn-primary">View on Github</a>
+            <a href="https://markbind.org/" class="btn btn-primary">View Devpost</a>
+        </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+        <h4 class="card-header">Project title</h4>
+        <div class="card-body">
+            This is another project. 
+        </div>
+         <pic src="https://markbind.org/images/logo-lightbackground.png" alt="markbind-logo" width="90%" height="200"></pic>
+        <div class="card-body">
+            <p class="card-text">Some further elaboration on the project.</p>
+            {{ java }}
+        </div>
+        <div class="card-body">
+            <a href="https://github.com/MarkBind/markbind" class="btn btn-primary">View on Github</a>
+            <a href="https://markbind.org/" class="btn btn-primary">View Devpost</a>
+        </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card">
+        <h4 class="card-header">Project title</h4>
+        <div class="card-body">
+            This is another project. 
+        </div>
+        <pic src="https://markbind.org/images/logo-lightbackground.png" alt="markbind-logo" width="90%" height="200"></pic>
+        <div class="card-body">
+            <p class="card-text">Some further elaboration on the project.</p>
+            {{ vue }}
+        </div>
+        <div class="card-body">
+            <a href="https://github.com/MarkBind/markbind" class="btn btn-primary">View on Github</a>
+            <a href="https://markbind.org/" class="btn btn-primary">View Devpost</a>
+        </div>
+    </div>
+  </div>
+</div>

packages/cli/test/functional/test_site_templates/test_portfolio/expected/contents/skills.md

@@ -0,0 +1,22 @@
+# Skills
+
+<p>This is where you can give a quick overview of the technologies and frameworks you know using our <a href="https://markbind.org/userGuide/components/imagesAndDiagrams.html#thumbnails" target="_blank">thumbnail feature</a> or our <a href="https://markbind.org/userGuide/formattingContents.html#icons" target="_blank">icons</a>.</p>
+
+<panel header="Example using thumbnails" expanded>
+  <box type="info">These thumbnails are available as variables to use anywhere in this page!</box>
+  {{ javascript }}
+  {{ typescript }}
+  {{ vue }}
+  {{ java }}
+</panel>
+<br/>
+<panel header="Example using icons" expanded>
+  <box type="warning">
+    Some icons are not available in the libraries that MarkBind supports! Please ensure that 
+    the desired icons are available before choosing this option. For more information regarding
+    icons, please refer to <a href="https://markbind.org/userGuide/formattingContents.html#icons" target="_blank">this section of our User Guide.</a>
+  </box>
+  <i class="fa-brands fa-square-js fa-2xl"></i>
+  <i class="fa-brands fa-vuejs fa-2xl"></i>
+  <i class="fa-brands fa-java fa-2xl"></i>
+</panel>