作って、試して、改善する

マイクロセメントの専門企業GM Microcementosのための企業ウェブプラットフォームの完全開発。パフォーマンス、SEO、優れたユーザーエクスペリエンスに焦点を当てた15ページの最適化されたプロフェッショナルウェブサイト。予算計算機、フィルター可能なプロジェクトギャラリー、高度なフォーム、ミニマルデザインシステムを含みます。100以上の再利用可能なコンポーネントとCore Web Vitals最適化を備えたモジュラーアーキテクチャ。

マラガの法務競争試験を専門とするAcademia CEJのウェブプラットフォーム。ブログ、バーチャルキャンパス、知識テストシステム、登録システム、コース管理を持つ完全レスポンシブウェブサイト。Next.js 14、React 18、Tailwind CSS、Framer Motion、Dockerで開発。

Dimap のコーポレートサイトの開発。Next.js 15、React 19、Redux Toolkit、TailwindCSS を基盤としたモダンなアプリケーションで、最適なパフォーマンスとスムーズなユーザー体験を提供します。サービスページ、ブログ、企業セクション、リード追跡フォームを備え、SSG、Lazy Loading、ClientLoader による高い最適化を特徴とするモジュール式アーキテクチャで構築されています.

このプロジェクトでは、チームと協力して、高品質の製品の販売と地元の商業のサポートに焦点を当てたプラットフォームを一から構築しました。.

DevCrateは、開発リソース（ツール、ライブラリ、アセット、ドキュメント、チャレンジ）を見つけるためのプラットフォームです。プロジェクトに必要なリソースやインスピレーションを探していて、気づけば無数のページをさまよっていたことはありませんか？その課題を解決するために、このプラットフォームを作りました。長年にわたって見つけたリソースを整理して失わず、散らばったブックマークに頼らず素早く見つけられるようにするためです。高度な検索、タグフィルター、そしてすべてのコンテンツを管理するための管理エリアを備えています。さらに、コミュニティからの提案も受け付け、役立つツールを継続的に集められます。Next.js、React、TypeScript、MongoDBで構築しており、安全な認証とshadcn/uiベースのモダンなインターフェースを採用しています。

Apple公式のAirPods Pro 2ヒーローセクションを再現し、GSAPとScrollTriggerによる高度なアニメーション習得に焦点を当てたプロジェクトです。スクロールに同期した65枚のCanvasレンダリング画像シーケンスに加え、滑らかなトランジション、動的ナビゲーション、そしてAppleのオリジナル体験に基づいたビジュアル効果を実装しました。高性能なWebアニメーションを磨き上げるための取り組みです.

Angular 19 と TensorFlow.js を使用してリアルタイムのオブジェクト検出 PWA を開発。PWA の設定、TensorFlow.js の統合、ライブ画像のキャプチャと処理、Web Workers と Lazy Loading による最適化、IndexedDB によるオフラインストレージ、モバイルデバイスへのデプロイを含みます。

Grand Theft Auto VIのランディングページクローン。教育目的とウェブ開発スキルのデモンストレーションのために作成されました。すべてのデスクトップ解像度（1024px - 4K）に最適化されたレスポンシブデザインのモダンなウェブサイト。GSAPを使用した高度なアニメーション付きドロップダウンメニュー、画像付き動的キャラクターおよびロケーションショーケースシステム、プレビュー付きインタラクティブトレーラーセクション、アニメーションカード付きダウンロードセクションが含まれます。非商業的な教育プロジェクトとしてAstro、Tailwind CSS、JavaScriptで開発。

Three.jsとTresJSを3Dモデルで学ぶための練習プロジェクト。スタンディングデスクを異なる仕上げと色のオプションでカスタマイズできるインタラクティブなウェブアプリケーション。軌道コントロール付き3Dビュー、ノートパソコン、ヘッドホン、観葉植物の3Dモデルを含みます。デスクの仕上げをカスタマイズし、アクセサリーの色をリアルタイムプレビューで選択できます。Vue 3、TresJS（Three.jsとVueの統合）、TypeScript、Vite、UnoCSSで開発。

StrapiをCMS兼バックエンドとして練習するための小規模プロジェクトです。React/Next.js、TypeScript、Tailwind CSSで構築しています。デモではモックデータを使用していますが、コードにはコンテンツの取得・管理のための実際のStrapi連携を実装しています。

本番運用を意識したバックエンド構成のリアルタイムチャットプロジェクトです。Node.js + Express と Socket.IO で双方向通信を実装し、保存方式はメモリ（mock）と Supabase による任意の永続化の2モードに対応しています。フロントエンド（Vite）は demo / live モードで動作し、構成はレイヤー化（configuration、HTTP、realtime、domain、storage）されているため、保守性・テスト容易性・拡張性を高めています。

decapapi の作品に基づいて、教育目的のために Phaser 3.55.2 で構築された古典的なスーパー マリオ ブラザーズの HTML5 実装。このプロジェクトは、アニメーション、ブロック、構造、エンティティ、プレーヤー コントロール、HUD のモジュラー アーキテクチャに加え、html2canvas によるスクリーンショット キャプチャなどの追加機能を備えた 2D プラットフォーマー エクスペリエンスを再作成します。 Vite を使用した Web 展開とローカル開発をサポートし、MIT ライセンスに基づくテストとオープンソースへの貢献を簡単にします。

Paint Win 95' は、Windows 95風のレトロなUIとモダンなWeb挙動で、Microsoft Paintのクラシックな体験を再現します。描画・選択ツール、主色/副色パレット、元に戻す/やり直し履歴、作業ズーム、ローカル画像の読み込み、PNG書き出し、そして Pointer Events によるマウス・キーボード・タッチ/スタイラス入力に対応しています。

Bookshop View Transitions は、View Transitions API を使ってページ間の滑らかな遷移を実装することに焦点を当てた React + Vite のデモで、要素（タイトル、表紙、ナビゲーション）間の共有アニメーションを含めることで、視覚的に連続したナビゲーションを実現します。

React、TypeScript、Viteで構築したTikTokクローンで、mobile-firstの方針で設計しています。自動再生の縦型フィード、Following/For Youナビゲーション、インタラクティブな操作（like、コメント、保存、共有）、Friends/Inbox/Profileページ、フィード投稿用のupload機能を含みます。サービス指向アーキテクチャで動作し（既定はlocalStorage永続化付きmock）、実運用バックエンド接続に向けてSupabaseを準備しています。

クラシックな Breakout に着想を得たオープンソースプロジェクトで、Astro と Canvas 上の TypeScript ゲームロジックで実装しています。Canvas 内の難易度選択、調整可能かつ段階的に上がるボール速度、耐久値の異なるレンガとダメージ状態、キーボード操作、Game Over 後のリスタート機能を備えています。