AWS Builder Center

Builder Center

Building My Serverless Portfolio Website on AWS

Building My Serverless Portfolio Website on AWS

I built a portfolio website on AWS showcasing my skills with serverless architecture and a contact form that sends email alerts.

Dineshraj Dhanapathy

Sharing, Learning, Growing Together
Building my own serverless portfolio website with a contact form on AWS has been one of the most rewarding experiences from the AWS Builder Challenge #2.
I started this project with a simple goal: create a fully functional personal website where visitors can contact me directly—without managing servers, databases, or complex infrastructure. Using AWS serverless services like S3, CloudFront, Lambda, and SNS, I was able to build a secure, scalable, and cost-efficient solution from scratch.
Throughout this challenge, I not only learned how to design and implement a modern cloud architecture but also gained hands-on experience with real-world problem solving—from setting up CI/CD pipelines with Amplify to securing my application with IAM and CORS.
👉 I’ve also attached working demo videos of the website and contact form in action, so future builders can see the entire flow—from filling out the form to receiving an instant email notification.
This was a great learning journey, and completing it as part of the AWS Builder Challenge #2 truly boosted my confidence as a builder.

Live Website

🌐 https://main.d3r3msc7n9n84y.amplifyapp.com 

My Unique Twist

Instead of following the basic template, I created a professional Cloud and DevOps Engineer portfolio with:
🌟 AWS Community Builder Showcase
📧 Serverless Contact Form (Lambda + SNS)
🖼️ Project Gallery: Cloud Infrastructure Work
🎨 Skills with Interactive Visuals
🔍 SEO-Ready with Structured Data
💻 Frontend designed with Kiro IDE — an AWS-powered environment built for Spec-Driven Development. It streamlines the process by letting you define your site’s structure and functionality, then generates clean, production-ready code. I’ve also written a detailed article on Kiro, walking through the build step-by-step — you can read it here 

Project Architecture

🏗️ My Project Architecture
  • Frontend → Responsive HTML/CSS/JS served globally through CloudFront CDN for speed & reliability
  • Backend → AWS Lambda functions powering the contact form and other dynamic features
  • Storage → S3 buckets with versioning + strict access controls for secure static asset hosting
  • Notifications → SNS integration for instant, reliable email alerts & updates
  • Deployment → Automated CI/CD pipeline with Amplify, syncing directly from GitHub
  • Monitoring → CloudWatch dashboards & alerts for performance, logs, and cost tracking
  • Security → Enforced MFA, IAM least privilege, and bucket policies for defense-in-depth
Check out my project files and Lambda function implementation in this GitHub repo 

Day-by-Day Journey

Day 1: Secure Foundation 🔐 - Setting Up Your AWS Free Tier Account

What I Did:
🔐 Secured AWS Free Tier (MFA on root, IAM with least privilege)
💰 Billing Alerts set at $5 and $10 thresholds
Key Learning:
Security should be the foundation, not an afterthought. Setting up proper IAM from day one saved me from potential security issues later.
"Aha!" Moment:
Realized that AWS Free Tier isn't just about cost - it's about learning cloud security best practices from the beginning.

Day 2: Private Cloud Storage 📁 - Creating Your Secure S3 Bucket

What I Did:
📁 S3 Bucket with versioning & secure policies
🌐 Uploaded website assets & tested permissions
Key Learning:
S3 is secure by default - everything is private unless explicitly made public. This "secure by default" principle is crucial for cloud security.
"Aha!" Moment:
Understanding that S3 isn't just storage - it's a foundation for many AWS services. The bucket policies gave me insight into AWS IAM principles.

Day 3: Web Content 🌐 - Building Your Personal Website Files

What I Did:
🎨 Responsive Portfolio (HTML5/CSS3) with About, Skills, Projects & Contact
🌟 Added AWS Community Builder showcase + WCAG accessibility
✅ Tested access permissions to confirm “Access Denied” when public
Key Learning:
Modern web development isn't just about making it work - it's about performance, accessibility, and user experience.
"Aha!" Moment:
Realized that a portfolio website is more than a resume - it's a demonstration of technical skills and attention to detail.

