aws-crc-frontend Tailwind Templates

Aws Crc Frontend

🌠 The AWS Cloud Resume Challenge frontend section! Built with Astro, Tailwind CSS, Javascript, Cloudfront, Route53, SSL certs and wrapped with Terraform and CI/CD goodness this interstellar showcase is ready for liftoff. Fasten your seatbelts and let's embark on this cosmic journey together! 🌠✨

AWS ☁️ Cloud Resume Challenge 🚀

Ray's Portfolio Website

The architecture diagram above illustrates the workflow of this website it starts off by

  1. Pushing a commit to the aws-crc-frontend repo.
  2. The commits are picked up by Github Actions and triggers the appropriate workflow pipeline to build and deploy the infrastructure once this is completed it then moves into triggering another pipeline to test then deploy the website - raymund.cloud.
  3. Prior to merging commits to the main branch, CodeQL and tfscan scans are triggered to identify vulnerabilities within the repository. The results are then uploaded to the Security tab of the repository for further remediation.

This is inspired by the Cloud Resume Challenge.

Frontend section

Ray's Frontend website (HTML/CSS/JavaScript with Tailwind CSS) delivers content thru Cloudfront and API Gateway. It's built with Infrastructure as Code (Terraform) with S3 as it's backend for keeping track of the state file. The AWS Services utilised to build this website are S3, Lambda, DynamoDB, API Gateway, Cloudfront, AWS Certificate Manager, Route53, and AWS Organizations. To wrap this up altogether with automation of building and deploying the infrastructure including the website a CI/CD (Github Actions) pipeline was tapped.

How to install this theme using Astro

  1. Setup Astro.
  2. npm create astro@latest -- --template araxia55/aws-crc-frontend

Source of Origin Template

This is a personal blog, portfolio, or blog template created for Astro.

Astro port of aria.

You can install this theme with the Astro command like so:

npm create astro@latest -- --template ccbikai/astro-aria

Mods for this template

  • Included a resume section that is printable or downloadable.
  • Skills section in the resume page.
  • Technology skill logos using astro-iconify.
  • Labels/Markers to indicate a project or write-up are a work-in-progress.
  • Typed animation using tailwind-css.
  • Visitor counter tally at each bottom of a page.

Top categories

Loading Svelte Themes