MarkBind Template for Student Portfolio

docs/userGuide/templates.md

@@ -31,6 +31,8 @@ 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>
+Portfolio | `portfolio` | Portfolio template to quickly build your portfolio. | <a href="https://heartfelt-faun-d2a60d.netlify.app"><img src="https://www.netlify.com/img/deploy/button.svg" /></a>
+
 
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('addingNavigationButtons', '') }}

packages/core/template/portfolio/.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/core/template/portfolio/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/core/template/portfolio/_markbind/layouts/404.md

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

packages/core/template/portfolio/_markbind/layouts/default.md

@@ -0,0 +1,64 @@
+<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}}/contents/experience.html" class="nav-link">Experience</a></li>
+    <li><a href="{{baseUrl}}/contents/skills.html" class="nav-link">Skills</a></li>
+    <dropdown header="Projects" class="nav-link">
+      <li><a href="{{baseUrl}}/contents/project1.html" class="dropdown-item">Project1</a></li>
+      <li><a href="{{baseUrl}}/contents/project2.html" class="dropdown-item">Project2</a></li>
+    </dropdown>
+    <li><a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">
+      <i class="fa-brands fa-github fa-lg"></i>
+    </a>
+    </li>
+    <li>
+    <a href="https://www.linkedin.com/school/national-university-of-singapore/" target="_blank" class="nav-link">
+      <i class="fa-brands fa-linkedin fa-lg"></i>
+    </a>
+    </li>
+    <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">
+  <nav id="site-nav">
+    <div class="site-nav-top">
+      <div class="fw-bold mb-2" style="font-size: 1.25rem;">Contents</div>
+    </div>
+    <div class="nav-component slim-scroll">
+      <site-nav>
+* [Home :house:]({{ baseUrl }}/index.html)
+* [Experience]({{baseUrl}}/contents/experience.html)
+* [Skills]({{baseUrl}}/contents/skills.html)
+* Projects :expanded:
+  * [Project 1]({{baseUrl}}/contents/project1.html)
+  * [Project 2]({{baseUrl}}/contents/project2.html)
+      </site-nav>
+    </div>
+  </nav>
+  <div id="content-wrapper">
+    <breadcrumb />
+    {{ content }}
+  </div>
+  <nav id="page-nav">
+    <div class="nav-component slim-scroll">
+      <page-nav />
+    </div>
+  </nav>
+  <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/core/template/portfolio/_markbind/variables.json

@@ -0,0 +1,3 @@
+{
+    "jsonVariableExample": "Your variables can be defined here as well"
+}

packages/core/template/portfolio/_markbind/variables.md

@@ -0,0 +1,4 @@
+<variable name="example">
+To inject this HTML segment in your MarkBind files, use {{ example }} where you want to place it.
+More generally, surround the segment's id with double curly braces.
+</variable>

packages/core/template/portfolio/contents/experience.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  title: Experience
+</frontmatter>
+
+<br>
+
+# Experience
+
+> This is a placeholder page for your work experiences

packages/core/template/portfolio/contents/project1.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  title: Project 1
+</frontmatter>
+
+<br>
+
+# Project 1
+
+> This is a placeholder page for a project.

packages/core/template/portfolio/contents/project2.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  title: Project 2
+</frontmatter>
+
+<br>
+
+# Project 2
+
+> This is a placeholder page for a project.

packages/core/template/portfolio/contents/skills.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  title: Skills
+</frontmatter>
+
+<br>
+
+# Skills
+
+> This is a placeholder page for your skills.

packages/core/template/portfolio/index.md

