Rift Rewind Challenge 1, Building a Website
Building My Own Gaming Themed Website And Hosting it on AWS Amplify
Hi There!
Last Time it was tough competition! where i had secured 6th Place. It's now that time again.
This is MY Round 2 in Website Building, Building my Own Gaming Hub and Hosting it on AWS Amplify!
The website gaming.praneel.tech
Redemption?
After Coming in at 6th place last time i had a lots od other things to think about and do, (mainly playing Silksong for the most part :P) and was constantly upgrading my website: Added a Chatbot, Added More Blogs etc (much more to come!).
So when i saw that the next challenge is a gaming based one i knew i had to do it!
Day 1 🔐: Power Spike Prep
Since i had already Attempted the Previous Cloud Challenge, this was already done for me :D
What i accomplished on Day 1:
- Enabled MFA(Multi Factor Auth) on the root account
- Created a Dedicated IAM admin User(don't use root account, heard many nightmares)
- Set a Budget cap of $5 per month and alerts to prevent overspending
The verification felt tedious at first but it was very thorough. Went through Payment Verification,ID checks, etc. The emphasis on security-first thinking set the tone for everything that followed. The guide were incredibly detailed and pretty much the same, every click was explained, which I appreciated.
My Aha! Moment of today: Security and cost controls come first, don't fix something that is works
IAM SetupBudget and Billing!
IAM!
Billing!!
Day 2: Ward Your Data - Creating Your Secure S3 Bucket for Rift Rewind
The next step was to create a private S3 bucket, The Bucket will store the Websites files.
Since i Had Already Done this last time it was again, pretty simple to do.
What i accomplished on Day 2:
- Created a Private Bucket with
Block Public Accessenabled - Uploaded a sample image into an
/imagesfolder - Tested the "Object URL" and got an
"Access Denied"Page - Sent the Object URL to friends to try it out!
The "Access Denied" Message meant my Private Bucket was properly Secured.
My Aha! Moment of today: Misconfigured buckets will leak sensitive data make sure the are configured to spec.
Day 3: Level Up Your Code 📝 - Building Your Rift Rewind Project Files
Since I had already successfully made my own website, i thought to myself that lest make a gaming themed website
Project Modifications: Gaming Hub Transformation
Design Philosophy & Color Scheme
The landing page was redesigned into an immersive gaming experience inspired by Riot Games. The core design uses a bold red accent (
hsl(0, 73.7%, 41.8%)) against a black background (#000000), creating a high-contrast, energetic look. Red accents are used across all interactive elements for a cohesive visual language.Immersive Visual Effects System
1. CRT & Retro Aesthetics
- Scanlines
- CRT Screen
- Console Grid
2. Particle Network Background
A custom HTML5 Canvas system creates a dynamic particle network using a React hook (
useParticleNetwork):- 50 independent moving particles
- Connection lines fade with distance
- Configurable opacity, count, and distance
- Optimized with
requestAnimationFrame
3. Advanced Text & Border Effects
- Glitch Text: RGB split-clone effect for headings
- Neon Glow: Pulsating text shadows for emphasis
- Cyber Borders: Animated light sweeps on section dividers
- Hologram Shimmer: Shifting diagonal gradient for holographic surfaces
4. Interactive Hover Effects
- Particle Trail: Flowing particle streams on button hover
- 3D Transforms: Cards tilt and lift in 3D space
- Glow Intensification: Brighter glow and shadow on hover
- Animated Overlays: Light sweeps and scans on interaction
Animated Grid Background
A subtle red grid scrolls continuously in the background, creating motion without distraction.
Profile Avatar Enhancement
The avatar includes multiple animated layers:
- Pulsing Underglow
- 3D Mouse Tracking: Real-time tilt and parallax depth
- Interactive Scaling: Enhanced glow and speed on hover
Page Architecture
Home Page
Includes three sections:
- Hero Intro: Cyber-bordered welcome section
- Quick Navigation: Buttons with particle trails linking to About page
- Gaming Library: Grid of 12 featured games with 3D hover effects, glowing borders, and Steam links
Social links (Steam, Epic, personal site) use neon glow effects.
About Page
- Hero Card: Intro with name highlighted in accent red
- Section Cards: Covers academic and gaming background
- Hover Effects: Lift, glow, and animated borders
- Navigation: Back button with particle trail
404 Page
- Bold 404 typography with text shadows
- Styled links and consistent dark theme
Performance & Accessibility
- Decorative effects use
aria-hidden="true" - Full support for
prefers-reduced-motion - Semantic HTML and proper heading structure
- Keyboard navigation and visible focus states
Component Architecture
Effects are modular and reusable:
- VisualEffectsOverlay: Manages CRT, scanlines, and grid
- ParticleField: Handles canvas-based particle animation
- Layout: Provides structure with avatar and navigation
- useParticleNetwork: Hook for particle logic
This setup keeps the system modular, consistent, and easy to customize.S3 Private Bucket, Configured last time :P
S3 Private Bucket, Configured last time :P
Day 4: Global Distribution 🌍 - Making Your Project Fast Worldwide for Rift Rewind
Who would want to use a website that loads slowly around the world? CloudFront Solves just that!
What i accomplished on Day 4:
- Created a CloudFront distribution
- Connected it to my Private S3 bucket
- Set the root objects to
/index.html - Tested the global URL and my site loaded!
While the Private Bucket was still returning
"Access Denied", the website was up and functionalMy Aha! Moment of today: A CDN is what makes a website truly global
Cloudfront!
Day 5: Pro Deploy Mode 🚀 - GitHub, Amplify, and Modern Development for Rift Rewind
Amplify Does Dynamic Sites, and Guess what? It supports Next.js, React, Jekyll Out of the Box!What i accomplished on Day 4:
- Connected Amplify to my GitHub
- Automated building & deploying on every
git push - Not Having to worry about cache invalidation and URL mismatches because it does it all for me!
- Not Having to Build
/outfiles no more! - Unlocked Automation Time!
This truly was a HUGE Quality-Of-Life Upgrade. I went from having to spend 10 minutes building files, uploading to S3 Bucket and then trigger cache invalidation and etc, to
git push and its updated in 2 minutes! I decided not to delete my old S3+CloudFront Site , it was part of the journey - i cant just delete it like that! It taught me so much about how things work under the hood and if i had gone straight to Amplify, i wouldn't have learned so much about .sh scripts, AWS CLI and S3 Buckets and its limitations. That context made me appreciate Amplify even more!My Aha! Moment of today: AWS AMPLIFY is still the best
Amplify is the Best
Since i had already Setup Route 53 Prior with my domain, (check out guide to get started here ) I gave it the domain gaming.praneel.tech !
WEBSITE IS ALIVE!
Day 6 : Tap Into the Rift 🎯 - Building Your First Riot Games API Integration
This day was tough, Even More than last times Form Building. I Still Get Nightmares about this.
What i accomplished on Day 6:
Understood how API calls work and why they need backend services
Learned how to run code securely in the cloud with API keys
Set up my Riot Developer account and API key
Configured secure permissions for API calls
Added a live League data feature to my gaming website
Modified Code and Changed CSS To Match my Website Style.
Riot Api Lambda Function!
Lambda Function, Riot api!
My Aha! Moment : I Still have a lot to learn in AWS Lambda and Trust the docs!
Day 7 : Victory Lap Time! 🏆 - Share Your Rift Rewind Success Story
Well Then, i Have Successfully Hosted my Gaming Site , and Implemented Riot's API for League Lookup.That Brings us to now.
Tips for Future Builders (What I Wish I'd Known)
- Don't skip security - Set up IAM users, MFA, and budget alerts on Day 1. Future you will thank present you.
- Do it manually first - Understanding S3 + CloudFront made me appreciate Amplify more. The hard way teaches you why the easy way exists.
- Check the small stuff - Typos in environment variables can cost hours. I learned this the hard way with that extra dot.
- Think about UX - Small features (dark mode, custom 404s) make a big difference in how your site feels.
- Stay curious - Explore beyond the guides.
- Document everything - Your future self (and others) will appreciate the breadcrumbs you leave behind.
- AWS Lambda will throw punches, Don't loose Hope!
The Final Project
You can check it out at the live site here : gaming.praneel.tech
Check Out the GitHub Page too.
(I'll Be getting back to silksong now ;)
Thanks for Reading!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article