Mid-Term-Project/index.html at main · CodeItpython/Mid-Term-Project · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>배건우의 웹사이트에 오신걸 환영합니다</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1 id="typing-heading" style="height: 55px; color: rgb(30, 20, 58)">
        <script>
          const heading = document.getElementById("typing-heading");
          const text = "Introduce Mr.Bae";
          let index = 0;

          function type() {
            if (index < text.length) {
              heading.innerHTML += text.charAt(index);
              index++;
              setTimeout(type, 100);
            } else {
              index = 0;
              heading.innerHTML = "";
              setTimeout(type, 1000);
            }
          }
          type();
        </script>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#pict">Picture</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <main>
      <h2 style="text-align: center">Welcome to My Webpage</h2>
      <h2 style="text-align: center">배 건 우</h2>
      <div style="text-align: center">
        <img src="profile.jpg" alt="picture" width="300px" /
        style="border-radius: 10%;">
      </div>
      <br /><br />
      <h2 id="about">
        기본신상 <a style="font-size: 15px">(마우스를 올려보세요!)</a>
      </h2>
      <script>
        function larger(img) {
          img.style.transition = "transform 0.3s";
          img.style.transform = "scale(1.05)";
        }
        function smaller(img) {
          img.style.transition = "transform 0.3s";
          img.style.transform = "scale(1)";
        }
      </script>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        이름: 배건우
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        소속: 단국대학교 소프트웨어학과
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        거주지: 경기도 성남시 위례동
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        이메일: rick9808@naver.com
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        MBTI: ISTJ (청렴결백한 논리주의자, 현실주의자)
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        취미: 기타연주, 여행, 봉사활동, 배드민턴, 탁구, 노래듣기
      </li>
      <br />

      <h2>학력 <a style="font-size: 15px">(마우스를 올려보세요!)</a></h2>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        중탑초등학교, 동천초등학교, 미금초등학교 졸업
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        분당 불곡중학교 졸업
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        분당 불곡고등학교 졸업
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        단국대학교 소프트웨어학과 2019년도 입학
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        2020년 2월 ~ 2021년 8월 육군 병장 만기전역(22사단)
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        2022년도 1학기 복학
      </li>
      <br />

      <h2>자격증 <a style="font-size: 15px">(마우스를 올려보세요!)</a></h2>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        토익 850점 (2023년 11월 만기)
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        한국사 능력 3급
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        컴퓨터 활용능력 1급
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        정보처리기사 1급(준비중)
      </li>
      <li class="list" onmouseover="larger(this)" onmouseout="smaller(this)">
        운전면허 2종
      </li>
      <br />

      <h2 style="text-align: center">My Picture</h2>
      <h5 style="text-align: center; font-size: 20px">마우스를 올려보세요!</h5>
      <script>
        function larger_pic(img) {
          img.style.transition = "transform 1s";
          img.style.transform = "scale(1.2)";
        }
        function smaller_pic(img) {
          img.style.transition = "transform 1s";
          img.style.transform = "scale(1)";
        }
      </script>
      <div class="mypic1" id="pict">
        <img src="IMG_7651.JPG" alt="picture" / onmouseover="larger_pic(this)"
        onmouseout="smaller_pic(this)"> <img src="IMG_8026.JPG" alt="picture" /
        onmouseover="larger_pic(this)" onmouseout="smaller_pic(this)"> <img
        src="IMG_8888.jpg" alt="picture" height="470px"/
        onmouseover="larger_pic(this)" onmouseout="smaller_pic(this)">
      </div>
      <br /><br />
      <div class="mypic2">
        <h2>Traveling picture</h2>
        <h5 style="text-align: center; font-size: 20px">
          마우스를 올려보세요!
        </h5>
        <img src="IMG_3680.jpg" alt="picture" / onmouseover="larger_pic(this)"
        onmouseout="smaller_pic(this)"> <img src="IMG_3682.jpg" alt="picture" /
        onmouseover="larger_pic(this)" onmouseout="smaller_pic(this)"> <img
        src="IMG_3683.jpg" alt="picture" / onmouseover="larger_pic(this)"
        onmouseout="smaller_pic(this)">
      </div>
      <br /><br />

      <h2 style="text-align: center">
        My Hobby: Playing Guitar(My YouTube channel)
      </h2>
      <div style="text-align: center; margin: 5%">
        <iframe
          width="560"
          height="315"
          style="margin-right: 5%"
          src="https://www.youtube.com/embed/qCaV38l_aqU"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/wS04OYbF3m0"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
      </div>

      <h2 style="text-align: center">즐겨듣는 노래</h2>
      <div style="text-align: center; margin: 5%">
        <iframe
          width="560"
          height="315"
          style="margin-right: 5%"
          src="https://www.youtube.com/embed/4sdN33l2WTw"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/oiBswnuvv80"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
      </div>

      <h2 id="contact" style="text-align: center">
        Contact me by instagram or Github
      </h2>
      <div>
        <p style="text-align: center">
          <a href="https://www.instagram.com/gunw00__08/"
            ><img
              src="instagram.png"
              alt="insta"
              id="icon"
              width="100px"
              style="margin-right: 50px" /></a
          ><a href="https://github.com/CodeItpython/Mid-Term-Project"
            ><img src="git_picture.png" alt="git" width="100px"
          /></a>
        </p>
      </div>
    </main>

    <footer>
      <p>&copy; 2023 Opensource SW Dankook Univ BaeGunwoo</p>
    </footer>
  </body>
</html>