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

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

マラガの公務員試験専門アカデミー、アカデミアCEJのウェブ・プラットフォーム。ブログ、バーチャルキャンパス、知識テスト、登録システム、コース管理を備えた完全レスポンシブのウェブサイト。Next.js 14、React 18、Tailwind CSS、Framer Motion、Dockerで開発。

Next.js15、React19、Redux Toolkit、TailwindCSSをベースとしたモダンなアプリケーションで、最適なパフォーマンスとスムーズなエクスペリエンスを提供することに重点を置いたDimapのコーポレートサイトの開発。プロジェクトには、サービスページ、ブログ、コーポレートセクション、リードトラッキングフォームが含まれ、すべてモジュールアーキテクチャで構築され、SSG、レイジーローディング、ClientLoaderを使用してローディングが高度に最適化されています。

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

Cmd+kitは、ウェブプロダクトのための再利用可能なコマンドパレットシステムで、一貫性のあるアクセス可能なインターフェイスから、高速な検索、キーボードナビゲーション、アクション実行を提供するように設計されています。React、Vue、Preact、Astro用の公式アダプタを使用して、異なるスタックに簡単に統合できるように設計されています。完全なドキュメントと、テーマの設定、コマンド構造、すぐに使えるコードのエクスポートのためのインタラクティブなプレイグラウンドが含まれています。各プロジェクトのフローに応じて、npm、pnpm、yarn、bunでインストールできます。

単一の型付きJSONファイルでAPIコントラクトを定義し、共有TypeScript型、Angularクライアント、Zodによる実行時検証、NestJS用コントローラを自動的に生成できる、npmで公開されているCLIツールキット＋ライブラリ。フロントエンドとバックエンドの間の同期ずれをなくし、コードの重複を回避し、コントラクトのスナップショットによって変更を検出する。テスト用のモック生成と、複数の再利用可能なパッケージに基づくモジュール式アーキテクチャを備えています。

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

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

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

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

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 後のリスタート機能を備えています。

このプロジェクトで私はチームと一緒に、質の高い商品の販売とローカル・コマースに特化したプラットフォームをゼロから開発しました。私たちは、バックエンドとフロントエンドの両方を作成するために、コンセプトから実践までゼロから取り組みました。様々なテクノロジーとは別に、ユーザーアカウントやログインをコントロールするためのjwt、全てのデータをコントロールするためのダッシュボードなどの統合を取り入れました。様々なソーシャル・ネットワークでログインできたり、商品を購入するユーザーや商品を追加する企業としてアカウントを作成できたり、商品の最寄りの場所を地図で表示できたりと、様々な機能があります。機密保持のため、コードは表示されません。