MHQQysh.github.io/computerproject1.html at master · MHQQysh/MHQQysh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端项目一：iGEM 生物基因工程 Wiki | 袁诗鸿</title>
  <meta name="description" content="袁诗鸿的 iGEM 生物基因工程 Wiki 前端项目记录。">
  <link rel="icon" href="static/picture/avator.jpg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body
  data-page="projects"
  data-title-zh="前端项目一：iGEM 生物基因工程 Wiki | 袁诗鸿"
  data-title-en="iGEM Bioengineering Wiki | Shihong Yuan"
  data-description-zh="袁诗鸿的 iGEM 生物基因工程 Wiki 前端项目记录。"
  data-description-en="Frontend case study for the iGEM bioengineering wiki project by Shihong Yuan."
>
  <header class="site-header">
    <nav class="nav-shell container">
      <a class="brand" href="index.html" aria-label="Shihong Yuan home">
        <span class="brand-mark"><img src="static/picture/avator.jpg" alt="Shihong Yuan avatar"></span>
        <span class="brand-copy">
          <span class="brand-title" data-i18n-en="Shihong Yuan">袁诗鸿</span>
          <span class="brand-subtitle" data-i18n-en="Portfolio archive">作品集档案</span>
        </span>
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-menu" data-nav-toggle>
        <span></span><span></span><span></span>
      </button>
      <div class="nav-menu" id="nav-menu" data-nav-menu>
        <div class="nav-links">
          <a class="nav-link" href="index.html" data-page-link="home" data-i18n-en="Home">首页</a>
          <a class="nav-link" href="index.html#testi" data-i18n-en="Research">科研</a>
          <a class="nav-link" href="index.html#serv" data-page-link="projects" data-i18n-en="Projects">项目</a>
          <a class="nav-link" href="index.html#blogs" data-i18n-en="Life">生活</a>
          <a class="nav-link" href="index.html#education" data-i18n-en="Education">教育经历</a>

        </div>
        <div class="lang-toggle" aria-label="Language switcher">
          <button class="lang-toggle-btn" type="button" data-lang-option="zh">中文</button>
          <span>/</span>
          <button class="lang-toggle-btn" type="button" data-lang-option="en">EN</button>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <section class="page-hero">
      <div class="project-dense-container page-heading">
        <p class="eyebrow" data-i18n-en="Computer Project / Front End">计算机项目 / 前端</p>
        <h1 class="page-title" data-i18n-en="iGEM Bioengineering Wiki">前端项目一：iGEM 生物基因工程 Wiki</h1>
        <p class="page-summary" data-i18n-en="A frontend-heavy team project focused on inner-page production, HTML/CSS/JS implementation, and translating visual references into stable working pages.">
          一个以前端实现为主的团队项目，重点在内页制作、HTML/CSS/JS 落地，以及把参考效果真正翻译成稳定可用的页面。
        </p>
      </div>
    </section>

    <section class="page-shell">
      <div class="project-dense-container story-layout">
        <div class="story-text-column">
          <article class="story-card">
            <p class="mini-label" data-i18n-en="Overview">概述</p>
            <h2 data-i18n-en="The project where frontend structure started to make sense">真正开始理解前端结构的一次项目</h2>
            <p data-i18n-en="This project was the first time I took a visually ambitious website and broke it down into pieces I could actually execute. It taught me how to reconstruct pages, adapt references, and understand that good frontend work is more about structure than decoration.">
              这是我第一次把一个“看起来很厉害的网站”拆成自己能够一步步执行的结构。它让我开始真正理解页面复现、参考迁移和前端结构，而不只是停留在表面效果。
            </p>
            <p data-i18n-en="I was responsible for producing every page except the homepage, and later helped fix several homepage-level technical issues as well. The work relied heavily on HTML, CSS, and JavaScript, but the harder part was learning how to organize them into something maintainable.">
              我负责了除首页之外的大部分页面制作，后期也参与处理了首页层面的技术问题。虽然表面上依赖的是 HTML、CSS 和 JavaScript，但真正困难的部分其实是怎么把它们组织成能持续修改和维护的页面结构。
            </p>
          </article>

          <article class="story-card">
            <p class="mini-label" data-i18n-en="What I learned">我学到了什么</p>
            <h2 data-i18n-en="From copying effects to understanding page logic">从“照着做效果”到“理解页面逻辑”</h2>
            <p data-i18n-en="At the beginning I was still treating websites as black boxes. I could dig through templates and sometimes reproduce a card or a section, but I often could not really modify them. What changed this project for me was slowly understanding where structure lives, where CSS should be changed, and how interaction logic actually attaches to layout.">
              一开始我还是把网站当成一种黑箱。虽然能在模板里挖出某个卡片或局部效果，但经常做到了“复现”，却完全做不到“改好”。这个项目真正改变我的，是我开始理解结构在哪里、CSS 应该去哪里改、交互逻辑又是怎么依附在布局上的。
            </p>
            <p data-i18n-en="By the time I worked through the navigation and homepage interaction problems, static pages stopped feeling magical and started feeling legible. That change in confidence mattered more than any single visual flourish.">
              等我把导航和首页一些关键交互问题做通之后，静态页面终于不再像魔法一样难懂，而变成了一套可以阅读、可以定位、可以调整的系统。这种理解带来的信心，比任何单个视觉效果都更重要。
            </p>
          </article>

          <article class="story-card">
            <p class="mini-label" data-i18n-en="Reflection">项目反思</p>
            <h2 data-i18n-en="Learning fast under real project pressure">在真实项目压力下快速学习</h2>
            <p data-i18n-en="The project forced me to learn in public: there were deadlines, teammates, and visible outcomes. I had to move from scattered tutorials to actual decision-making. Looking back, the most valuable part was not the final appearance of the site, but the fact that I stopped treating implementation as guessing and started treating it as a solvable engineering problem.">
              这个项目逼着我在真实的节奏里学习：有截止时间、有队友、有肉眼可见的结果。我必须从零散教程里跳出来，进入真正的决策过程。回头看，最有价值的并不是网站最后长什么样，而是我不再把实现当成“猜”，而是开始把它当成一个可以被拆开和解决的工程问题。
            </p>
            <div class="meta-links">
              <a class="text-link" href="https://2024.igem.wiki/izju-china" target="_blank" rel="noreferrer" data-i18n-en="Visit project">打开项目</a>
            </div>
          </article>
        </div>

        <div class="story-media-column">
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Demo Video 1">演示视频 1</p>
            <video src="static/projects/igem-wiki-videos/igem-video-1.mp4" controls preload="metadata" playsinline></video>
            <p class="story-media-caption" data-i18n-en="Project recording added from the project1 folder and placed first in the media column.">从 `project1` 文件夹整理进来的项目录屏，放在右侧媒体区的第一个位置。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Main Screen">主界面</p>
            <img src="static/picture/frontend1.jpg" alt="iGEM frontend screenshot 1">
            <p class="story-media-caption" data-i18n-en="A representative screen from the project, useful for understanding the visual language of the site.">最能代表这个项目视觉语言的一张主界面截图。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Inner Pages">内页结构</p>
            <img src="static/picture/frontend2.png" alt="iGEM frontend screenshot 2">
            <p class="story-media-caption" data-i18n-en="One of the inner pages that reflects the actual structure and component work I handled.">展示我主要负责的内页结构与模块设计的一张截图。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="More Screens">更多页面</p>
            <img src="static/picture/frontend3.png" alt="iGEM frontend screenshot 3">
            <img src="static/picture/frontend4.png" alt="iGEM frontend screenshot 4">
            <img src="static/picture/frontend5.png" alt="iGEM frontend screenshot 5">
            <p class="story-media-caption" data-i18n-en="Additional screens showing how the visual and structural logic carried across the site.">补充展示其他页面，帮助理解整站的统一结构与视觉延续。</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <p class="footer-brand" data-i18n-en="Shihong Yuan">袁诗鸿</p>
        <p class="footer-copy" data-i18n-en="Case-study archive rebuilt from the original portfolio.">从原始作品集重建而来的项目档案页。</p>
      </div>
      <div class="footer-links">
        <a href="index.html" data-i18n-en="Home">首页</a>
        <a href="index.html#testi" data-i18n-en="Research">科研</a>
        <a href="index.html#serv" data-i18n-en="Computer Projects">计算机项目</a>
        <a href="index.html#ports" data-i18n-en="Mechanical Projects">机械项目</a>
        <a href="index.html#blogs" data-i18n-en="Life">生活</a>
      </div>
      <div class="footer-meta">
        <span>Contact: shihong.23@intl.zju.edu.cn</span>
        <span><span data-i18n-en="Year">年份</span>: <span data-year></span></span>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>