-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
210 lines (202 loc) · 9.68 KB
/
index.html
File metadata and controls
210 lines (202 loc) · 9.68 KB
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
<!DOCTYPE html>
<html lang="en">
<!--https://www.youtube.com/watch?v=ZFQkb26UD1Y-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 노 캐시 : CDN -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<link rel="stylesheet" href="style.css">
<title>My Website</title>
</head>
<body>
<!--Header Section-->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero"><h1><span>M</span>ISO <span>H</span>ONG</h1></a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#services" data-after="Service">Services</a></li>
<li><a href="#projects" data-after="Projects">Projects</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#contact" data-after="Contact">Contacts</a></li>
</ul>
</div>
</div>
</div>
</section>
<!--End Header Section-->
<!--Hero Section-->
<section id="hero">
<div class="hero container">
<div>
<h1>Hello,<span></span> </h1>
<h1>My Name is <span></span></h1>
<h1>Miso <span></span></h1>
<a href="#projects" type="button" class="cta">포트폴리오 프로젝트</a>
</div>
</div>
</section>
<!--Hero Section-->
<!-- Service Section -->
<section id="services">
<div class="services container">
<div class="service-top">
<h1 class="section-title">Serv<span>i</span>ces</h1>
<p>서비스 가능한 내용들을 간략히 보여드립니다.</p>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon"><img src=img/setting.png></div>
<h2>jsp, 오라클</h2>
<p>JAVA정보처리산업기사 실습평가의 주된 내용으로, jsp를 통하여 오라클 서버와 연결, 웹에서 데이터 CRUD가 가능하도록 하는 방법을 학습했습니다.</p>
</div>
<div class="service-item">
<div class="icon"><img src=img/setting.png></div>
<h2>HTML, CSS</h2>
<p>국비교육과정에서도 다루었던 내용이며, 유투브 튜토리얼 등 개인 포트폴리오를 겸하며 지속적으로 학습하였습니다.<br> </p>
</div>
<div class="service-item">
<div class="icon"><img src=img/setting.png></div>
<h2>자바스크립트</h2>
<p>국비교육에서 학습하였으며, 그 이후 개인학습 및 포트폴리오를 통하여 자바스크립트로 게임을 만들어보며, 생성자와 메소드 개념을 학습하였습니다.</p>
</div>
<div class="service-item">
<div class="icon"><img src=img/setting.png></div>
<h2>Node.js</h2>
<p>개인적으로 공부한 내용이며, 몽고DB와 함께 연동하였습니다. 데이터 CRUD가 웹에서 가능하도록 구현해보았습니다. 하단의 포트폴리오2에 서술해놓았습니다.<p>
</div>
</div>
</div>
</section>
<!-- End Service Section -->
<!-- Projects Section -->
<section id ="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Recent <span>Projects</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Project 1</h1>
<h2>자바스크립트 |   Fight-game Project</h2>
<p>Along with a great mentor on Youtube, Chris, I've completed JavaScript Fight-game. It gives me a firm structure to understand inheritance and constructors sense.<br>
자바스크립트로 게임을 만들어보며, 자바스크립트 this, 생성자의 개념을 익힐 수 있었습니다.</p>
</div>
<div class="project-img">
<img src="./img/project1.png" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project 2</h1>
<h2>Node.js & MongoDB |   레시피 블로그</h2>
<p>To enhance Database & Network Application skills, I've completed a tutorial with Raddy via Youtube. Through a simple 1hr course, I've learnd more than I expected, such as the concepts of 'view', 'controller' and how to connect the web and data from data<br>
작성언어인 자바스크립트를 Project1에서 익힌후, Node.js를 이용하여 몽고DB와 연계, 레시피 블로그를 만들어 보았습니다.</p>
</div>
<div class="project-img">
<img src="./img/project2.png" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project 3</h1>
<h2>Coding is Love.</h2>
<p>Please fill out</p>
</div>
<div class="project-img">
<img src="./img/iconBackground.png" alt="img">
</div>
</div>
</div>
</div>
</section>
<!-- End Projects Section -->
<!-- About Section -->
<section id ="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="img/img-2.png" alt="img">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>me</span></h1>
<p>JAVA정보처리산업기사 과정형의 교육과정을 마치고, 정보처리산업기사를 취득했습니다(2022.09). 현재 개인공부를 겸하여 구직활동을 하고 있습니다. 여러 튜토리얼을 통한 학습이 잘 맞아 이것저것 시도해보고 있습니다. 영어에 대한 큰 불편함이 없어(현재까지는) 잘 시도해보는 편입니다. 베트남에서의 제조업과 물류업 경험으로, 업무 프로세스에 밝은 편입니다. 시도해보고 나서도 해결안되는 궁금한 점은 나이어린 선임에게도 스스럼없되 눈치껏 물어보며, 팀에 잘 융화되는 편입니다. </p>
<a href="https://github.com/MeSawSomething/" class="cta">취준생 깃허브로 가기</a>
</div>
</div>
</section>
<!-- End About Section -->
<!-- Contact Section -->
<section id="contact">
<div class="contact container">
<div>
<h1 class="section-title">Contact <span>info</span></h1>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="img/contact.png"></div>
<div class="contact-info">
<h1>Phone</h1>
<h2>+82 (0)10 9814 8776</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="img/email.png"></div>
<div class="contact-info">
<h1>Email</h1>
<h2>miso.hong.1989@gmail.com</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="img/address.png"></div>
<div class="contact-info">
<h1>Address</h1>
<h2>Busan, South Korea /</h2>
<h2>Willing to relocate for work</h2>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<!-- Footer Section -->
<section id="footer">
<div class="footer container">
<div class="brand">
<h1><span>M</span>ISO <span>H</span>ONG</h1>
<h2>Your Complete Web Solution</h2>
</div>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="img/icon_facebook.png"></a>
</div>
<div class="social-item">
<a href="#"><img src="img/icon_twitter.png"></a>
</div>
<div class="social-item">
<a href="https://github.com/MeSawSomething"><img src="img/icon_github.png"></a>
</div>
<div class="social-item">
<a href="#"><img src="img/icon_behance.png"></a>
</div>
</div>
<p>Copyright @ 2022 Miso Hong. All right reserved</p>
</div>
</section>
<!-- End Footer Section -->
<script src="./app.js"></script>
</body>
</html>