Zach's Website

Website URL

Description

This website serves the purpose of being my portfolio as well as a sandbox to try new skills. Some aspects of this codebase (such as Electron) are unneccessary for this website, but were incorporated to learn how to utilize them. If something seems out of place, it is likely there so I could learn how to utilize it.

---

Tech Stack / Development Tools

Tool	Purpose & Description
	Angular: Front-end framework used to handle the building, routing, and numerous other aspects of this web app.
	Lit: Web-component library used for creation of some individual "programs" in the website that don't need to interact with the rest of the system. Creating web components helps to keep these "programs" containerized so they are less likely to introduce any bugs anywhere else. Programs that use Lit will be listed here when they are added.
	Typescript: Language used by Angular to handle all logic related tasks.
	JavaScript: Utilized in configuration and may be used in Lit web components.
	HTML: Structure of overall web app, individual "web pages" in the browser, and structure of web components.
	SCSS: Used in Angular for styling, enabling better developer experience than using plain CSS across the entire web app.
	CSS: Utilized in Lit web components to handle containerized styling of the web components.
	Jasmine: TypeScript testing.
	Prettier: Code formatting.
	GitHub Actions: CI/CD
	Vercel: Web hosting, speed analytics, usage insights.
	CloudFlare: Domain name services.
	GitHub: Git repository cloud service.
	Docker*: Containerization
	Electron*: Desktop App
	Aseprite: Icon recreation.
	GIMP: Icon recreation / file type conversion.

* - Feature not required for typical website development / operation (added solely to learn how they work).

Web Component Repos

Some aspects of this web application are created using external web-components, hosted in other repositories. Those will be listed here when they are created.

---

Angular Development

This project was generated using Angular CLI version 19.2.1.

Installing Dependencies

To install dependencies run the following:

npm run install

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/ (or the provided localhost URL provided by Angular if port 4200 is currently in use). The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

OR

ng g c component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

More commands

More commands can be viewed in the package.json file.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.

---

CI/CD (GitHub Actions)

To view code for currently configured Actions visit the workflows folder in this repository.

For development and locally testing configured actions, use act.

Note: You must have docker installed to use act. You can figure out how to install Docker for your system here.

Build

Use the following command to run the build action locally:

act --job build

Test

Use the following command to run the test action locally:

act --job test

---

Docker

This project can be built and run locally as a docker container!

Run the following command to easily build and run the docker container locally:

# Build container
npm run docker:build

# Run container
npm run docker:run

From there you can either access this project in your browser at either the network address provided by the container or at localhost:5200

Note: Any self built container serves as an offline only method of accessing this web application, so any features that require a connection to a server will not function.

---

Electron

Note: If you complete any local builds of this project as an Electron application, you will be missing any environment variables required for signing and live server / database features. Local builds of this project not provided through an official source (such as GitHub) should be considered "offline-only" builds.

Development

To build and run this project as an electron app, run the following command:

npm run electron:start

Build for Various Systems

Linux

To build for Linux based systems, run the following:

npm run forge:linux

This will build the program into .deb and .rpm based installers

Windows

To build for Windows based systems, run the following:

npm run forge:windows

There is a known issue where you may need to run the following command, then re-run the above command:

npm run forge:start

A fix is being researched for this bug to ensure the installer works properly in the future

macOS

To build for macOS systems, run the following:

npm run forge:mac