Documentation - Portfolio

General Information

The index.html file contains some hardcoded data that needs to be modified to your own preference.

1. The page title of the website
2. Meta tags for SEO
3. Copyright notice in the footer

The locations of the above items in the index.html file have been highlighted with comments.

Website Identity

The icons of the website are located in /assets directory. Replace them with your own icons and images. Make sure to keep the same filename with .webp and .ico extensions.

Note: if you have images in jpg, png, heic or any other file types, convert them to webp and ico files for better performance.

Portfolio Content

All the content of the portfolio are stored in /data directory. The Data Models section has more information on data model of each JSON file.

For the following directories, it's not required to keep your data in the exact locations as listed. You can create subdirectories and organize your files as you see fit. Just make sure to update the filepaths in the JSON files.

SEO-related Items

To improve the website's visibility to search engines, modify the following files as needed for the web crawlers.

1. sitemap.xml   Learn more
2. robots.txt   Learn more

Appearance

Need dark mode? Or the site theme just doesn't match your style? No worries! You can modify the color scheme and the font of the website by changing the CSS variables in the /css/variables.css file.

If you want to experiment with different styling for the components, the CSS files for each component can be found in the /css/components directory. Although it is advised to not go crazy with the styling as it may affect the performance of the website and go against the minimalist design principle.

home.json

The object in /data/home.json file contains the following fields:

greeting: string,
introduction: {
    line_1: string,
    line_2: string
}

greeting contains a short greeting message to the user. Only a maximum of 50 characters are allowed.
introduction contains two lines of introduction sentences to describe your portfolio or talk about yourself. Each line can contain a maximum of 90 characters.

HTML tags such as <a> <b> <i> <s> <u> etc. can be inserted to both greeting and introduction fields for text formatting purposes. Any change you make in this file will be reflected in the homepage of the website.

portfolio.json

The /data/portfolio.json file contains an array of the following objects:

{
    title: string, 
    component: 'blog' | 'cards' | 'gallery' | 'projects' | 'showcase',
    items: any[]
}

title contains the title of the portfolio section which will be displayed as text on the navigation buttons.
component is a string that specifies the type of component to be rendered. The are only 5 available components.
items is an array of objects that contains the content of the component. See components section for the data model of items array for each component.

routers.json

The /data/routers.json file contains an object that maps the route of the blog articles to the corresponding HTML file.

{
    "route-1": "/path/to/html/file-1.html",
    "route-2": "/path/to/html/file-2.html",
    ...
}

This way, when a user clicks on a blog article, the corresponding HTML file will be rendered. The routes are specified in search query of the URL to fetch article on page load.

For example: If a blog article with id of route-1 is clicked, the HTML file at /path/to/html/file-1.html will be rendered when the user visits https://your-website.com/?article=route-1

If you are not using the blog component in your portfolio, you can also utilize this file to map other routes to different HTML files. For example, you can map any of your showcase project URLs to an article containing more information about the project.

Components

The items array in the /data/portfolio.json file for each component contains the following fields:

Blog

id: string
heading: string

For each blog article, create an HTML file in the /data/blog directory (or wherever you choose to store your blog articles). Then create an entry in /data/routers.json file mapping the id to the filepath of the HTML file. For example:

If your blog article entry in /data/portfolio.json is

id: "my-first-blog",
heading: "My First Blog Article"

{
    "my-first-blog": "/data/blog/my-first-blog.html"
}

Cards

alt: string
image: string
name: string
url: string

Gallery

id: string                // must be unique
alt: string               // alt text for the image
image: string             // filepath of the full-sized image
thumbnail: string         // filepath of the thumbnail
description: string = ''  // optional, HTML tags allowed

Projects

name: string
url: string
description: string

Showcase

alt: string
image: string
name: string
url: string