---

PedroAtencio.ai - Portfolio Web Site Hosted on AWS Cloud

Greetings!

Thanks for visiting my portfolio site. This page explains the purpose, design and how I went about creating it. I hope that you will find my site useful in learning about AI and the cloud. If you have any questions, feel free to contact me at [email protected]

---

Project Overview

Goal

The goal of this site is to showcase my AI, cloud, software development and project management skills for technologies and leaders to use as reference for their own projects.

Objectives

While planning the site I thought that the site should meet the following objectives:

• For visitors: Provide the opportunity to gain more knowledge about AI, Cloud and project management via tutorials, examples and using these technologies live on this web site.
• For me: Reinforce the motivation to continue hand-on learning about AI, AWS services and product and project management. I'm continously in training and putting what I learn into practice keeps me motivatded in learning.

Requirements

Provide AI-Focused Content

The site should easily display three types of content:

• • AI, Cloud and Project management examples, tutorials and solutions where I can leverage my domain expertiese in these areas.
  • To emphasize the AI focus, showase at least one AI-powered feach in each page.
  • Information about me such as my photo, certifiations, education, contact information.

Design

Utilize A Simple Design

I desided to employ a minimalistic design, with minimal graphics, fonts and effects as they may be distracting to the visitor. The focus is to provide information about the technologies intented in a simple but effective way. I want the visitors to have this impression about me: “I’m serious about AI and cloud technologies, I think in systems, and I care about clean execution.”

The site should easily display three types of content:

• • AI, Cloud and Project management examples, tutorials and solutions where I can leverage my domain expertiese in these areas:
    • Cloud Architecture, employing sound architectural desicions, documentation such as architectural diagrams
    • Cloud services
    • Database/data architecture
    • Cloud security
    • Software Development using Python, SQL, Machine Learning frameworks
  • Information about me such as my photo, certifiations, education, contact information

Technical Simplicity

The site should have these technical characteristics:

• • Simple/common, free and low cost technologies. No frameworks, no vendors, no complex JavaScript.
  • Easy to change theme by changing Cascading Style Sheets (CSS)
  • Example/solution pages can be easity converted to PDF, Medium publications to be posted on LinkedIn or sent via specific link.

Aesthetics

Theme familiar to people working on Cloud technologies.

• • Pages similar to AWS pages but without copying AWS branding.
  • Clear visual hierarchy (heather -> Projects -> side panels)
  • The ability to switch between a white and dark theme
  • Functional on desktop and mobile devide browsers

Initial Page Design

I used a white board to quickly brainstorm the home page layout that would meet the goal, ojectives and design requirements. For me, it's a lot easier to brainstorm using a white board or paper than to start using a tool. Once I had collected my thouthgs, I began designing the web site using Figma.

Initial Home Page Design
Draft Using White Board	Draft Using Figma

---

Site Development

AI-Generated Code

Because AI is a primary topic of the site, I decided to use Generative AI and tools integrated with AI for its development. I chose ChatGPT and Visual Studio Code as the primary development tools. 

Below is the initial prompt that I used to generate the code in ChatGPT

I want to have this tool generate code that I can later update in Visual Studio code and load to an Amazon S3 bucket. I have a design in mind. A banner at the top with the site heading: AI and Cloud Example Solutions and Useful Resources. There will be a frame on the left that will contain my photo and below the photo clickable images of certifications and other awards. The main body of the page will contain tiles for each of my sample projects. The tile will have a screenshot of the solution with a short textual description. On the right side will be a frame that will eventually display a chatbot window where people can prompt for information about me, the projects and content found on my site. The entire site must employ a responsive design to be functional in both, desktop and mobile browsers.

 

Below is the initial home page generated by ChatGPT. ChatGPT generated .css, .js and sample images with their own folders.

Registering a Domain in Cloudfare

Domain Registration

Instructions for domain registration

Site Creation in AWS

Creating and Loading a publicly-assible S3 bucket

Instructions for S3 bucket

Cloudfront

Creating Cloudfront Distribution

Instructions Cloudfront Distribuion

Securing The Site

Creating and Applying the Custom SSL to the Cloudfront Distributions

Instructions for AWS Custom SSL Certificate

Securing the S3 bucket

Applying security to the S3 bucket

Testing The Site

Testing the site (reloading files in 3, invalidating distribution to refresh cache)