Kiwi

This is a rework of my personal landing page for my projects and other stuff (earlier salmonslay/landing). It follows a portfolio / CV style and is built with Node.js, Express.js, EJS, SASS and the Font Awesome icon font.

This page is live here.

License / Using the template

MIT. Feel free to use the template for your own landing page. Just fork the repository and change the content to your needs.

JSON structure

The projects on the page are stored in the public/projects.json file. The structure is as follows:

{
  "title": "svb!catch",
  "description": "Web game based on osu!. Contains 200+ full beatmaps with music, 8 mods, online profiles and a custom difficulty system.",
  "longDescription": "An even longer description not shown in the README to save some space.",
  "thumbnail": "img/svb!catch.png",
  "images": [
    "img/svb!catch-0.webp",
    "img/svb!catch-1.webp"
  ],
  "starred": true,
  "school": false,
  "tags": {
    "engine": [
      "Node.js"
    ],
    "language": [
      "JavaScript"
    ],
    "framework": [
      "Express",
      "MySQL"
    ]
  },
  "links": [
    {
      "title": "View",
      "url": "https://svb.sajber.me/catch"
    },
    {
      "title": "GitHub",
      "url": "https://github.com/salmon/SVB"
    }
  ]
}

Key	Value	Description	Required
title	string	The title for the project	x
description	string	A short description for the project. Only displayed on mobile. Supports markdown	x
longDescription	string	A long description for the project. Only displayed on desktop. Supports markdown	x
thumbnail	string	The path to the thumbnail image. It should be in roughly a 8:5 aspect ratio or 600x380px.	x
images	string[]	An array with additional image paths that the user can scroll between.
hidden	boolean	If true, the project will not be displayed in the list by default.
starred	boolean	Whether to show a star icon on the card
school	boolean	Whether to show a school icon on the card
tags	object	An object containing the tags for the project. See below for more information.	x
links	object[]	A list of links for the project. See below for more information.	x
markdown	string	A path to a markdown file. Projects with this will get a "Read more" button to the markdown.

Tags

The tags are used to add badges to all projects by category. The following categories are available:

Key	Value	Description	Required
engine	string[]	Tags that will be displayed in light blue.
language	string[]	Tags that will be displayed in purple.
framework	string[]	Tags that will be displayed in blue.

Links

The links are shown as buttons on the project card. A link object only has two keys:

Key	Value	Description	Required
title	string	The text to display on the button	x
url	string	The URL to open when pressing the button	x
icon	string	An optional FontAwesome icon class that will replace the icon generated from title

All links have their own icon, which is determined by the title. If a title contains one of the following words, the corresponding icon will be used. If no icon is found, the default chain icon will be used.

github, view, unity, documentation, video, leaderboard, trailer, album, steam, download, google play, blog

Blogs

Blog posts can be added by creating markdown files in the public/blogs/ directory. The markdown should start with a front matter block containing a few keys listed below. The rest of the markdown file will be rendered as the blog post. None of the following fields are actually required (will be filled with placeholders), so the "Recommended" column is more of a guideline.

Key	Value	Description	Recommended
title	string	The title of the blog post.	x
date	ISO 8601 date	The timestamp of when the post was created	x
updated	ISO 8601 date	The timestamp of when the post was last updated
draft	boolean	True if the post should be hidden from the front page
author	string	Name of the author	x
tags	string[]	Array of blog tags (used to filter posts)	x
summary	string	A shorter summary of the post shown on the front page	x
thumbnail	string	Path to a thumbnail	x