Merge pull request #4 from NY0510/develop

Develop
roian6 · Dec 21, 2023 · 0f1c883 · 0f1c883
2 parents 045bb8b + 4e5179a
commit 0f1c883
Show file tree

Hide file tree

Showing 7 changed files with 256 additions and 23 deletions.
diff --git a/team1/member1/index.html b/team1/member1/index.html
@@ -3,7 +3,17 @@
 <head>
   <title>팀원1 소개</title>
 </head>
-<body>
+<body style="background-color:lightskyblue;">
+  <img src="./캡처.PNG" alt="" width="150px" height="150px">
+  <h1>김범근</h1>
+  <h2>10402</h2>
+  <p>선린인터넷고 김범근</p>
+  <ul>
+    <li>Game Development</li>
+    <li>Algorithm</li>
+    <li>Modeling</li>
+  </ul>
+
   <!--
     들어가야 하는 것
     - 프로필 사진

diff --git a/team1/member1/캡처.PNG b/team1/member1/캡처.PNG
diff --git a/team1/member2/index.html b/team1/member2/index.html
@@ -23,5 +23,16 @@
     선택사항
     - CSS를 이용하여 자유롭게 꾸미기
   -->
+  <img src="https://t1.daumcdn.net/cfile/tistory/99C870465C38A3211D" width="150px" height="150px">
+  <br>
+  <h1>김성태</h1>
+  <h2>10403</h2>
+  <br>
+  <p>선린인터넷고 1학년 4반 김성태입니다</p>
+  <br>
+  <ul>
+    <li>게임</li>
+    <li>낮잠</li>
+  </ul>
 </body>
 </html>
diff --git a/team1/member3/index.html b/team1/member3/index.html
@@ -1,27 +1,47 @@
 <!DOCTYPE html>
-<html>
+<html lang="ko">
+
 <head>
-  <title>팀원3 소개</title>
-</head>
-<body>
-  <!--
-    들어가야 하는 것
-    - 프로필 사진
-    - 이름
-    - 학번
-    - 한줄 소개
-    - 최근 관심사 3가지
+  <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>팀원 3 소개</title>
 
-    조건
-    - 배경 색상을 변경할 것
-    - 이미지는 150x150px
-    - 이름은 h1 태그
-    - 학번은 h2 태그
-    - 한줄 소개는 p 태그
-    - 최근 관심사는 ul 태그
+  <link rel="stylesheet" href="./src/style.css" />
+  <link rel="shortcut icon" href="./src/favicon.ico" />
 
-    선택사항
-    - CSS를 이용하여 자유롭게 꾸미기
-  -->
+  <script src="https://kit.fontawesome.com/2cc80d7123.js" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/@popperjs/core@2"></script>
+  <script src="https://unpkg.com/tippy.js@6"></script>
+</head>
+
+<body>
+  <div id="app" class="noselete">
+    <section id="main">
+      <span id="title" class="typewrite" data-period="2800" data-type='[ "김가온", "10401", "1조 팀원 3 " ]'></span>
+      <span id="subtitle">태어난지 <span id="afterBirth">0</span>초</span>
+      <span id="description">리눅스 삽질하는거 좋아합니다</span>
+      <div id="links">
+        <li data-tooltip="github.com/NY0510"><a href="https://github.com/NY0510" target="_blank"><i
+              class="fa-brands fa-github"></i></a></li>
+        <li data-tooltip="ny64"><a href="https://discord.com/users/690148325604720660" target="_blank"><i
+              class="fa-brands fa-discord"></i></a></li>
+        <li data-tooltip="toss.me/nyny64"><a href="https://toss.me/nyny64" target="_blank"><i
+              class="fa-solid fa-coffee"></i></a>
+        <li data-tooltip="blog.ny64.kr"><a href="https://blog.ny64.kr" target="_blank"><i
+              class="fa-solid fa-code"></i></a></li>
+        </li>
+        <li data-tooltip="[email protected]"><a href="mailto:[email protected]" target="_blank"><i class="fa-brands fa-at"></i></a>
+        </li>
+        </li>
+      </div>
+    </section>
+    <section id="footer">
+      <span class="cafe24">btw i use ubuntu</span>
+      <span id="copyright">© 2023 NY64, All rights reserved.</span>
+    </section>
+  </div>
 </body>