Day 4: Global Distribution 🌍 - Making Your Website Accessible Worldwide

What I Did:
🌐 Distance Problem → Long travel = slow, unreliable websites
🚀 CDN Solution → Brings content closer to users (faster, reliable, secure)
🌍 Use AWS CloudFront → Create global distribution linked to private S3
🏡 Set Default Root (index.html) → Clean URLs, no errors
🧪 Test Website → CloudFront URL loads site; direct S3 = “Access Denied”
🔒 Security → Origin Access Control (OAC) lets CloudFront access private S3 securely
Key Learning:
CDNs go beyond speed — they improve reliability, security, and global availability. Edge locations transform the end-user experience.
“Aha!” Moment:
Watching my site load in under 2 seconds from across continents truly showed me the power of AWS’s global network.
Cloudfront
Test Website

Day 5: Professional Deployment 🚀 — GitHub, Amplify, and Modern Web Development

What I Did:
🔗 Connected my GitHub repository to AWS Amplify
⚡ Set up an automated CI/CD pipeline for deployments
⚙️ Configured build settings and environment variables
🌿 Implemented branch-based deployments for flexibility
Key Learning:
Modern deployment is not about manual uploads — it’s about automation, version control, and continuous integration. This ensures faster, safer, and more professional workflows.
“Aha!” Moment:
Seeing Amplify automatically detect my GitHub commit, build, and deploy my changes in minutes felt like pure DevOps magic. It showed me the true value of automation in cloud development.

Day 6: Contact Form 📧 - Making Your Website Interactive

What I Did:
⚡ Built a serverless contact form with AWS Lambda
📧 Implemented SNS notifications to receive form messages by email
✅ Added form validation and error handling in both frontend and backend
🔐 Configured CORS for secure cross-domain requests
Key Learning:
Serverless doesn’t mean “no servers” — it means “no server management.” Lambda and SNS handle the scaling, availability, and infrastructure behind the scenes.
“Aha!” Moment:
When my first email arrived via SNS, I realized how AWS services connect seamlessly through event-driven, publish-subscribe architecture to power interactive features.
contact form working successfully
email notifications

Day 7: Share Your Success! 🎉 — Creating My AWS Builder Center Article

What I Did:
📝 Documented my 7-day AWS Cloud Launch journey
📚 Created step-by-step deployment guides for each stage
💡 Shared key lessons and best practices
🌍 Published my article to help future builders succeed

Key Learning:

Documentation and storytelling are as important as building — teaching others not only helps the community, but also deepens your own understanding.
“Aha!” Moment:
Finishing this challenge showed me that cloud computing isn’t just about deploying services — it’s about enabling creativity, innovation, and solving real-world problems.

🌟 My Personal Touches

🎨 Custom theme & styling for a unique look (with Kiro’s AI-powered IDE support)
💼 AWS Community Builder showcase : Featured my portfolio and community achievements (with Kiro’s AI-powered IDE support)
📊 Interactive skills section : Built engaging animations and visuals, enhanced through Kiro AI-powered IDE
📧 Advanced contact form — Extended the basic form with AWS Lambda + SNS for professional-grade notifications
🌍 Custom domain + HTTPS — Configured Route 53 and SSL to make it production-ready
📸 Personal branding — Added my own portfolio, bio, and professional project highlights
🚀 CI/CD with Amplify — Automated updates from GitHub for a modern DevOps workflow
🔒 Extra security measures — Enabled S3 versioning, IAM least privilege, and strict bucket policies
🔍 SEO optimization — Implemented structured data markup to improve discoverability

Screenshots of AWS Implementation

1. AWS Amplify Deployment

1
2
3
4
✅ Build successful
✅ Deploy successful
✅ Custom domain configured
🌐 Live at: https://main.d3r3msc7n9n84y.amplifyapp.com

2. Lambda Function Configuration

1
2
3
4
Function Name: contact-form-handler
Runtime: Python 3.9
Function URL: https://u7ppegb645naprpabjequ5cs540fewpd.lambda-url.ap-south-1.on.aws/
Permissions: SNS:Publish

