Portfolio

A dynamic site built using Eleventy that generates a personalised portfolio and resume with PDF support based on user-provided data.

Table of Contents

• Portfolio
  • Table of Contents
  • Requirements
  • Features
  • Installation
    • Local
    • Docker
  • Configuration
    • Environment variables
    • Global data
      • Site data
      • User data
  • License

Requirements

• Node.js 22.2.0

Features

• Dynamic Content Generation: Automatically creates a personalised portfolio and resume view from user-supplied data.

• PDF Conversion: Utilises Pepatung (Puppeteer) to generate PDFs of any hosted views with additional enhancements.

• Multi-Arch Containerisation Support: Containerised for seamless deployments across multiple architectures.

• Helm Chart: Helm support for a secure and straightforward deployment strategy to a Kubernetes cluster.

Installation

Local

1. Ensure that you have met all of the project requirements.

2. Clone the repository:

   git clone https://gitlab.com/irfanhakim/portfolio.git ~/portfolio
   

3. Get into the local repository:

   cd ~/portfolio
   

4. Run the install command:

   npm install
   

5. Set any environment variables you need through an .env file.

6. Supply your own required data files to the designated data directory.

7. Run the site locally and navigate to the provided address in your browser to watch the site:

   npm start
   

Docker

A Docker container image for Portfolio is provided, but has not been tested to run:

• Outside of a production environment.
• Outside of a Kubernetes environment.

For the best experience, please deploy Portfolio using the official Helm chart.

In addition, there is also a Pepatung (Puppeteer) container that will be needed for the HTML to PDF conversion feature when deploying outside of a local environment - this is included out of the box when using the provided Helm chart.

Configuration

Environment variables

Environment variables are used to configure certain core options related to the project. For consistency, environment variables used throughout the project are consolidated in the settings/env.js module.

For local testing purposes, please supply your environment variables through an .env file in the root of this repository.

Option	Description	Sample Value	Default Value
NODE_ENV	The environment the site is running in.	production	Local: development, Docker: production
PORT	The port number the site has been exposed to locally.	3000	Local: 8080, Docker: 80 (Immutable)
SITE_DATA	The path to the Site global data file relative to the project data directory.	.private/mysite.json	site.json
USER_DATA	The path to the User global data file relative to the project data directory.	.private/myuser.json	user.json
PEPATUNG_OUTPUT_DIR	The directory to output the captured PDF.	src/data/.private	dist/assets/docs
PEPATUNG_OUTPUT_FILE	The name of the output PDF file.	myresume.pdf	resume.pdf
PEPATUNG_URL_BASE	The base URL of the site to capture as PDF.	https://example.com	http://localhost:${port}
PEPATUNG_URL_PATH	The URL path of the site to capture as PDF.	index.html	resume

Additional Pepatung-specific environment variables can also be supplied through the same way.

Global data

Global data is an easy way of supplying data of various kinds to the site. In Portfolio, they are used to generate a personalised portfolio and resume view for the user. Portfolio expects two global data files for two different types of data:

Site data

Portfolio looks for a Site data file in the project data directory based on the SITE_DATA environment variable. For local testing purposes, you could add your version of the data file to the src/data/.private directory and point to it accordingly in your environment.

Option	Description	Value Type	Value Properties	Default Values
name	The full name of the site.	string	-	Portfolio
shortname	The short name of the site.	string	-	portfolio
description	A short and concise description of the site.	string	-	-
theme_color	The theme colour of the site.	string	-	#f8f8f8
footer	The content of the site footer.	string	-	© ${userData.name} ${currentYear}
portfolio	Site configuration options for the portfolio view.	dict	title, permalink	title: Home, permalink: None (Default)
resume	Site configuration options for the resume view.	dict	title, permalink	title: Resume, permalink: None (Default)

User data

Portfolio looks for a User data file in the project data directory based on the USER_DATA environment variable. For local testing purposes, you could add your version of the data file to the src/data/.private directory and point to it accordingly in your environment.

Option	Description	Value Type	Value Properties	Default Values
name	The display name of the user.	string	-	-
about	Content options pertaining to a summary about the user.	dict	title, content	title: about
location	The current location where the user is settled in.	string	-	-
lists	Content options pertaining to the user's lists.	list	dict(name, url, class, image, download)	-
experience	Content options pertaining to the user's experiences.	dict	key: list(dict(title, subtitle, description, infos, points))	key: experience
education	Content options pertaining to the user's educational background.	dict	key: list(dict(title, description, infos))	key: education
qualification	Content options pertaining to the user's qualifications.	dict	key: list(dict(title, description, infos))	key: qualification
references	Content options pertaining to the user's references.	dict	key: list(dict(title, description, infos))	key: references
skills	Content options pertaining to the user's skills.	dict	key: dict(${name}: ${level})	key: skills

This list of options has been simplified - for more detailed information, please refer to the included data file itself.

License

This project is licensed under the AGPL-3.0-only license. Please refer to the LICENSE file for more information.