-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomputerproject1.html
462 lines (442 loc) · 24.2 KB
/
computerproject1.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="en">
<!--<< Header Area >>-->
<head>
<!--<< Required meta tags >>-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<< Title >>-->
<title>Shihong Yuan's Website</title>
<!--<< Favcion >>-->
<link rel="shortcut icon" href="static/picture/avator.jpg">
<!--<< Bootstrap min.css >>-->
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<!--<< Aos animation css >>-->
<link rel="stylesheet" href="static/css/aos.css">
<!--<< Main.css >>-->
<link rel="stylesheet" href="static/css/main.css">
</head>
<!--<< Body Area >>-->
<body>
<!--<< Preloader >>-->
<div class="preloader__Dixon">
<div class="box text-center">
<span class="fz-30 mati fw-600 text-uppercase">
Shihong Yuan
</span>
</div>
</div>
<!--<< Preloader >>-->
<!--<< banner >>-->
<section class="breadcrumnd-section" id="bn">
<!--<< Header v-1 >>-->
<header class="header-section header-style-inner">
<div class="container">
<div class="header-wrapper align-items-lg-start align-items-center">
<div class="main-logo cmn-shadow round8">
<a href="index.html" class="logo">
<img src="static/picture/avator.jpg" alt="logo">
</a>
</div>
<div class="main-menu-wrapper w-100">
<ul class="main-menu cmn-shadow round8">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="index.html#about">
About me
</a>
</li>
<!-- <li>
<a href="index.html#reprot">
Resume
</a>
</li> -->
<!-- <li>
<a href="index.html#skill">
Stact
</a>
</li> -->
<li>
<a href="index.html#serv">
Computer Projects
</a>
</li>
<li>
<a href="index.html#ports">
Mechanical Projects
</a>
</li>
<li>
<a href="index.html#testi">
Scientific Research
</a>
</li>
<li>
<a href="index.html#blogs">
Blogs
</a>
</li>
<!-- <li>
<a href="index.html#conts">
Contact Us
</a>
</li> -->
</ul>
</div>
<div class="right-bar">
<div class="bars-style cmn-shadow round8 d-lg-none">
<div class="header-bar">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="right-social-com d-xl-flex d-none cmn-social cmn-shadow round8">
<li>
<a href="weixin://contacts/profile/exammle" onclick="showWeixinID()" target="_blank">
<i class="bi bi-wechat" style="left: -10px;"></i>
</a>
<script>
function showWeixinID() {
alert('微信号: 1361331022');
}
</script>
</li>
<li>
<a href="https://github.com/mhqqysh" target="_blank">
<i class="bi bi-github"></i>
</a>
</li>
<li>
<a href="https://mhqqysh.cn" target="_blank">
<i class="bi bi-globe"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!--<< Header v-1 >>-->
<!--<< Bread Content >>-->
<div class="container pt-100 pb-100">
<div class="section-title text-center">
<a href="index.html" class="section-sub" data-aos="fade-down" data-aos-duration="1000">
Back To Home
</a>
<h2 class="stitle fw-500 mt-3 mb-4" data-aos="fade-down" data-aos-duration="1500">
前端项目一：IGEM生物基因工程
</h2>
<p class="pra-clr max-458">
HTML CSS美术网页化 JS动画
</p>
</div>
</div>
</section>
<!--<< banner >>-->
<!--<< project one >>-->
<section class="project-section pb-120">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<div class="protfolio-details-wrap pe-xxl-4">
<h4 class="white mb-30">
Project Details
</h4>
<div class="des-dated-area">
<div class="date-border"></div>
<div class="dates-item">
<span class="date-text">
时间:
</span>
<span class="pra-clr fw-400">
Oct 2th, 2024
</span>
</div>
<div class="date-border"></div>
<div class="dates-item">
<span class="date-text">
主要任务:
</span>
<span class="pra-clr fw-400">
作为小组长负责除了首页外所有页面的设计制作，运用html,css,js.之后帮助另外一个同学改良了首页产生的技术问题。难点主要在css切割页面的逻辑以及js边栏展开跳动效果。
</span>
</div>
<div class="date-border"></div>
<div class="dates-item">
<span class="date-text">
得到技能:
</span>
<p class="pra-clr fw-400">
1总的来说看到任何一个网页都可以很快地复现出来，合并改进。
2找到了很多不错的网页模板素材
</p>
</div>
<div class="date-border"></div>
<div class="dates-item d-grid gap-lg-4 gap-3">
<span class="date-text">
感受:
</span>
<p class="pra-clr fw-400 pra-one">wiki制作历程记录</p>
<p class="pra-clr fw-400 pra-one">三月，在框架下搭建了第一个博客，了解了html，css，js基本的概念，当时有种想法一定要搭建起来很炫酷的效果的网站。</p>
<p class="pra-clr fw-400 pra-one">四月，了解到zje有一个igem这样比赛有专门做wiki的机会，我一想这不是刚刚好吗，正好是一个通过项目快速学习的机会，虽然知道自己什么都不会，可能是因为看了一些很nb的网站效果吧，就是有一种盲目自信就是能完整创造出来，因此便加入了。</p>
<p class="pra-clr fw-400 pra-one">五月，虽然了解到我们校区做wiki开局如开荒，大家都是零蛋，但是开始我想的是大家一起学习同一个内容然后对标一下进度，至少能稍微每日有收获地推进一点，(当然跳回去我感觉阻碍的因素其实是没有一个很好的学习教程，而我当时没有意识到我需要去主动找这样一个东西)这段时间外部没有很强的任务，内部我也没有说有很强的动机去做或者目标去完成，因此基本水着水着这一个半月就过去了</p>
<p class="pra-clr fw-400 pra-one">六月中旬，队伍终于开始干活了，需要每周汇报一定的进度了，可能因为我们队伍太零蛋了，我只调用过模板的实力也直接负责了内页模板和member(就是内页中所有界面)的制作，并且还要跟另外两位队友一起合作，这让我顿感压力，根据我的经验，我直接开始复现往届别的队伍的代码，(记得当时傻傻的，直接下载源码，所以如果为了把其中部分内容比如一个卡片翻转的效果复现出来，当时还不会用检查，每次都是在700行的代码里淘金子，删一点这个删一点那个祈祷他起作用)复现了一周，copy出来一个卡片，又一周copy一页，你说这是复现吧，确实复现出来了，但是能改吗，那是真改不了一点，一改就报错。</p>
<p class="pra-clr fw-400 pra-one">七月，突然被压力了，说我需要好好教队友怎么做网页，其实当时我心态是有点炸裂的，因为我很清楚我啥也不会，而且我当时很明白就是速通需要教到什么程度，但是我很清楚我没有那个实力，碰巧返校宣讲，在火车上我就搜索耕种各样“速通”“项目”字眼的视频，可能是看我时间太紧张了，终于看到一个复现企业官网的视频，大约3h，当时他的教学模式我一看瞬间惊为天人，整体逻辑是做一点响应一点这点很多视频如此，但是他最完美的地方是它是完整的，是真正的从白纸到完全的官网网页的，我在车上看完之后只感觉瞬间通透了很多，其实html css语法超级简单，但是以往讲语法的视频不够直观，菜鸟教程不够整体，看完之后我对一个网站的背后逻辑，看个div应该找css哪里做修改有了直观的认识，这还是我没有一个字一个字敲的情况下，后来分享水到渠成，虽然我不知道我通透是不是因为之前积累了很多，但是我感觉这个视频的价值就在从零开始教，所以我相信对我的队友应该是有比较大的帮助的。</p>
<p class="pra-clr fw-400 pra-one">八月，“如鱼得水"后很快搞通了teampage卡片的逻辑，然后"光明正大"的把当时看到的一个bestwiki的代码全copy，只稍微修改一点点点，（当时其实我们都有点慌，但是也没办法）上句我其实是摸鱼了，因为当时我感觉我实力够做任何静态效果的修改了（实际上后来一到难的发现并不是），当时我骗自己的街廓是美工没有给到东西，我不知道怎么做。（当然我现在跳回去的话，我会觉得应该拿出2-3个例子给美工组，请他们设计类似的，就像我开始的时候肯定没法根据说的东西凭空造出来一个效果，都是借鉴参考物代码或者以往类似代码，大家都不是业内沉潜多年，都需要一定的参考物才知道怎么做，做什么。）</p>
<p class="pra-clr fw-400 pra-one">八月下旬，开学前夕，美工突然发力了，把2个涉及到js效果的动态效果提上日程，包括当时队友中吕学姐做了个很炫酷的效果让我压力有点大，感觉要被拍死了：（。那段时间真是煎熬，我不知道为什么9pt问了无数遍了，重置改调无数遍就是不行。后来没办法了我决定暂时关闭gpt这个脑机接口，开始转自己的脑子了，我逐渐意识到我要解决的问题其实是基本的css定位功能问题，于是用b站重新回炉包括菜鸟教程各种代码，其实也没用多少时间，但是整体效果有了，js文件逻辑成立了。</p>
<p class="pra-clr fw-400 pra-one">其实最难的就是这半个月完成的导航栏效果和hp中的点击跳出框效果，完成这两个的同时其实各种div定位逻辑也就全通了，而且这段时间我彻底拿握了网页直接修改方式，效率相比初始绝对是三倍以上。可以说这个时候我才有种具正感觉静态htmlcss随便做了。
九月二十之后，其实发生了几个我感觉美观性根本性转变的节点，
1吕学姐把导航栏修复了，整体效果美观了不知道多少倍
2为了"降重"我修改了teampage中卡片的效果和图案（其实当时还希望有一个背面字可以下滑的效果调了一下午最后放弃了）
3就是儿位队反杨同学，刘同学，帮助上传了无数又件，立刻把单薄的网站变得有了学木的厚重感。</p>
<p class="pra-clr fw-400 pra-one">有关上传，其实现在这种git平台上传很简单，直接webvscode内修改就可以了。吕学姐把layout网站框架做起来了，上传修改方便了更多。王学长首页效果做的很完整，而且代码命名很好。基本很快我就合并到一起上传到网站上了。</p>
<p class="pra-clr fw-400 pra-one">虽然最后几天遇到了一些小问题，但是说实话整体大框架定了，小问题已经不足为虑了。略有遗憾的是我最后三天改首页代码实在是被VW定义位置搞到心态了，这种定义就一定会面临屏幕长宽比变化时图片出界，找最后想了很久，可能放到一个容器内然后min（1000px，80%）会能做，但是没时间了，就当大家都是电脑看的网站吧
还有一个小遗憾是没有在homepage加上svg随页面下滑整体背景改变的效果，这个js逻辑很好做，但是学会的太晚，美工构思没有计划做这种类型的。
对了，忘夸我们的队长了，贺学长真的太尽职尽责了，而且温柔体贴，换个学长的话可能wiki真没法有任何成果。</p>
<div class="date-border"></div>
<div class="visit-btn mt-xxl-5 mt-4">
<a href="https://2024.igem.wiki/izju-china" class="cmn-shadow round100 py-xxl-3 py-3 px-xxl-5 px-4 white fz-16">
Visit Link
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="project-detial-right mt-lg-0 mt-4">
<div class="thumbs w-100">
<img src="static/picture/frontend1.jpg" alt="img" class="w-100">
</div>
<div class="thumbs w-100">
<img src="static/picture/frontend2.png" alt="img" class="w-100">
</div>
<div class="thumbs w-100">
<img src="static/picture/frontend3.png" alt="img" class="w-100">
</div>
<div class="thumbs w-100">
<img src="static/picture/frontend4.png" alt="img" class="w-100">
</div>
<div class="thumbs w-100">
<img src="static/picture/frontend5.png" alt="img" class="w-100">
</div>
</div>
</div>
</div>
</div>
</section>
<!--<< project one >>-->
<!--<< Single Project >>-->
<section class="single-project pb-100">
<div class="container">
<h3 class="single-head white">
Related Projects
</h3>
<div class="single-project-wrap">
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="protfolio-porject-item d-center">
<img src="static/picture/pro1.png" alt="img">
<div class="project-cont-inner">
<span class="title date-title text-end pt-3 pe-4 d-block">
@2024
</span>
<div class="project-cont-box d-center w-100 h-100 position-relative">
<div class="boxes text-center">
<h4>
<a href="" class="title">
<span class="d-block">
Digital
</span>
Masterpieces
</a>
</h4>
<span class="ui-badge">
UI/Ux Design
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="protfolio-porject-item d-center">
<img src="static/picture/pro2.png" alt="img">
<div class="project-cont-inner">
<span class="title date-title text-end pt-3 pe-4 d-block">
@2024
</span>
<div class="project-cont-box d-center w-100 h-100 position-relative">
<div class="boxes text-center">
<h4>
<a href="" class="title">
<span class="d-block">
Wev
</span>
Development
</a>
</h4>
<span class="ui-badge">
Web Design
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="protfolio-porject-item d-center">
<img src="static/picture/pro3.png" alt="img">
<div class="project-cont-inner">
<span class="title date-title text-end pt-3 pe-4 d-block">
@2024
</span>
<div class="project-cont-box d-center w-100 h-100 position-relative">
<div class="boxes text-center">
<h4>
<a href="" class="title">
<span class="d-block">
Graphic
</span>
Designer
</a>
</h4>
<span class="ui-badge">
UI/Ux Design
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--<< Single Project >>-->
<!--<< Footer >>-->
<!-- <div class="footer-section check-box-style pt-100">
<div class="container p-0">
<div class="talk-text text-center " data-aos="zoom-in" data-aos-duration="1400">
LET’S WITH
TALK
</div>
<a href="#" class="infomail d-center cmborder round100">
</a>
<div class="footer-topping-wrap check-box-style round30">
<div class="row justify-content-between">
<div class="col-xl-4 col-lg-6">
<div class="contact-left">
<p class="pra-clr fz16 pragraph-one">
Great! We're excited to hear from you and
let's start something special togerter. call
us for any inquery.
</p>
<div class="contact-infos">
<a href="#">
Valentin, Street Road 24, New York,
USA - 67452
</a>
<a href="#">
(+02) 574 - 328 - 301
</a>
<a href="#">
</a>
</div>
<div class="footer-social">
<a href="#0" class="fsocial d-inline-flex align-items-center justify-content-center">
Facebook
</a>
<a href="#0" class="fsocial d-inline-flex align-items-center justify-content-center">
Twitter
</a>
<a href="#0" class="fsocial d-inline-flex align-items-center justify-content-center">
Behance
</a>
<a href="#0" class="fsocial d-inline-flex align-items-center justify-content-center">
Dribble
</a>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6">
<form action="#" class="cmn-contact-form row g-4">
<div class="col-lg-6">
<input type="text" placeholder="Name">
</div>
<div class="col-lg-6">
<input type="email" placeholder="Email">
</div>
<div class="col-lg-12">
<input type="text" placeholder="Subject">
</div>
<div class="col-lg-12">
<textarea name="message" rows="5" placeholder="Message"></textarea>
</div>
<div class="col-lg-12">
<div class="btns">
<button type="submit" class="cmn-btn">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
<p class="pra-clr">
© 2024. All rights reserved <a href="index.html" class="pwhite">Disum.</a>
</p>
<a href="#bn" class="scroll-toptext">
Back To Home
</a>
<ul class="terms">
<li>
<a href="#0">
Terms & Condition
</a>
</li>
<li>
<a href="#0">
Privacy Policy
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<< Footer >> -->
<!--<< Jquery Latest >>-->
<script src="static/js/jquery-3.7.0.min.js"></script>
<!--<< Viewport Js >>-->
<script src="static/js/viewport.jquery.js"></script>
<!--<< Bootstrap Js >>-->
<script src="static/js/bootstrap.min.js"></script>
<!--<< Aos animation Js >>-->
<script src="static/js/aos.js"></script>
<!--<< Nice Select Js >>-->
<script src="static/js/jquery.nice-select.min.js"></script>
<!--<< Swiper Slide Js >>-->
<script src="static/js/swiper-bundle.min.js"></script>
<!--<< Swiper Bundle Js >>-->
<script src="static/js/jquery.magnific-popup.min.js"></script>
<!--<< magnific popup Js >>-->
<script src="static/js/odometer.min.js"></script>
<!--<< Odometer js Js >>-->
<script src="static/js/wow.min.js"></script>
<!--<< Wow Animation js >>-->
<script src="static/js/main.js"></script>
<!--<< Main.js >>-->
</body>
</html>