-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (138 loc) · 7.69 KB
/
index.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김효중 이력서</title>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript (jQuery와 Popper.js를 포함해야 함) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
<div class="container-fluid ">
<a class="navbar-brand" href="#">김효중</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./">Home</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Projects</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- dropdown 초기화 -->
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!-- -->
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Projects</h1>
<p class="lead text-body-secondary">제가 그동안 해온 프로젝트들입니다. </p>
</div>
</div>
</section>
<!-- -->
<div class="album py-5 bg-body-tertiary">
<div class="container">
<!-- 화재 대피 시뮬 -->
<div class="row row-cols-1 row-cols-sm-2 g-3">
<div class="col">
<div class="card shadow-sm">
<video src="./res/시연영상.mp4" autoplay="true" loop="true"></video>
<div class="card-body">
<p class="card-text">vr 화재 대비 시뮬레이션입니다.<br>유니티를 활용하여 제작하였고 재미있게 재난 교육을 해보고자 <br>제작하였습니다.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
<!-- 메타버스 해커톤 -->
<div class="col">
<div class="card shadow-sm">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/v351DJXd8A4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen width="50%"></iframe>
<div class="card-body">
<p class="card-text">메타버스에 청약을 더했습니다. <br> 이 프로젝트를 통해 사용자들은 청약에 대해 알고 가까워 질수 있습니다.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
<!-- 캡스톤 장려상 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">성격 검사</text></svg>
<div class="card-body">
<p class="card-text">성격유형(big 5)과 게이미피케이션을 접목시킨 성격검사 콘텐츠입니다. <br> 자유롭게 게임을 플레이하면 행동을 파악해 플레이어의 성격을 알려드립니다.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
<!--부산 bic 게임잼 -->
<div class="col">
<div class="card shadow-sm">
<img src="./res/project cono 1-1.png" alt="project">
<div class="card-body">
<p class="card-text">대학 조교가 되어 과제를 채점하는 게임입니다. <br> 유니티를 활용하여 제작하였고 프로그래밍을 담당하였습니다.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
<!-- 언리얼 연습 과제 -->
<div class="col">
<div class="card shadow-sm">
<video src="./res/중간과제 2018661018.mp4" autoplay="true" loop="true" muted="true"></video>
<div class="card-body">
<p class="card-text">언리얼 엔진을 활용한 간단한 게임입니다. <br>다가오는 적들을 처치하면서 오래 살아남으면 됩니다.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
<!-- 아래 코드에 프로젝트 설명하여 추가하기 -->
<!-- <div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</body>
</html>