该网站定位为个人摄影师的品牌展示窗口,核心业务是展示摄影作品、传递摄影美学。网站标题“Fragments of Time”(时光碎片)暗示其摄影风格可能侧重于捕捉生活中的瞬间片段,具有艺术性和叙事性。
功能介绍
基于网站结构和命名,可推断其包含以下功能板块:
板块 功能说明
首页 品牌形象展示入口,呈现“Fragments of Time”的核心视觉风格
关于 摄影师个人介绍、摄影理念与背景故事
作品集 摄影作品分类展示,是网站的核心内容区域
服务 提供的摄影服务类型介绍(如人像、风光、商业摄影等)
联系 客户或访客与摄影师取得联系的方式
该项目采用单页应用(SPA)架构,所有页面(首页、关于、作品集、服务、联系)共用同一个 HTML 入口,路由切换由前端控制,无需刷新页面,显著提升浏览体验。设计思路上,以“极简、沉浸、叙事”为核心——深色/纯色背景配合大面积摄影作品留白,引导用户聚焦视觉内容;封面采用全屏背景图加半透明遮罩,营造进入“时光碎片”的仪式感。技术栈:
前端框架:Vue 3(Composition API),利用其响应式系统和组件化开发提高代码复用性。
构建工具:Vite,利用其原生 ES Module 快速启动和 HMR 热更新,开发效率高;生产打包时自动代码拆分与资源哈希。
路由管理:Vue Router(history 模式),管理 5 个路由视图(/、/about、/portfolio、/services、/contact)。
样式方案:原生 CSS,全局重置 + 组件作用域样式(scoped 属性),避免样式污染;使用 CSS 变量统一主题色。
性能优化:通过 modulepreload 预加载关键 JS;图片采用 WebP 格式(兼容降级),并利用 loading="lazy" 实现懒加载。
模块划分:
视图层:每个页面独立为一个 .vue 组件,存放于 src/views/。
路由层:router/index.js 集中配置路径与组件的映射。
公共组件:如页头导航、页脚、按钮等,复用提高维护性。
静态资源:图片、图标统一放 src/assets/,构建时自动哈希