返回作品列表
CASE 05Web 应用内容社区前端

影评社官方网页

我给影评社做的官方网页,用来发布活动、收集影评、展示精选内容,并在活动后继续归档。

影评社官方网页案例主视觉

4 tracks

覆盖《震耳欲聋》《雷锋》《小小的我》和 AI Learning 内容入口

70+ records

将活动投稿、影评和长文整理成可检索内容库

Live site

线上地址:www.sunmaosun.com

GitHub

仓库:litangdingzhen114/film-club

Content System

把社团活动做成可持续更新的内容运营入口

这个项目不是只做一个静态介绍页,而是把观影活动、影评征集、精选展示、全文归档和专题扩展串成一套可复用结构。 每次活动产生的文字都能进入同一套内容系统,被检索、被阅读,也能继续服务下一次社团宣传。

影评社官网从观影活动到归档检索的内容结构展示

活动传播入口

用 3D 胶卷首页承接主题选择,让观影活动、专题栏目和社团品牌形成统一入口。

投稿归档检索

把散落的影评文档整理成结构化数据,提供精选、列表、搜索和详情阅读路径。

长期内容维护

同一套页面结构可以继续承接新片单、新活动和 AI 学习文章,减少后续更新成本。

Tool Stack

这版原型用了什么

前端负责把体验做出来,后端负责接接口和数据。技术不单独炫技,只服务于这个原型能不能跑起来。

Next.jsReactTypeScriptTailwind CSSFramer MotionThree.js

项目背景

担任影评社社长期间,我负责开发并维护影评社官方网页。这个网站不只是介绍社团,而是配合观影活动一起使用:活动前发布主题,活动中收集影评,活动后展示优秀作品,并把内容整理成可以继续查阅的归档。

线上地址为 www.sunmaosun.com,代码托管在 GitHub

信息架构

  • 首页:使用 3D 胶卷交互展示不同主题入口,强化影评社的电影感和视觉识别。
  • 主题页:围绕《震耳欲聋》《雷锋》《小小的我》等活动主题建立独立入口。
  • 关于页:补充影片背景、主题解读、角色信息和社会价值,让读者先进入语境。
  • 精选页:展示活动中质量较高的影评内容,作为社团成果展示。
  • 影评库:将投稿内容整理为可检索归档,支持按标题、摘要和作者查找。
  • 详情页:为每篇投稿生成正式阅读页面,保留作者、班级、标签和正文。

我负责的内容

  • 独立搭建 Next.js 项目,完成首页、主题页、归档页、详情页和移动端适配。
  • 将线下观影活动和影评征集产生的内容整理为结构化数据,便于持续更新。
  • 设计深色电影感视觉风格,使用胶卷、暗场、卡片和动效强化社团品牌记忆点。
  • 组织线下观影活动,举办影评征集活动,协调宣传、报名、作品收集、内容筛选和网页更新。
  • 在影评栏目之外扩展 AI Learning 入口,验证同一套内容结构对新专题的复用能力。

产品复盘

这个项目最有价值的地方,是它让一次观影活动不只停在当天。投稿不会只躺在文件夹里,而是会进入精选、归档、搜索和详情页,后面宣传社团或回看活动时还能继续用。

它也让我更早意识到:页面结构、内容维护和线下活动流程要一起想。网页不是活动结束后的装饰品,而是从宣传、报名、投稿到回看的一个长期入口。

上一个

LEMANISM 时尚电商小程序

下一个

个人作品集站