-</html>
+<script src="./src/script.js"></script>
+
+</html>
diff --git a/team1/member3/src/favicon.ico b/team1/member3/src/favicon.ico
diff --git a/team1/member3/src/script.js b/team1/member3/src/script.js
@@ -0,0 +1,70 @@
+debugger;
+const birthDate = new Date("2007-02-06T00:00:00");
+const afterBirth = document.querySelector("#afterBirth");
+let diffSec;
+
+class TxtType {
+	constructor(element, toRotate, period) {
+		this.element = element;
+		this.toRotate = JSON.parse(toRotate);
+		this.period = parseInt(period, 10) || 2000;
+		this.txt = "";
+		this.isDeleting = false;
+		this.loopNum = 0;
+		this.tick();
+	}
+
+	tick() {
+		const i = this.loopNum % this.toRotate.length;
+		const fullTxt = this.toRotate[i];
+
+		if (this.isDeleting) {
+			this.txt = fullTxt.substring(0, this.txt.length - 1);
+		} else {
+			this.txt = fullTxt.substring(0, this.txt.length + 1);
+		}
+
+		this.element.innerHTML = `<span class="wrap">${this.txt}</span>`;
+
+		let delta = 200 - Math.random() * 100;
+		if (this.isDeleting) {
+			delta /= 2;
+		}
+
+		if (!this.isDeleting && this.txt === fullTxt) {
+			delta = this.period;
+			this.isDeleting = true;
+		} else if (this.isDeleting && this.txt === "") {
+			this.isDeleting = false;
+			this.loopNum++;
+			delta = 500;
+		}
+
+		setTimeout(() => this.tick(), delta);
+	}
+}
+
+const updateSec = () => {
+	diffSec = (new Date().getTime() - birthDate.getTime()) / 1000;
+	afterBirth.textContent = Math.round(diffSec);
+};
+
+window.onload = () => {
+	setInterval(updateSec, 100);
+
+	document.querySelectorAll(".typewrite").forEach((element) => {
+		const toRotate = element.getAttribute("data-type");
+		const period = element.getAttribute("data-period");
+		if (toRotate) {
+			new TxtType(element, toRotate, period);
+		}
+	});
+
+	document.querySelectorAll("#links li").forEach((li) => {
+		tippy(li, {
+			content: li.getAttribute("data-tooltip"),
+			placement: "bottom",
+			// delay: [0, 80],
+		});
+	});
+};
diff --git a/team1/member3/src/style.css b/team1/member3/src/style.css
@@ -0,0 +1,122 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
+@font-face {
+	font-family: "Cafe24SsurroundAir";
+	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24SsurroundAir.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Cafe24Ssurround";
+	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Ssurround.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+}
+
+:root {
+	--main-color: #faf3f0;
+	--highlight-color: #e9dffa;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: "Pretendard", sans-serif;
+	background-color: #101010;
+	color: var(--main-color);
+}
+
+a,
+a:visited,
+a:active {
+	color: var(--main-color);
+	text-decoration: none;
+}
+
+.noselete {
+	-webkit-touch-callout: none !important;
+	-webkit-touch-callout: none !important;
+	-webkit-user-select: none !important;
+	user-select: none !important;
+	-webkit-user-drag: none !important;
+}
+
+.cafe24 {
+	font-family: "Cafe24SsurroundAir";
+}
+
+.typewrite > .wrap {
+	padding-right: 0.5rem;
+	border-right: 0.12rem solid #ffffff81;
+}
+
+#app {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+section:not(:first-child) {
+	margin: 1rem 0 1rem 0;
+}
+
+section:first-child {
+	gap: 0.2rem;
+	height: 100vh;
+}
+
+section {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}
+
+#title {
+	font-family: "Cafe24Ssurround";
+	color: var(--highlight-color);
+	font-size: 6.5rem;
+	font-weight: 800;
+	letter-spacing: 0;
+}
+
+#subtitle {
+	font-size: 1.7rem;
+	font-weight: 200;
+}
+
+#description {
+	font-size: 1rem;
+	font-weight: 200;
+}
+
+#afterBirth {
+	font-weight: 400;
+	font-feature-settings: "tnum";
+	font-variant-numeric: tabular-nums;
+}
+
+#links {
+	display: flex;
+	flex-direction: row;
+}
+
+#links li {
+	font-size: 1.5rem;
+	margin: 0.5rem;
+	list-style-type: none;
+	transition: all 0.2s ease-in-out;
+}
+
+#links li:hover {
+	transform: scale(1.15);
+}
+
+#copyright {
+	font-size: 0.8rem;
+	font-weight: 200;
+}