@@ -0,0 +1,97 @@
+<frontmatter>
+  title: Home Page
+  layout: default.md
+  pageNav: 4
+  pageNavTitle: "Topics"
+</frontmatter>
+
+<br>
+
+<div class="bg-dark text-white px-2 py-5 mb-4">
+  <div class="container">
+    <h1 class="display-5 no-index">Hello!<br>You've just initialised a personal portfolio template in MarkBind</h1>
+    <p class="lead">Here's what you can add...</p>
+  </div>
+</div>
+
+---
+
+## Hello there! I'm [YOUR NAME]
+
+This is where you can add a picture of yourself and a brief introduction
+
+<div class='container'>
+  <img src='./contents/assests/default_profile_pic.png' alt='default-profile-pic'></img>
+  <p style="padding-left:10px">You can use this area to give a brief introduction about yourself. You can include your github (
+    <a href="https://github.com/MarkBind/markbind">
+      <i class="fa-brands fa-github fa-lg"></i>
+    </a>
+    ), linkedIn (
+    <a href="https://www.linkedin.com/school/national-university-of-singapore/">
+      <i class="fa-brands fa-linkedin fa-lg"></i>
+    </a>
+    ), and other important links. You can also 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" minimized>
+    <thumbnail src='./contents/assests/JavaScript.svg' size="100"/>
+    <thumbnail src='./contents/assests/Typescript.svg' size="100"/>
+    <thumbnail src='./contents/assests/Vue.svg' size="100"/>
+  </panel>
+  <br/>
+  <panel header="Example using icons" minimized>
+    Some icons are not available in the libraries MarkBind supports! Please ensure that 
+    the desired icons are available beofre choosing this option.
+    <br/>
+    <i class="fa-brands fa-square-js fa-2xl"></i>
+    <i class="fa-brands fa-vuejs fa-2xl"></i>
+  </panel>
+
+</div>
+
+---
+
+## Navigating this site
+
+This site comes pre-configured with the core <a href="https://markbind.org/userGuide/components/navigation.html#navigation-components" target="_blank">Navigation components</a>: a <tooltip content="Site Navigation">**siteNav**</tooltip>, a <tooltip content="Page Navigation">**pageNav**</tooltip>, a <tooltip content="Navigation Bar">**NavBar**</tooltip>, and a **Search Bar**. To help you get started with the **siteNav**, we have included <tooltip content="experience, skills, projects, project1, project2">five dummy placeholder pages</tooltip>. The **NavBar** also comes with a placeholder slot for your name.
+
+---
+
+## Guide to MarkBind
+
+To see the capability of MarkBind in action, feel free to take a look at some of the websites built using MarkBind on our <a href="https://markbind.org/showcase.html" target="_blank">Showcase</a> page. 
+
+For more information on how to work with MarkBind sites and to add content, refer to our comprehensive <a href="https://markbind.org/userGuide/gettingStarted.html" target="_blank">User Guide</a>. 
+
+<box type="info">
+
+If you are interested in contributing to MarkBind, you can refer to our <a href="https://markbind.org/devdocs/devGuide/devGuide.html" target="_blank">Developer Guide</a> as well!
+
+</box>
+
+<panel header="**Good starting points in our User Guide**" expanded no-close>
+
+##### **User Guide: Authoring Contents**
+
+> Learn about the variety of syntax schemes, formats, and custom MarkBind components that you can use in your MarkBind site.
+
+More info in: _<a href="https://markbind.org/userGuide/authoringContents.html" target="_blank">User Guide → Authoring Contents</a>_
+
+---
+
+##### **User Guide: Working with Sites**
+
+> Learn how to modify site properties, apply themes, and enable/disable plugins for your MarkBind site.
+
+More info in: _<a href="https://markbind.org/userGuide/workingWithSites.html" target="_blank">User Guide → Working with Sites</a>_
+
+---
+
+##### **User Guide: Full Syntax Reference**
+
+> Refer to our Full Syntax Reference page to find a specific feature or component that you want to use in your MarkBind site.
+
+More info in: _<a href="https://markbind.org/userGuide/fullSyntaxReference.html" target="_blank">User Guide → Full Syntax Reference</a>_
+
+</panel>
+
+---

packages/core/template/portfolio/site.json

@@ -0,0 +1,28 @@
+{
+  "baseUrl": "",
+  "titlePrefix": "",
+  "titleSuffix": "",
+  "ignore": [
+    "_markbind/layouts/*",
+    "_markbind/logs/*",
+    "_site/*",
+    "site.json",
+    "*.md",
+    "*.njk",
+    ".git/*",
+    ".gitignore",
+    "node_modules/*"
+  ],
+  "pagesExclude": ["node_modules/*"],
+  "pages": [
+    {
+      "src": "index.md"
+    },
+    {
+      "glob": ["**/index.md", "**/*.md"]
+    }
+  ],
+  "deploy": {
+    "message": "Site Update."
+  }
+}