所有项目

创造、测试、改进

诺华网站

诺华网站

为专门从事微水泥应用的 GM Microcementos 公司全面开发企业网络平台。专业网站有 15 个优化页面,注重性能、搜索引擎优化和卓越的用户体验。包括预算计算器、可过滤项目图库、高级表格和简约设计系统。采用模块化架构,包含 100 多个可重复使用的组件,并针对 Core Web Vitals 进行了优化。

CEJ 学院网站

CEJ 学院网站

为马拉加专门从事公务员考试的学院 Academia CEJ 提供网络平台。完全响应式网站,包含博客、虚拟校园、知识测试、报名系统和课程管理。使用 Next.js 14、React 18、Tailwind CSS、Framer Motion 和 Docker 开发。

DIMAP 网站

DIMAP 网站

开发迪马普公司网站,这是一个基于 Next.js 15、React 19、Redux 工具包和 TailwindCSS 的现代应用程序,重点是提供最佳性能和流畅体验。该项目包括服务页面、博客、企业版块和线索跟踪表单,所有内容均基于模块化架构,并使用 SSG、Lazy Loading 和 ClientLoader 对加载进行了高度优化。

DevCrate

DevCrate

DevCrate 是一个用于发现开发资源(工具、库、资产、文档和挑战)的平台。 你是否有过这样的经历:你的项目需要资源,或者只是需要一些灵感,结果却浏览了无数网页?这就是我创建这个平台的原因:整理我多年来发现的资源,使其不会丢失,并能快速找到它们,而不必依赖零散的书签。它包括高级搜索、标签过滤器和管理所有内容的管理区。它还允许社区提出建议,以不断收集有用的工具。它采用 Next.js、React、TypeScript 和 MongoDB 构建,具有安全认证和基于 shadcn/ui 的现代界面。

Cmd+kit

Cmd+kit

Cmd+kit 是一个用于网络产品的可重复使用的命令调色板系统,旨在通过一致且易于访问的界面提供快速搜索、键盘导航和操作执行功能。它可以通过 React、Vue、Preact 和 Astro 的官方适配器轻松集成到不同的堆栈中,同时保持相同的行为和可视化定制基础。它包括完整的文档和一个交互式游戏场,用于配置主题、命令结构和导出即用代码。可根据每个项目的流程,使用 npm、ppm、yarn 或 bun 进行安装。

合同工具包 - API 合同生成器

合同工具包 - API 合同生成器

Zod SVG Icon

通过 npm 发布的 CLI 工具包 + 库,可在单一类型的 JSON 文件中定义 API 合约,并自动生成共享的 TypeScript 类型、Angular 客户端、Zod 运行时验证以及 NestJS 控制器。消除前端和后端之间的不同步,避免重复代码,并通过合约快照检测破坏性变更。包括用于测试的模拟生成和基于多个可重用包的模块化架构。

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 的离线存储,以及在移动设备上的部署。

3D桌面配置器

3D桌面配置器

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

GTA VI着陆页克隆

GTA VI着陆页克隆

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

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 后的重开流程。

Agrooe 现金返还

Agrooe 现金返还

在这个项目中,我与一个团队合作,从零开始开发一个致力于销售优质产品和本地商务的平台。我们从零开始,从概念到实践,创建了后端和前端。除了不同的技术外,我们还整合了各种功能,如控制用户账户和登录的 jwt、控制所有数据的仪表盘......功能方面,例如可以使用不同的社交网络登录、以用户身份创建账户购买产品或以公司身份创建账户添加产品、在最近的地图上找到相关产品等等。出于保密原因,代码未显示。

进一步了解我

你好!我是Fran 全栈 | 软件开发工程师

我拥有使用多种网络技术的经验。尽管如此,我的专长和主要工作方向仍是前端开发。

从很小的时候起,我就一直在探索和尝试使用计算机及移动设备,深入研究它们在软件硬件层面的运作原理。这些年来,我通过亲手摆弄设备并独立解决问题学到了很多,这些经历不仅激发了我的好奇心,也提升了我的技术能力