Space background

Web Engineer Portfolio

SANGA
PORTFOLIO

SCROLL

・ MESSAGE ・

技術と対話で、使いやすいWebを形にする。

対人業務を通じて培ったヒアリング力や調整力を活かし、ユーザー視点に立ったUI/UX設計と、モダンな技術を用いた開発を目指しています。

現在はNext.jsやReactなどのフロントエンド技術を中心に、バックエンドとの連携も含めた幅広いスキルを身につけるため学習に取り組んでいます。

・ SKILLS ・

学習中の技術スタック

01 / Front-end

React / Next.js

コンポーネント指向に基づいたUI構築。Tailwind CSSを用いたレスポンシブデザインの実装を学習しています。

02 / Back-end & API

API Routes

Next.jsのAPI Routesを活用したサーバーサイド処理や、非同期通信によるデータ連携の基礎を学んでいます。

03 / Others

デザイン・AI活用

画像編集やライティングのスキルに加え、最新の生成AIツールを活用した業務効率化の手法を取り入れています。

・ WORKS ・

制作物一覧

古民家カフェ

Next.jsTypeScriptAPI RoutesNodemailer

Next.jsのAPI RoutesとNodemailerを組み合わせ、サーバーサイドでの自動メール返信機能を備えたWeb予約システムの実装例です。フォーム入力値のバリデーションや非同期通信時のエラーハンドリングを徹底し、安全でユーザーにストレスを与えない動線を構築しました。

美容サロン

ReactTailwind CSSレスポンシブデザインUI/UX

モバイルファーストを意識したレスポンシブWebサイトです。Tailwind CSSのユーティリティクラスをフル活用し、スマートフォンやタブレットなど、あらゆるデバイスで一貫した操作性を保つUIを実現。コンポーネントを適切に細分化し、再利用性と保守性の高いコード設計を意識しました。

AIパーソナルジム

Next.js画像最適化Web Vitals高速表示

表示速度とコンバージョン率の向上を両立させたシングルページアプリケーションです。Next.jsのImageコンポーネントによる自動WebP変換やLazy Loading(遅延読み込み)を駆使し、画像の軽量化を徹底。Core Web Vitalsのスコア向上を意識した高速なレンダリングを追求しました。

宇宙カフェ

CSS AnimationIntersection Observerフロントエンド

JavaScriptのIntersection Observer API(交差監視)とCSSアニメーションを組み合わせ、スクロールに応じた動的な視覚効果を実装したコンセプトサイトです。ブラウザのレンダリング負荷(リフロー・リペイント)を最小限に抑え、滑らかで没入感のあるUXをフロントエンド側からアプローチしました。

・ ABOUT ・

私について

Profile

Web Engineer

三箇

はじめまして。Webエンジニアを目指して学習中の三箇です。

現在の仕事では、会員様との面談やデートのセッティング、撮影ディレクションなど、人と関わる調整業務を幅広く担当しています。 また、営業やライティング、画像編集の経験も重ねてきました。

これらを通じて培ったコミュニケーション力や課題解決への柔軟なアプローチを基盤に、技術面でもチームに貢献できるエンジニアになれるよう日々学習を続けています。

CONTACT

ご覧いただきありがとうございます。ポートフォリオに関するお問い合わせ等はこちらからお願いいたします。

お問い合わせはこちら