Actor/Comedian Portfolio Website

Project Overview

A modern portfolio website, commisioned to showcase the work of an actor and comedian. Built using React, Vite, Tailwind CSS, AWS Amplify Gen 2, and AWS Lambda.

Tech Stack

• Frontend:

  • React: JavaScript library for building dynamic user interfaces.
  • Vite: Fast build tool for modern web apps, offering faster development and HMR.
  • Tailwind CSS: Utility-first CSS framework for flexible, responsive design.

• Backend:

  • AWS Amplify (Gen 2): Code-first backend framework for creating real-time APIs, hosting, and deployment.
  • GraphQL API: Real-time data fetching using Amplify Data with DynamoDB integration.
  • AWS Lambda: Serverless function used to fetch data from the YouTube Data API and update the website with new videos and content.
  • CI/CD: Integrated with GitHub for automatic deployment to AWS.

Key Features

• Responsive Design: Fully responsive across mobile, tablet, and desktop using Tailwind CSS.
• Real-time Data: Dynamic show content (e.g., reviews, videos) fetched from AWS Amplify’s GraphQL API.
• Automated Updates: AWS Lambda fetches data from the YouTube Data API daily, ensuring the site always displays the latest videos and content.
• Modular Components: Reusable React components for easy updates and maintenance.
• API Integration: Uses Amplify Data to connect and display data (show details, reviews, etc.).
• Fast Development: Optimized with Vite for rapid build times and fast hot module replacement (HMR).

Best Practices

• Separation of Concerns: MVC architecture for data, logic, and UI separation.
• Scalable Code: Component-based architecture ensures reusability and maintainability.
• Version Control: Managed through Git and GitHub with automated CI/CD for seamless deployment.
• Web Accessibility: Implemented accessibility best practices such as semantic HTML, ARIA attributes, and proper color contrast to ensure the site is accessible to all users.

Future Improvements

• Performance Optimization: Implement lazy loading for images and videos to improve page load times.
• CMS: Implement a CMS for easier content management, allowing Kieran to update the site easily.
• Advanced Data Filtering: Implement filtering for show types, reviews, or other categories.
• Dark Mode: Add a dark mode for improved user experience in low-light environments.

Summary

This project demonstrates my ability to build scalable, responsive, and modern web applications using React, Vite, Tailwind CSS, AWS Amplify Gen 2, and AWS Lambda. The use of code-first approaches for backend integration ensures flexibility and future-proofing of the site.