3. SNS Topic Setup

1
2
3
Topic: contact-form-notifications
Subscription: Email (dineshrajdhanapathy@mail.com)
Status: Confirmed ✅

Key Technical Achievements

  • Performance Metrics
  • Lighthouse Score: 98/100
  • Page Load Time: <2 seconds globally
  • Mobile Responsive: 100% compatibility
  • Accessibility: WCAG AA compliant

Cost Optimization

  • Total Monthly Cost: $0 (Free Tier)
  • Lambda Requests: <1,000/month
  • SNS Notifications: <100/month
  • Amplify Hosting: Free tier sufficient

Security Implementation

✅ HTTPS everywhere with SSL certificates
✅ CORS properly configured
✅ Input validation and sanitization
✅ IAM least privilege access
✅ No sensitive data storage

Tips for Future Builders

🔐 Start with Security

  • Enable MFA immediately
  • Create IAM users, don't use root
  • Set up billing alerts early
  • Follow least privilege principle

📐 Plan Your Architecture

  • Draw your architecture before coding
  • Understand service limits and pricing
  • Design for scalability from day one
  • Consider monitoring and logging

⚡ Embrace Serverless

  • Lambda eliminates server management
  • Pay only for what you use
  • Automatic scaling and high availability
  • Focus on business logic, not infrastructure

📡 Monitor Everything

  • Set up CloudWatch from the beginning
  • Use AWS X-Ray for distributed tracing
  • Create custom metrics for business logic
  • Set up alerts for critical failures

📝 Document Your Journey

  • Take notes as you build
  • Record key architecture choices
  • Share learnings with others
  • Write deployment guides for reuse

Challenges Overcome

1. CORS Configuration

Problem: Browser blocking cross-origin requests
Solution: Proper CORS headers in Lambda function
1
'Access-Control-Allow-Origin': 'https://main.d3r3msc7n9n84y.amplifyapp.com'

2. Lambda Cold Starts

Problem: First request taking longer
Solution: Accepted as normal behavior, optimized function size

3. SNS Email Delivery

Problem: Emails going to spam
Solution: Proper email formatting and sender reputation

What's Next?

Immediate Improvements

  • Add Google Analytics for visitor tracking
  • Implement contact form rate limiting
  • Add automated testing pipeline
  • Create staging environment

Future Enhancements

  • Integrate with AWS Cognito for user authentication
  • Add DynamoDB for visitor analytics
  • Implement AWS API Gateway for better API management
  • Create mobile app with AWS Amplify
This 7-day challenge transformed my understanding of AWS from theoretical knowledge to practical implementation. Building a real-world application using multiple AWS services showed me how they work together to create powerful, scalable solutions.

Key Takeaways:

  1. AWS Free Tier is powerful - You can build production-ready applications
  2. Serverless is the future - Focus on code, not infrastructure
  3. Security is foundational - Build it in from day one
  4. Documentation matters - Your future self will thank you
  5. Community is everything - Share your knowledge and learn from others

Resources and Links

AWS Services Used: Amplify, Lambda, SNS, S3, CloudFront, IAM, CloudWatch

Conclusion

Completing AWS Builder Challenge #2: Build a Website on the Cloud has been a transformative experience. In just one week, I went from setting up the basics of my AWS account to deploying a fully functional, secure, and globally available website. Along the way, I learnt how different AWS services—S3, CloudFront, Lambda, SNS, and Amplify—work together to deliver speed, scalability, and reliability. This project not only sharpened my cloud and DevOps skills but also showed me the importance of security-first design, automation, and documentation. More importantly, it reinforced the idea that cloud computing is not just about hosting websites—it’s about enabling innovation, building resilient systems, and sharing knowledge with the community. I’m excited to take these learnings forward and continue building more advanced cloud-native solutions.
Thank you for taking the time to read my article! If you found it helpful, feel free to like, share, and drop your thoughts in the comments, I’d love to hear from you.
# cloud-launch-challenge-1# aws-skill-builder# q-developer-challenge-2# aws-community-builders# aws-lambda
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