AWS Builder Center

Builder Center

Level Up Your Code 📝 - Building Your Rift Rewind Project Files

Level Up Your Code 📝 - Building Your Rift Rewind Project Files

Time to Show Off Your Skills Like a Pentakill Highlight Reel

Raghuraman, Ashwin

Sr. Solutions Architect, Games
Welcome to Day 3 of the Riot Games Rift Rewind Developer Challenge ! 🚀 Today you will create your project content - the files that will become your Rift Rewind submission. Don't worry if you're not sure where to start, we'll guide you through the process like a good support guiding their ADC to victory.
In about 30 minutes, you will create or customize your project files and upload them to your secure S3 bucket from Day 2. We're not just copying files, we're learning how to organize project content properly and maintain security while building - because good file organization is like good map control.By the end of today, you'll have your complete project content stored securely in the cloud, ready for the next steps. Let's get this W!
Note: The approach provided is completely flexible. Whether you're building a web app, API, documentation site, or any other project type, the core principles of organizing and securing your files remain the same. 🎨

What you will accomplish today

  • Download the starter website template from GitHub
  • Customize the HTML with your personal information
  • Upload your website files to your private S3 bucket
  • Verify your files remain private and secure

What you will need

  • AWS account from Day 1  💻
  • S3 bucket from Day 2  📁
  • Computer to download website files from GitHub  🌐
  • Text editor to customize your website (VSCode  , Notepad, TextEdit, etc.) ✏️
  • Photo of yourself (optional) 📸

Step 1: Download the website template 📥

First, we will get the website template that includes all the HTML, CSS, and styling you need for your personal website. Feel free to use your own files here if you comfortable with HTML and CSS.
  1. Go to https://github.com/anacunha/aws-builder-challenge-personal-website 
  2. Click the green Code button
  3. Select Download ZIP
  4. Extract the ZIP file to your computer
  5. You should see these files:
    • index.html (main webpage)
    • styles.css (styling)
    • profile-photo.svg (placeholder profile image)
    • README.md (instructions)

Step 2: Customize your website ✏️

Now it's time to make the website your own by replacing the placeholder content with your personal information and fun facts.

Update index.html

Replace the placeholders

Open the index.html file in any text editor and replace "Your Name" by your actual name.
1
2
3
<!-- Change this -->
<title>Your Name - Personal Website</title>
<h1>Your Name</h1>

Update your AWS Builder Center profile link

Change @youralias to be your AWS Builder Center alias. If you're unsure of what is your alias, you can see it on https://builder.aws.com/profile .
1
2
<!-- Change this -->
<a href="https://builder.aws.com/community/@youralias" target="_blank" class="aws-link">View AWS Builder Profile</a>

Customize the fun facts

Change the fun facts provided to be actual fun facts about you (you can use new emojis too).
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Change this -->
<div class="fact-card">
<h4>🚀 Your First Fact</h4>
<p>Replace with something interesting about you!</p>
</div>
<div class="fact-card">
<h4>🎯 Your Second Fact</h4>
<p>Maybe a hobby or skill you're learning?</p>
</div>
<div class="fact-card">
<h4>💡 Your Third Fact</h4>
<p>Something fun or unique about your journey!</p>
</div>

Update the footer

Replace "Your Name" by your actual name.
1
2
<!-- Change this -->
<p>&copy; 2025 Your Name. Built with ❤️ on AWS</p>

Add your profile photo (optional)

If you want your page to be more personalized, you can change the profile picture to be your own photo.
  • Find a cool picture of you (square photos work best)
  • Copy your picture to the same folder where you have index.html and style.css
  • Rename your picture to profile.jpg or profile.png
  • Update the src in index.html to match the same file name of your picture
1
2
<!-- Change this -->
<img src="profile.png" alt="Your Name" class="profile-photo">

Step 3: Preview your website locally 👀

Before uploading the files to AWS, let's test your website on your computer to make sure everything looks good.
  1. Click on index.html to open the file in your browser
  2. Check that:
    • Your name appears correctly
    • Fun facts show your content
    • Links work
    • Photo displays (if you changed your picture)
    • Styling looks good

Step 4: Upload your website files to S3 ☁️

Now that everything is looking good, it's time to move your website files to the cloud. We will upload them to the secure S3 bucket you created on Day 2. 

Access your S3 bucket

  1. Go to the Amazon S3 Console 
  2. Click on your bucket from Day 2
  3. Go to the Permissions tab and verify that Block all public access is On ✅
  4. Go back to the Objects tab

Upload your website files

  1. Click on the Upload button in your bucket
  2. Click on Add files
  3. Navigate to the folder on your computer where you have your website files
  4. Select the following files:
    • index.html
    • style.css
    • Your profile photo (or profile-photo.svg if you don't have one)
  5. Do not change the default settings.
  6. Click on Upload

Verify upload

After the upload completes, you should see:
  • index.html ✅ Succeeded
  • style.css✅ Succeeded
  • profile.png✅ Succeeded
You can also navigate back to your bucket Objects and check that they files have been correctly uploaded.

Step 5: Test security 🔒

Let's verify that your files are properly secured and not publicly accessible.
  1. Click on index.html in your S3 bucket.
  2. Copy the Object URL (should look similar to https://your-bucket-name.s3.region.amazonaws.com/index.html)
  3. Open this URL in a new tab.
  4. Check that you see Access Denied 🔐 (this is correct and expected)
Why this is important: Your files are securely stored and not publicly accessible. Tomorrow, we'll use CloudFront to serve them securely with HTTPS.

Checklist

Check the items below to make sure you have completed today's challenge:
  • [ ] Downloaded website template from GitHub
  • [ ] Customized index.html with your information
  • [ ] Added your profile photo (optional)
  • [ ] Tested website locally in your computer
  • [ ] Uploaded all files to private S3 bucket
  • [ ] Verified files are private (Access Denied when accessing directly)
You are done for the day! 🎉 Your personalized website is now securely stored in AWS S3. Tomorrow we'll make it live for the world to see!
# rift-rewind# rift-rewind-challenge-1# challenge# hackathon
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article