Personal website with randomly generated design

A personal website is the #1 most common first project for budding front-end developers. Here, we’re going to build a simple personal website with a twist, by including a randomly generated stylesheet that updates every hour, totally refreshing the design of your website.

Every hour, the design of your website is dynamically updated - either partially or completely.

For an extra challenge:

• Randomise the content of your website as well as the design.
• Display a timer on your website that counts down to the next design update!

• Create a basic static website using HTML, CSS (and JavaScript if you like), hosted on Amazon S3.
• Use AWS Lambda and Amazon CloudWatch to generate and update your dynamic CSS stylesheet.

We recommend dividing this project into two separate parts:

1. Infrastructure: Focus on connecting each component of the stack together first.
   • Start by setting up a static website on S3
   • Create a CloudWatch scheduled event which runs a Lambda function every hour
   • Write the Lambda function to update the stylesheet of your website each time it runs. To start with, I recommend simply overriding your stylesheet with an unchanged duplicate to make sure everything is working end-to-end. You can check the timestamp on the file to verify that your Lambda is updating the stylesheet.
2. Dynamic design: A stylesheet is just text, and JavaScript (and most programming languages) are built to manipulate text. Think of your stylesheet as a collection of strings.
   • You write JavaScript inside your Lambda function to interpolate as many variables as you like into your stylesheet text. For example, you could build an array of font names and pick one at random to use in your stylesheet.
   • The same goes for colors - an RGB color can be built by joining together three integers, each between 0 and 255. You can generate a totally random color this way, or limit your generated values to only aesthetically pleasing combos.
   • In the same way, you can use JavaScript to dynamically generate integers for lengths, widths, heights, sizes, borders, padding, opacity, etc. Almost any CSS attribute can be set using random number generation, or by randomly picking selectors and/or attributes from a list.
   • Have your Lambda function generate a random stylesheet each time it runs and update the stylesheet currently saved on S3, giving your website a brand new redesign.

• Check out this AWS documentation on how to host a static website on S3.
• Get up to speed on the basics of AWS Lambda.
• You can invoke your Lambda function every hour using a Schedule expression with AWS CloudWatch.
• Amazon has a tutorial on how to use AWS Lambda with Amazon S3. Your Lambda will need access to the S3 bucket you’re using to statically host your website.
• Get familiar with random number generation and picking a random element from an Array using JavaScript.