所有项目

创造、测试、改进

GM Microcementos Website

GM Microcementos Website

为GM Microcementos(一家专业从事微水泥应用的公司)完整开发企业网络平台。专业网站15个优化页面,专注于性能、SEO和卓越的用户体验。包括预算计算器、可过滤的项目画廊、高级表单和极简设计系统。模块化架构,具有100多个可重用组件和Core Web Vitals优化。

Academia CEJ Website

Academia CEJ Website

为Academia CEJ开发的网络平台,专门从事马拉加司法竞争考试。具有博客、虚拟校园、知识测试系统、注册系统和课程管理的完全响应式网站。使用Next.js 14、React 18、Tailwind CSS、Framer Motion和Docker开发。

DIMAP 企业网站

DIMAP 企业网站

开发 Dimap 的企业网站,这是一款基于 Next.js 15、React 19、Redux Toolkit 和 TailwindCSS 的现代应用,旨在提供卓越性能与流畅体验。项目包括服务页面、博客、企业板块以及带有潜在客户跟踪的表单,并采用模块化架构和 SSG、Lazy Loading、ClientLoader 的高度优化加载方式构建。

Agrooe Cashback

Agrooe Cashback

在这个项目中,我与一个团队合作从头开始构建一个专注于销售优质产品和支持本地商业的平台。.

DevCrate

DevCrate

DevCrate 是一个用于发现开发资源的平台(工具、库、资产、文档和挑战)。你是否也遇到过这种情况:为了项目找一个资源,或者只是寻找灵感,结果在无数页面之间不停切换?这就是我创建这个平台的原因:把这些年来发现的资源整理起来,不再丢失,并且不依赖分散的书签也能快速找到。它包含高级搜索、按标签筛选,以及用于管理全部内容的管理后台。它还支持社区建议,方便持续收集有用工具。该平台基于 Next.js、React、TypeScript 和 MongoDB 构建,具备安全认证,并采用基于 shadcn/ui 的现代化界面。

AirPods Pro 2 网站克隆

AirPods Pro 2 网站克隆

本项目复刻了 Apple 官方 AirPods Pro 2 页面中的 hero 动画,重点在于掌握 GSAP 与 ScrollTrigger 的高级动画技巧。我实现了一个由 65 张图片组成、通过 Canvas 渲染并与滚动同步的序列动画,并添加了平滑过渡、动态导航与受 Apple 原始体验启发的视觉效果。项目旨在提升高性能网页动画能力。

基于 Angular 的对象检测 PWA

基于 Angular 的对象检测 PWA

tensorflow
ionicons-v5_logos

使用 Angular 19 和 TensorFlow.js 开发实时对象检测 PWA。包括 PWA 配置、TensorFlow.js 集成、实时图像捕获与处理、通过 Web Workers 和 Lazy Loading 优化、使用 IndexedDB 的离线存储,以及在移动设备上的部署。

GTA VI着陆页克隆

GTA VI着陆页克隆

Grand Theft Auto VI着陆页克隆,专为教育目的和网络开发技能展示而创建。现代化网站,具有为所有桌面分辨率(1024px - 4K)优化的响应式设计。包含使用GSAP的高级动画下拉菜单、带图像的动态角色和位置展示系统、带预览的互动预告片部分以及带动画卡片的下载部分。非营利教育项目,使用Astro、Tailwind CSS和JavaScript开发。

3D桌面配置器

3D桌面配置器

用于学习Three.js和TresJS处理3D模型的实践项目。交互式Web应用程序,允许使用不同的饰面和颜色选项定制站立式办公桌。包括带有轨道控制的3D视图、笔记本电脑、耳机和装饰植物的3D模型。定制桌面饰面并选择配件颜色,实时预览。使用Vue 3、TresJS(Three.js与Vue的集成)、TypeScript、Vite和UnoCSS开发。

Strapi Games Store

Strapi Games Store

这是一个以练习 Strapi 作为 CMS 和后端为目标的小型项目。项目使用 React/Next.js、TypeScript 和 Tailwind CSS 开发。虽然演示站使用的是 mock 数据,但代码中已实现用于获取和管理内容的真实 Strapi 集成。

实时聊天

实时聊天

一个面向生产的实时聊天项目,采用分层后端架构。使用 Node.js + Express 与 Socket.IO 实现双向通信,提供两种存储模式:内存(mock)和可选的 Supabase 持久化。前端(Vite)可运行在 demo 或 live 模式,整体按 configuration、HTTP、realtime、domain、storage 分层,便于维护、测试与扩展。

超级马里奥兄弟85'

超级马里奥兄弟85'

PhaserIcon

基于 decapapi 的工作,使用 Phaser 3.55.2 构建的经典《超级马里奥兄弟》的 HTML5 实现,用于教育目的。该项目通过动画、块、结构、实体、玩家控件和 HUD 的模块化架构,以及使用 html2canvas 进行屏幕截图等附加功能,重新创建了 2D 平台游戏体验。它支持使用 Vite 进行 Web 部署和本地开发,使 MIT 许可下的测试和开源贡献变得简单。

Paint Windows 95'

Paint Windows 95'

Paint Win 95' 以 Windows 95 风格的复古界面和现代 Web 行为重现了经典 Microsoft Paint 体验。它包含绘图与选区工具、主色/辅色调色板、撤销/重做历史、工作缩放级别、本地图片打开、PNG 导出,并支持通过 Pointer Events 进行鼠标、键盘以及触控/手写笔输入。

Bookshop View Transitions Demo

Bookshop View Transitions Demo

Bookshop View Transitions 是一个基于 React + Vite 的演示项目,专注于使用 View Transitions API 实现页面间的流畅过渡,并包含元素之间(标题、封面和导航)的共享动画,以实现视觉上连续的导航体验。

Clon de Tiktok

Clon de Tiktok

使用 React、TypeScript 和 Vite 构建的 TikTok 克隆,采用 mobile-first 设计。包含自动播放的竖向信息流、Following/For You 导航、交互操作(点赞、评论、收藏、分享)、Friends/Inbox/Profile 页面,以及可发布到信息流的上传功能。项目采用服务化架构(默认使用带 localStorage 持久化的 mock),并已预留 Supabase 以便连接真实后端。

Atari Breakout Game

Atari Breakout Game

这是一个受经典 Breakout 启发的开源项目,使用 Astro 构建,并通过 Canvas + TypeScript 实现游戏逻辑。包含画布内难度选择、可调且逐步提升的球速、具备不同耐久与受损状态的砖块、键盘控制,以及 Game Over 后的重开流程。

更多了解我

你好!我是Fran 软件开发者 | 前端和全栈

我在各种网络技术方面有工作经验。然而,我的专长和主要关注点是前端开发。

从很小的时候起,我就一直在探索和实验计算机和移动设备,研究它们在软件硬件层面的运作方式。多年来,我通过"折腾"和自己解决问题学到了很多东西,这段经历增强了我的好奇心技术能力