<br></br>
###### `資訊一甲` `計概實習(II)` `期末專題` `第15組`
## THE MAKING OF A STATIC WEBSITE
##### brycecyb.com
<br></br>
<br></br>
<br></br>
###### 陳奕斌 D0809222
###### 凌敬棋 D0743630
###### XXX
---
### Introduction
##### The brycecyb.com is a domain bought from Dynadot during the Christmas sales, now being host on Google Cloud Platform and associate with Firebase.
##### This website is mainly use for promotion for my new series of apps and creations. Also for any other projects from FSU that I might work on.
##### Programming languages we used:
- HTML (Layout)
- CSS (Appearance)
- JavasSript (Behaviours)
- XML (SEO)
---
### Work Flow
```flow
o1=>operation: Build a website
o2=>operation: Buy a domain & Register Whois protection
o3=>operation: Verify domain with the host & Redirect DNS
o4=>operation: Build a bucket & Upload files
o5=>operation: Submit Sitemap to search engines
o6=>operation: Good to Go
o1->o2->o3->o4->o5->6
```
---
### Layout
###### By 凌敬棋
```typescript==
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="buttons.css">
<title>Bryce is awesome</title>
</head>
<body>
<div class="menu-wrap">
<canvas id="canvas"></canvas>
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<input class="breakSceneButton" type="submit" value="" onClick="goToAppStoreBreakScene()">
<input class="photoTinterButton" type="submit" value="" onClick="goToAppStorePhotoTinter()">
<br></br>
<br></br>
<br></br>
<div>
<button class="btn" onclick="window.location.href = 'mailto:brycecyb@gmail.com'">brycecyb@gmail.com</button>
<button class="btn" onclick="window.location.href = ''">More is coming...</button>
</div>
</div>
</div>
</div>
</div>
<header class="showcase">
<div class="container showcase-inner">
<h1>Bryce is awesome</h1>
<p>Be like Bryce</p>
</div>
</header>
</body>
<script src="menu.js"></script>
<script src="particle.js"></script>
</html>
```
---
### UI & UX
###### By Chan Yik Ban
```typescript==
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase {
background: var(--primary-color);
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
background: url(./images/white_manfa_background.png) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.btn:hover {
opacity: 0.6;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.5s ease 0.5s;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div {
text-align: center;
max-width: 900vw;
max-height: 1000vh;
opacity: 50;
transition: opacity 0.5s ease;
}
.menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.5s ease;
}
```
    
---
### Behaviour
###### By 凌敬棋
```typescript=
function goToAppStoreBreakScene() {
window.location = "https://apps.apple.com/us/app/break-scene/id1441434021?ls=1";
}
function goToAppStorePhotoTinter() {
window.location = "https://apps.apple.com/us/app/photo-tinter/id1175311862?ls=1";
}
```
 
---
### Media Queries
###### By Chan Yik Ban
```typescript==
@media only screen and (max-width: 600px) {
.breakSceneButton {
width: 130px;
height: 130px;
margin-left: 20px;
margin-right: 20px;
}
.photoTinterButton {
width: 130px;
height: 130px;
margin-left: 15px;
margin-right: 15px;
}
.emailButton {
font-size: 22px;
}
}
```
 
---
### Sitemap
###### By 凌敬棋
```typescript==
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>http://brycecyb.com/</loc>
<lastmod>2019-12-17T12:22:07+00:00</lastmod>
</url>
</urlset>
```
---
## 開發環境與套件
### Visual Studio Code
### Google Cloud Platform
### Firebase
### Dynadot
---
## 開發小記
#### 2019/12/27
* 構築基本網站雛型
#### 2019/12/28
* 重新修改網站結構，實作相關的css及JavaScript檔案
#### 2019/12/29
* 整合完成各程式人員負責的程式
#### 2019/12/30
* 除錯完成
* 製作Hackmd
#### 2019/12/31
* 細節新增及維護
---
## 遇到的困難與解決方法
#### Chan Yik Ban
* 用頭撞擊鍵盤。
#### 凌敬棋
* 遇到的困難與解決方法:程式碼太難了最後是靠我們的主編和朋友們才寫出來的
#### XXX
* 對不起，突然有急事抽不到身來
---
作者與工作分配
| 成員 | 負責工作 |
| -------- | -------- |
| 陳奕斌 | 設計UI & UX及相關工作 |
| 凌敬棋 | 優化顯示畫面及網站行為 |
| XXX | 對不起，突然有急事抽不到身來 |
---
## 想做但尚未實做的功能
* Time Machine
* Add an SSL Certificate
<!--  -->
---
## Wrap up
#### Chan Yik Ban
###### 今次的專題令我獲益良多，組員們都很棒，十分期待下一次類似的專題。 Hackmd很有趣。
<br></br>
#### 凌敬棋
###### 真的很累很難寫但也學到了蠻多東西的
<br></br>
#### XXX
###### 對不起，突然有急事抽不到身來
---
Thank you!
:sheep:
<style>
.reveal {
font-size: 25px;
}
div {
font-family: Lato, sans-serif;
text-align: left;
color: white;
}
body {
background: url(https://i.imgur.com/yyBBm1J.png) no-repeat center center/cover;
}
div > p {
text-align: center;
}
</style>
{"metaMigratedAt":"2023-06-15T03:01:31.625Z","metaMigratedFrom":"YAML","title":"資訊一甲_計概實習(II)_期末專題_第15組","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"0649f158-94f0-430e-9fb9-8b3546752e5c\",\"add\":8477,\"del\":300}]"}