Final

You are required to create a CI/CD pipeline using Terraform and GitHub actions to deploy a static website on AWS.

Requirements

You need to customize the theme and replace the default name with yours (see the instructions below)
The website needs to be behind CloudFront
All the necessary infrastructure needs to be created using Terraform. Put the infra code in the infra directory
You don't need to to use a valid domain for the website; only the CloudFront HTTPS endpoint is required (e.g. https://dnrogbbpfg3z9.cloudfront.net/). Put the endpoint in the README.md file in the cloudfront-endpoint directory
The GitHub action needs to get triggered on merges
The GitHub action needs to use an AWS role (created with Terraform) to authenticate
Both bucket name and CloudFront distribution id need to be inserted into the action as secrets

Note

You only need to change the default name. Feel free to customize the theme more, but it's not necessary. You can have everything else untouched

Important commands

npm install to install the modules after you cloned the repo
npm start to run the website on the browser and see your changes
npm run build to generate static files in the public folder (you will need to copy the files in this folder to S3)

Theme Instructions

Start developing.

Navigate into your new site’s directory and start it up.
```
cd <SITE-DIRECTORY>
npm install
npm start 
```
Your site is now running at http://localhost:8000!

Customizing `gatsby-config.js`

All the information that appear on your resume is in this file. With solely changing the content of this file, you can customize the whole website. There's no need to change any other part of the code--although you're more than welcome to do so :)

Name, contact, and social media


name: `Luke Skywalker`,
role: `Software Developer`,
email: `luke@thelightside.com`,
socialMedia : [
    {"name": "github", "link": "https://github.com"},
    {"name": "linkedin", "link": "https://linkedin.com"},
    {"name": "facebook", "link": "https://facebook.com"},
    {"name": "twitter", "link": "https://twitter.com"},
    {"name": "instagram", "link": "https://instagram.com"},
  ],

You can simply delete any social link you want by removing the corresponding object (line) and it won't appear on your website. You can also add more social media links. This project uses the react-social-icons library. You can find the list of supported icons here.

About


about: `<p>The son of Jedi Knight Anakin Skywalker and Senator Padmé Amidala,
 Luke Skywalker was born along with his twin sister Leia in 19 BBY.</p>
 <p>More info <a href="https://starwars.fandom.com/wiki/Luke_Skywalker">here</a></p>`

Anything that you put here will appear under About page, which is the main page of the website. As you can see, you can also include HTML tags.

Education


education: [
      {
        degree: "B.Sc.",
        major: "Computer Engineering",
        when: "2008-2012",
        school: "UCLA",
        where: "Los Angeles, CA",
        moreInfo: `<p>I finally found out how it feels like to live in LA; it was awesome!</p>`
    },
]

Here you will add you educational background by appending similar items to the education array. You can also remove fields you don't like (like major, or the name of the school) and it won't appear on your website.

Experience


experience: [
        {
          role: "Software Developer",
          when: "2014-Present",
          company: "Facebook",
          where: "Menlo Park, CA",
          moreInfo: `See my work <a href="#">here</a>.`
      },
      {
          role: "Web Developer",
          when: "2010-2014",
          company: "Amazon",
          where: "Vancouver, BC",
          moreInfo: ``
      },
]

This is where you will talk about your experience.

Skills


skills: [
      {
        name: "JavaScript",
        level: "85",
        experience: "5 years"
      },
      {
        name: "Python",
        level: "75",
        experience: "2 years"
      },
]

You will specify your skill set here. The level parameter should be between 0 and 100.

Interests


  interests: [
        "Reading",
        "Programming",
        "Playing the violin",
        "Running",
        "Watching Monty Python and the Holy Grail"
        ],

Here you will list your Interests for the Interests page.

Themes
```
theme: "great-gatsby"
```
This project comes with 5 themes:
- great-gatsby : purple (default)
- master-yoda: light green
- wonder-woman: light red
- darth-vader: black
- luke-lightsaber: light blue

Google Analytics


plugins: [
    // Make sure this plugin is first in the array of plugins
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-111111111-1",
        head: true,
      },
    },
  ],

Add your Google Analytics tracking id here.

Fonts
```
font: "default"
```
There are currently two fonts available: default which uses the Helvetica font; and programmer which uses the IBM Plex Mono from Google Fonts.

Changing profile photo and favicon

Simply replace the profile.png and favicon.ico files in the /static directory.

CLCM 3501