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=""><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,43 @@
+<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">Project1</a></li>
+      <li><a href="{{baseUrl}}/index.html#project-2" 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">
+  <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/core/template/portfolio/_markbind/variables.md

@@ -0,0 +1,4 @@
+<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>

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

@@ -0,0 +1,23 @@
+# Experience
+
+<panel type="seamless" header="Experience 1" no-close minimized>
+  <md>**Description of experience (Name of role, duration, etc.)**
+
+  - Use concise bulletpoints
+  </md>
+  <div class="container">
+    {{vue}}
+    {{typescript}}
+  </div>
+</panel>
+<br/>
+<panel type="seamless" header="Experience 2" no-close minimized>
+  <md>**Description of experience (Name of role, duration, etc.)**
+
+  - Use concise bulletpoints
+  </md>
+  <div class="container">
+    {{javascript}}
+  </div>
+</panel>
+

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

@@ -0,0 +1,12 @@
+<div class="card mb-3">
+  <h3 class="card-header">Project 1</h3>
+  <pic src="../contents/assets/MarkbindExample.png" width="500" alt="project-display"/>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    {{typescript}}
+  </div>
+  <div class="card-body">
+    <a href="#" class="btn btn-primary">View on Github</a>
+    <a href="#" class="btn btn-primary">View Devpost</a>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="card mb-3">
+  <h3 class="card-header">Project 2</h3>
+  <pic src="../contents/assets/MarkbindExample.png" width="500" alt="project-display"/>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    {{javascript}}
+  </div>
+  <div class="card-body">
+    <a href="#" class="btn btn-primary">View on Github</a>
+    <a href="#" class="btn btn-primary">View Devpost</a>
+  </div>
+</div>

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

@@ -0,0 +1,4 @@
+# Projects
+
+<include src="project1.md"/>
+<include src="project2.md"/>

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

@@ -0,0 +1,20 @@
+# Skills
+
+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" minimized>
+    <box type="info">These thumbnails are available as variables to use anywhere in this page!</box>
+    {{ javascript }}
+    {{ typescript }}
+    {{ vue }}
+  </panel>
+  <br/>
+  <panel header="Example using icons" minimized>
+    <box type="warning">
+      Some icons are not available in the libraries MarkBind supports! Please ensure that 
+      the desired icons are available beofre 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>
+  </panel>

packages/core/template/portfolio/index.md

@@ -0,0 +1,43 @@
+<frontmatter>
+  title: Home Page
+  layout: default.md
+</frontmatter>
+
+<br>
+
+<div class="bg-dark text-white px-2 py-5 mb-4">
+  <div class="container">
+    <h1 class="display-5 no-index"><md>:wave:</md> Hello!<br>I'm {{ name }}</h1>
+    <p class="lead">Welcome to my porfolio!</p>
+  </div>
+</div>
+
+<box type="tip">
+  Want to change the theme? Explore more themes and other components offered by MarkBind in our <a href="https://markbind.org/userGuide/authoringContents.html" target="_blank">user guide here</a>
+</box>
+
+---
+
+## About me
+
+<p>
+  This is where you can add a picture of yourself and a brief introduction. This can be a good place to 
+  use <tooltip content="Add more information here" placement="top">tooltips</tooltip>, or 
+  <md>[add relevant links](https://markbind.org/userGuide/formattingContents.html#links)</md>.
+</p>
+
+<img src='./contents/assets/default_profile_pic.png' alt='default-profile-pic'/>
+
+---
+
+<include src="contents/skills.md"/>
+
+---
+
+<include src="contents/experience.md"/>
+
+---
+
+<include src="contents/projects.md"/>
+
+

packages/core/template/portfolio/site.json

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

packages/core/template/portfolio/stylesheets/main.css

@@ -0,0 +1,135 @@
+mark {
+    background-color: #ff0;
+    border-radius: 5px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.indented {
+    padding-left: 20px;
+}
+
+.theme-card img {
+    width: 100%;
+}
+
+/* Scrollbar */
+
+.slim-scroll::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll::-webkit-scrollbar-thumb {
+    background: #808080;
+    border-radius: 20px;
+}
+
+.slim-scroll::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar {
+    width: 5px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-thumb {
+    background: #00b0ef;
+    border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+}
+
+/* Layout containers */
+
+#flex-body {
+    display: flex;
+    flex: 1;
+    align-items: start;
+}
+
+#content-wrapper {
+    flex: 1;
+    margin: 0 auto;
+    min-width: 0;
+    max-width: 1000px;
+    overflow-x: auto;
+    padding: 0.8rem 20px 0;
+    transition: 0.4s;
+}
+
+#site-nav,
+#page-nav {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: var(--sticky-header-height);
+    flex: 0 0 auto;
+    max-width: 300px;
+    max-height: calc(100vh - var(--sticky-header-height));
+    width: 300px;
+}
+
+#site-nav {
+    border-right: 1px solid lightgrey;
+    padding-bottom: 20px;
+    z-index: 999;
+}
+
+.site-nav-top {
+    margin: 0.8rem 0;
+    padding: 0 12px 12px;
+}
+
+.nav-component {
+    overflow-y: auto;
+}
+
+#page-nav {
+    border-left: 1px solid lightgrey;
+}
+
+@media screen and (width <= 1299.98px) {
+    #page-nav {
+        display: none;
+    }
+}
+
+/* Bootstrap medium(md) responsive breakpoint */
+@media screen and (width <= 991.98px) {
+    #site-nav {
+        display: none;
+    }
+}
+
+/* Bootstrap small(sm) responsive breakpoint */
+@media (width <= 767.98px) {
+    .indented {
+        padding-left: 10px;
+    }
+
+    #content-wrapper {
+        padding: 0 10px;
+    }
+}
+
+/* Bootstrap extra small(xs) responsive breakpoint */
+@media screen and (width <= 575.98px) {
+    #site-nav {
+        display: none;
+    }
+}
+
+/* Hide site navigation when printing */
+@media print {
+    #site-nav {
+        display: none;
+    }
+
+    #page-nav {
+        display: none;
+    }
+}