Video Demo
ビデオデモ
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.comは、JavaScript、HTML、CSSを使ったフロントエンドポートフォリオだよ。レスポンシブでモバイルフレンドリーなゼロから作ったオリジナルデザインになってる。このポートフォリオは2016年から2020年までのプロジェクトを示してる。このプロジェクトは、世界的なパンデミック中に人を励まして、デザインと開発スキルを練習するために作ったんだ。
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.
このウェブサイトは、フレックスボックス、メディアクエリ、レスポンシブ単位を使って、いろんなデバイスでスムーズなユーザー体験を提供してる。これらの技術を使うことで、デザインは異なる画面サイズにうまく適応して、デスクトップ、タブレット、スマートフォンどれでも最適なレイアウトになるよ。
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.
このウェブサイトは動画コンテンツに焦点を当ててて、Wyzowlの研究に基づいて動画がオンラインマーケティングの主要な媒体になったことを示してる。プロモーションを強化するために、サイトにはいろんな動画をマーケティング素材として載せてる。AWSを使ってLazyloadとCDN技術を実装して、読み込み時間を速くしたよ。
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.
このウェブサイトは高品質なグラフィック作品を紹介するためにJavaScriptで作られていて、適度なアニメーションがページ全体に追加されてるんだ。スムーズなトランジションができて、ユーザー体験が良くなってるよ。
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.
このプロジェクトはReact.jsを使っていて、コンポーネントベースの構造とか高効率っていう特徴がある。CSSモジュールを組み合わせることで、ファイル管理をあまり気にせずに、効率よくUIコンポーネントを作れるよ。
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.
このプロジェクトはAWS Amplifyを使ってクラウドにデプロイされていて、CloudFrontのコンテンツ配信ネットワークが大量のトラフィックに対応できる可能性があるんだ。DNSサービスはRoute 53が担当している。
Before starting the project in VSCode, a blueprint was created in Figma with high-fidelity wireframes for individual pages, managing the color scheme, font style, basic layout, and reusable components.
VSCodeでプロジェクトを始める前に、Figmaで各ページの高精細なワイヤーフレームを作った。この設計図で、カラースキーム、フォントスタイル、基本レイアウト、再利用できるコンポーネントを管理している。
