My Portfolio
Front End: HTML - CSS - Bootstrap
The portfolio is made up of multiple individual .html pages that are linked together and can be navigated through with the use of the header and footer hyperlinks. I kept this project simple ... it could have been done as a React project, but I decided to go for simplicity to start with. There is very minimal Javascript ... everything is pretty static.
The only place Javascript is utilized is on the contact.html page. I use a simple eventListener to watch for the submit-button being clicked in order to send the email.
The rest of the mark-up and styling is exclusively Bootstrap. You can probably tell I'm not very design/artistically oriented ;)
Back End: Javascript - Node - AWS: CodePipeline, Lambda, API Gateway, SES
To explain the back-end of this portfolio, it is easiest to explain it as "client-side related backend" and the "application-side related backend".
Client-Side Related Backend
When a visitor interacts with the Contact page and enters their Name, Email Address and Message ... there is a Javascript eventListener that listens for the Submit button to be clicked on. The information is then put in a JSON object and a POST request is triggered to a specific API-Endpoint. I created this API-Endpoint on AWS using API-Gateway.
The API-Endpoint acts as a trigger to a Lambda Function (which is also on AWS). The Lambda Function takes the information passed to it through the API-Endpoint (i.e. the POST from the visitor on my Contact page) ... it takes this information and sends it to my email using Amazon's Simple Email Service. In order to use Amazon's SES I had to verify an email ... that email is used by the Lambda function as both the Sender & Receiver. Using this method and Amazon tools, I am able to receive emails (to my email address) from the Contact page on my portfolio.
Application-Side Related Backend
With respect to the "application-side" everything starts at GitHub. I have a repo on GitHub that I push updates to from my local environment. On AWS, I created a specific bucket on S3 ... in this specific bucket (not accessible to the public) I used AWS CodePipeline to create a web-hook that connects the bucket to my GitHub account. The web-hook looks for any changes in my GitHub account (in this case the specific repo associated with my portfolio).
When the web-hook detects a change in my GitHub repo, it takes the changes and deploys them to the specific bucket (see the next section) that I am using to host my static portfolio webpage. This way, anytime that I make changes on my local environment and push them to my GitHub they are automatically deployed to my S3 bucket hosting my portfolio ... so changes are continously and quickly deployed to my live portfolio.
The last aspect is my specific web domain (alexdospinoiu.com). I purchased it on GoDaddy and set it up so that anyone searches for it or clicks on it ... it forwards the traffic to the endpoint of the S3 bucket that I'm using to host my portfolio. This is one thing I'm going to try to see if I can figure out ... how to have the alexdospinoiu.com "show up" as the address on the address-bar when the traffic has arrived at my S3 bucket. Still working on this detail...
Database: Amazon S3 Bucket
I decided to use Amazon S3 (one bucket) in order to store all the files for the portfolio. The files are simple and small: the .html files, the .css files, and the javascrip file for the contact page as well as the various images throughout the portfolio.
Creating the Amazon S3 bucket was straight-forward and simple. The more challenging aspect was figuring out the permission(s) and the policies that needed to be set-up and assigned in order for the bucket to function properly. First, I figured out the correct policy to assign just to the bucket. Initially, I granted too much access with the ACL settings and had to reimpose restrictions. I finally figured out the correct way to do it is to assign a specific JSON policy to the bucket itself. The public is allowed to "Get Objects" but no other permissions.
Second, I figured out the proper settings to allow the bucket to host a static website. This was pretty straight forward, the steps are simple on AWS ... just had to ensure the index.html page is the one that is first rendered.