Skip to content
MacTokyo.
日本語

Personal Project — 2021

MacsCollection

A portfolio built from scratch using HTML, CSS, and JavaScript — the first iteration of this site, and the foundation everything since is built on.

Role
Designer & Developer
Client
Personal Project
Year
2021
Services
Web Design, Frontend, HTML/CSS/JS
MacsCollection

MacsCollection.com is a Front-End Portfolio based on JavaScript, HTML, and CSS. It has a responsive, mobile-friendly, and original design built from scratch. This portfolio demonstrates my projects from 2016 to 2020. This project aims to encourage people during the global pandemic and practice my design and development skills.

MacsCollection — case study image

The website utilizes flexbox, media queries, and responsive units to ensure a seamless user experience on various devices. By implementing these techniques, the design adapts fluidly to different screen sizes, providing an optimal layout whether viewed on a desktop, tablet, or smartphone.

MacsCollection — case study image

This website focuses on video content, drawing on research from Wyzowl that shows video has become the leading medium for online marketing. To boost promotional efforts, the site features various videos as marketing materials. I implemented Lazyload and CDN technologies through AWS to ensure fast loading times.

MacsCollection — case study image

The website, built on JavaScript to showcase high-quality graphic works, incorporates the right amount of animation throughout the page, creating smooth transitions that enhance the overall user experience.

MacsCollection — case study image

The project is built using React.js, which offers features like a component-based structure and high efficiency. By integrating CSS modules, I can create UI components efficiently within a defined scope, reducing concerns about file management.

MacsCollection — case study image

The project is deployed to the cloud using AWS Amplify, leveraging CloudFront’s content delivery network to handle high traffic volumes, while Route 53 manages DNS services for efficient and scalable performance.

MacsCollection — case study image