Demonstrating Skills for FrontEnd Work

For all my friends, colleagues, and recruiters who have asked me to demonstrate my coding skills, this is my response to that request. My website https://dev.planetkevin.com is just about ready for prime-time and uses many of the latest Web technologies in a simple presentation.

Mobile-First, Responsive Web Design

The first things that you notice are the navigational elements on the top and bottom; or left and right, of the screen. The top and left links connect to the six content areas, while the bottom and right links connect to six language-based content areas. The content areas are all responsive and resize to fit the screen when the device is rotated. Each content area is housed on a custom-element and can be changed and even swapped out at runtime. The six content areas are:

- About

- Describes the purpose of the website and the technologies used to build it.

- ChatGPT

- Three panels that present how ChatGPT can be used to help coders write code.

- YouTube

- A YouTube video that demonstrates how to apply ChatGPT to creating video lists.

- Leaflet

- A map that demonstrates how to apply ChatGPT output to elements on a map.

- Resume

- A resume built on custom elements that stands alone as a responsive web page.

- Contact

- A contact form to request my services or provide feedback.

Dockerized GitLab CI/CD

The application uses three docker containers which are deployed to AWS Fargate using GitLab CI/CD. The first container is a NodeJS Express server that serves the application. The second container is a NodeJS Express server that, among other things, queries ChatGPT for datasets. The third container is a React application that is served by the NodeJS Express server. All three can be seen working together at [https://dev.planetkevin.com](https://dev.planetkevin.com).

OpenAI, ChatGPT

Since late 2022, OpenAI and ChatGPT have captured the imagination. After using the technology for trivial purposes, real use case scenarios have come into focus. In the example here, three panels present a descriptor, which is used to initiate a ChatGPT request for data; the actual prompt that is used to acquire the data, and a cached output of ChatGPT to understand how the technology might best be used.

NodeJS, TypeScript, React, Custom Elements, Shadow DOM, Template

The two docker containers that house applications for end-users are built using Vanilla JavaScript for one, and TypeScript and React 18 for the other. All three of the containers use nodeJS 18. The Vanilla JavaScript application is the outermost wrapper and includes all of the navigational elements and the custom elements that populate each face, or section, of content. These all use Shadow DOM and Template to render the content here. The TypeScript/React 18 application is used for the ChatGPT feature.

Internationalization

Internationalization has been core to this application, and several different methods have been used to provide this functionality. This will continue to be improved, and additional languages are easy to add. The application is currently available in English, Spanish, French, German, Portuguese, and Dutch.

AWS, Fargate, Load Balancing

One of the most challenging pieces in the puzzle was migrating from localhost to the cloud. After trying several different approaches, I settled on AWS Fargate. The application is deployed to a cluster of three containers, using .5GB of memory and 0.25 vCPU for all three. The containers are load balanced using an Application Load Balancer and soft-launched Monday, July 10, 2023.

Purpose and Direction

The purpose of this website is to demonstrate my coding skills to former, current and future partners in a manner that is easy to understand and navigate. Most importantly, this site will not disappear as so much client work often does. When a contract or engagement is over, the work is often hidden behind firewalls and eventually taken down. This website will remain up and available for as long as I am able to maintain it and hopefully provides insight on my skills and attention to detail.

Contact

Thank you in advance for any feedback on the site. I can be contacted through LinkedIn or from the app itself. I look forward to hearing from you and am grateful for your time and consideration.

Kevin