robere2 / portfolio

Source code for my portfolio website

Portfolio ·

Personal portfolio for Erik Roberts

Installing / Getting started

This project is designed to have as few dependencies as possible. The dependencies it does have are, for the most part, build dependencies.

This project is also ready to be deployed to Azure Static Web Apps with CD.

Developing

Built With

Vite is used for bundle the application. The only runtime dependencies are:

• FontAwesome is used as a source for icons.
• Google reCAPTCHA is used to protect against contact form spam.

As few dependencies as possible are used, and new dependencies should be installed sparingly.

Prerequisites

You should have Node.JS and NPM installed on your computer. Node.js v20 is recommended, but v18 and v22 are also supported. If you have nvm installed, you can switch to the correct Node.js version by running:

nvm use

If you intend to develop and run Azure Functions locally, you also need to install the Azure SWA CLI:

npm install -g @azure/static-web-apps-cli azure-functions-core-tools@3

Setting up Dev

Here are the steps to set up a local development environment.

First clone the repository locally.

git clone https://github.com/robere2/Portfolio.git
cd Portfolio/

Install the dependencies for the client.

cd client
npm install
cd ..

Optionally, if you want to run the Azure Functions locally (as opposed to just the frontend), also install the backend dependencies.

cd api
npm install
cd ..

If you do intend on running the Azure Functions, you also need to create a local.settings.json file.

cp api/sample.local.settings.json api/local.settions.json

And then edit local.settings.json to contain the proper configuration values. These values should be kept secret and not committed to version control.

Running with Functions

To run with functions enabled, simply run:

swa start

Open the application at http://localhost:4280/

Running without Functions

To run without functions enabled, simply run:

cd client
npm run dev

Open the application at http://localhost:3000/

Building

Client

The client can be built via:

npm run build

This will output the built project to /client/dist. You can then start up a simple HTTP server to serve your built application via:

npm run preview

API

The Azure Functions do not have any build steps.

Deploying / Publishing

This project has full continuous deployment support for Azure Functions. Take a look at the GitHub Workflow file to see how it works.

Configuration

No configuration is required for the client.

For the Azure Functions, you must set up local.settings.json to develop locally, as mentioned in the "Setting up Dev" section. Once deployed to Azure, instead of using a local.settings.json file, you will configure your application settings in the Azure Portal.

If you intend to deploy this application on a domain other than https://ecr.dev/, you will need to create your own FontAwesome kit with the custom icons:

• fa-azure
• fa-cpp
• fa-electron
• fa-graphql
• fa-mongodb
• fa-nestjs
• fa-postgres
• fa-redis
• fa-rabbitmq
• fa-minecraft

More information available on FontAwesome's website.

You will also need to set up a custom reCAPTCHA profile for your domain. More information available on Google's website.

Tests

No test suite is currently available.

Refer to issue #24.

Style guide

This project follows the code guidelines found at https://github.com/elsewhencode/project-guidelines.

Pull requests must be linted before being merged. You can lint locally via npm run lint in both api/ and client/. npm run fix will attempt to fix any linter issues.

If development environment setup instructions were followed correctly, then a pre-commit hook should have been installed to automatically lint your staged files before committing. If your changes have any linting issues, then the commit will abort. Even if this is not set up, the GitHub Action will notice the issues for you.

Api Reference

/api/SubmitContact

Submit a "Contact Me" form.

• POST
• Requires body parameters: name, email, subject, body, token.
• Content-Type application/json.

Licensing

This project is licensed under the MIT license.

portfolio's Issues

Text links should be the primary color by default

<a> elements should by default have their color equal to var(--primary).

Contact Forms should have some obvious way to tell them apart from normal emails

At the moment, the only way to tell if a contact form submission is coming from the contact form or from email directly is to look at the from address. There should be some more obvious way to tell whether an email is from a contact submission, such as [Contact] as a prefix.

Add Sentry error logging

If a user has an error, it should be logged to Sentry.

Add Google reCAPTCHA to Contact Me form

Contact form has no protection at the moment. An Azure function should be set up for Google reCAPTCHA.

RepeatingList might not be accessible

The RepeatingList probably is not accessible, since it is adding and removing elements to and from the DOM. An invisible list should be available for screen readers instead.

Upgrade function worker Node version

The Azure Function worker currently is using an older version of node. Ideally it should be updated to Node 16, but during my trials last night I had trouble getting it to work.

Add CI

CD is already added but some simple CI could be useful. Particularly for code analysis and linting.

Custom icons sometimes appear as emojis

This was noticed on an iPad, year currently unknown. The custom FontAwesome icons must be recognized as a utf8 character and rendered as that as opposed to the icon that it's supposed to be.

I believe the emoji was 👨‍🦰, or something like it, and the icons were C/C++ and MongoDB.

Improve written text

Much of the text on the website was placeholder text, intended to be replaced later. The time has come for that.

This includes adding more info to the projects section.

Deploy Action attempts to run when it shouldn't

It looks like the Azure deploy action is attempting to run whenever Dependabot submits a PR. I think that I originally just used the template provided by Azure with some minor modifications and didn't test too thoroughly. Interestingly it doesn't happen for me.

This could be a security concern if it happens for any user other than myself.

Convert to TypeScript

Originally I didn't want to use TypeScript to keep dependencies as low as possible, but I think there's benefit to using it in this case.

Setup should be easy since Vite is used.

Add Privacy Policy / ToS

A Terms of Service and Privacy Policy should be added to the webpage. Since this is a static page, not much is needed, but it should be added anyway. Especially if I decide to add analytics.

Update Microsoft Azure logo

For Azure, the Microsoft logo was originally used as a placeholder. It should be replaced with the actual Azure logo.

Improve document metadata

Metadata for the webpage when embedded on other sites such as in Twitter cards or Google searches can be improved.

Use noopener on links

<a> tags should have rel="noopener"

Add custom error pages

404 pages, for example, should have their own design & branding as opposed to Azure's default.

Add smooth scrolling

The CSS smooth scrolling should be added, ideally, however due to how the RepeatingList works, it currently breaks it by immediately stopping the scroll when <a> links to hashes are clicked. Therefore the RepeatingList should scroll its content in some other way, if possible.

Headshot is sometimes misaligned.

On larger screens, the headshot can sometimes be uncomfortably close to the title text. It should be moved further left.

RepeatingList can't be easily scrolled on touch screens

When using a touch screen, RepeatingList needs to be touched twice before scrolling will work. This is probably just a matter of adding the :focus state.

Contact Form inputs are missing accessibility requirements

Contact Form inputs are missing:

• labels
• placeholders

Repository needs to be restructured

The GitHub repository and its code is not structured in a friendly way at the moment. A better README should be added, along with any necessary tooling.

Wondering if you wouldn't mind adding an LICENSE

Would be interested in using this myself. But as you haven't got a license; I don't want to be breaking anything. Thanks