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 unnecessary for this website, but were incorporated to learn how to utilize them. If something seems out of place, it is likely included so I could learn how to use it.
| Tool | Purpose & Description |
|---|---|
 |
Angular: Front-end framework used to handle the building, routing, and numerous other aspects of this web app. |
 |
Typescript: Language used by Angular to handle all logic related tasks. |
 |
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. |
 |
C: Used to perform computational logic for Calculator program. |
 |
WebAssembly: Compilation target for languages used to handle "heavy" computational logic. |
 |
GitHub: Git repository cloud service. |
 |
Vercel: Web hosting, speed analytics, usage insights. |
 |
GitHub Actions: CI/CD |
 |
Jasmine: TypeScript testing. |
 |
Prettier: Code formatting. |
 |
CloudFlare: Domain name services. |
 |
Docker*: Containerization |
 |
Electron*: Desktop App |
 |
Aseprite: Icon recreation. |
 |
GIMP: Icon recreation and file type conversion. |
* - Feature not required for typical website development / operation (added solely to gain a better understanding).
Some aspects of this web application are created using external web-components, hosted in other repositories. These will be listed here when they are created.
To install dependencies, run the following:
npm installTo start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/ (or the 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.
The Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameOR
ng g c component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis 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.
To execute unit tests with the Karma test runner, use the following command:
ng testMore commands can be viewed in the package.json file.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
Some code for this project is written in C and compiled to WebAssembly to handle backend computational logic. One program that uses this is the Calculator program.
Use the following command(s) to compile WebAssembly projects from C using GNU Make, Emscripten, and GNU C Compiler
# Calculator
make calculatorUse the following command(s) to compile C Testing Programs (output into root of project, automatically git ignored):
make test-calculatorTo view code for currently configured Actions visit the workflows folder in this repository.
Use the following command to run test actions locally using native commands:
npm run actions:nativeYou can also use act.
Note: You must have docker installed to use act. You can figure out how to install Docker for your system here.
Default build command:
npm run buildUse the following command to run the build action locally:
act --job buildYou can utilize the following test commands:
# Standard testing, opens Chrome
npm run test
# Headless testing
npm run test:hl
# Headless testing, does not watch for changes
npm run test:hlnw
# Testing using the GitHub Actions configuration file
npm run test:ci
Use the following command to run the test action locally using act:
Note: This may not work due to issues with reliance on Google Chrome for testing.
act --job testThis 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:runFrom there you can 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.
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.
To build and run this project as an electron app, run the following command:
npm run electron:startTo build for Linux based systems, run the following:
npm run forge:linuxThis will build the program into .deb and .rpm based installers
To build for Windows based systems, run the following:
npm run forge:windowsThere is a known issue where you may need to run the following command, then re-run the above command:
npm run forge:startA fix is being researched for this bug to ensure the installer works properly in the future
To build for macOS systems, run the following:
npm run forge:macNo. Because this is my portfolio web application, which contains numerous aspects (such as pictures and descriptions) of my life and projects, this repository is not open source. It is "code-available", meaning anyone can view the code to see how all the pieces function, but no one is permitted to copy, modify, or redistribute this code without my permission.
No*. I will not be accepting any pull requests submitted to this repository (not that I expect any for a personal website). However, if you have a suggestion for how code could be written better, you are welcome to submit a pull request. Any pull requests or issues submitted will be taken as suggestions, and no pull requests will be merged.