-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (129 loc) · 16.8 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
156
157
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SoRaang's Portfolio</title>
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="./assets/fonts/SUIT-Variable.woff2">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<a id="accessLink" href="#contentView">Skip to content</a>
<div id="wrap">
<header id="headPrimary">
<div class="inner-container inner-header">
<div id="logoPrimary">
<a href="/" title="Go To Main Page">
<svg id="logoHeader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 180">
<rect fill="transparent" width="270" height="180" />
<path class="logo-graffiti-splash" d="M37.69,159.16c5.05-7.35,11.51-13.9,17.91-20.05l-4.47,4.28c25.21-23.97,56.31-41.78,89.53-52l-4.97,1.52c2.22-.67,5.43-2.08,7.82-1.53l-4.97-1.52c.13.04.24.09.35.18l-4.47-4.28c6.77-64.1,5.51-86.08-3.79-65.95l3.64-6.4c-.1.04-.3.4-.37.49-.27.41-.71.77-1.06,1.11l4.47-4.28c-9.42,8.84-21.03,15.66-31.33,23.43-6.77,5.11-13.44,10.38-19.71,16.1-6.57,5.99-13.61,12.3-18.48,19.85-11.39,17.66-14.96,39.05-12.31,59.81,1.9,14.86,7.41,33.33,22.82,39.36,22.77,8.9,44.64-6.53,61.29-20.9,9.73-8.39,18.78-17.51,28.17-26.26,6.36-5.93,13.48-13.44,21.95-16.26l-4.97,1.52c1.56-.46,3.12-.68,4.72-.28l-4.97-1.52c1.2.39,2.14,1.09,3.06,1.96l-4.47-4.28c.26.26.49.54.71.83-2.8-4.12-4.75-8.61-5.85-13.49-3.87-14.33-3.66-33.22,2.49-47.15-1.92,4.36,4.71-7.11,2.36-4.01-.48.64-.92,1.3-1.41,1.93-2.64,3.38-5.83,6.34-8.91,9.3l4.47-4.28c-8.47,8.1-16.65,15.57-22.49,25.81-6.22,10.93-8.89,22.99-9.63,35.51-1.01,17.15,1.3,34.62,10.47,49.44,14.55,23.55,43,10.65,59.07-3.71,14.07-12.58,23.54-26.42,29.2-44.57-5.38,7.02-10.76,14.03-16.15,21.05.06.02.11.03.17.05l-4.97-1.52c2.47.75,4.74,2.1,6.62,3.85l-4.47-4.28c.5.51.91,1.12,1.42,1.62,2.56,2.55-4.32-8.52-2.39-4.12-1.71-3.8-2.82-7.76-3.34-11.87-.77-4.68-1.01-5.93-.72-3.77-.8-6.54-.81-13.09-.04-19.64,1.8-8.77,2.27-11.32,1.4-7.64-1.25,4.67,3.98-10.43,1.1-3.84-1.84,4.21,4.38-6.52,1.27-2.28-2.65,3.61-5.33,7.03-8.4,10.31-5.41,5.77-7.69,18.16-8.59,25.4-1.28,10.26-1.04,22.73,1.89,32.75,1.86,6.38,4.57,16.47,11.18,19.53,6.07,2.81,10.01.4,14.41-4.28,9.02-9.62,15.73-20.99,19.2-33.79,5.21-19.23,5.18-42.45-2.89-60.98-4.71-10.8-11.81-17.54-22.82-20.5-4.04.42-7.18,2.35-9.44,5.8-3.2,4.65-5.44,9.73-6.71,15.25,4.02-12.87,2.96-7.95,1.72-5.3-.4.85-.84,1.69-1.21,2.55-1.81,4.11,4.22-6.81,1.79-3.18-.69,1.02-1.35,2.06-2.07,3.06-2.78,3.85-5.97,7.36-9.38,10.66l4.47-4.28c-7.3,6.89-15.72,12.98-25.32,16.18l4.97-1.52c-4.25,1.29-8.57,1.95-12.94.86l4.97,1.52c-2.07-.64-3.83-1.6-5.47-3.01l4.47,4.28c-1.35-1.32-4.31-6.12-1.18-.71,3.85,6.66,5.93,17.93,5.77,26.99-.1,5.83-.91,13.81-2.11,18.26.93-3.44-4,9.92-2.11,6.12.18-.36.98-1.74.99-2.12,0,.17-4.75,7.54-2.33,4.19,3.85-5.35,8.31-9.97,13.05-14.54l-4.47,4.28c5.1-4.89,10.72-9.67,15.16-15.22,9.82-12.29,12.96-29.19,12.95-44.52s-2.79-37.86-17.56-46.52c-5.72-3.36-10.82-2.07-16.55.2-8.21,3.25-15.06,10.34-21.39,16.26-9.14,8.55-17.99,17.42-27.45,25.62-9.96,8.63-20.93,17.35-33.7,21.3l4.97-1.52c-5.37,1.54-10.85,2-16.28.53l4.97,1.52c-3.11-.95-6.13-2.38-8.53-4.62l4.47,4.28c-.38-.38-.79-.78-1.1-1.22-2.4-3.43,2.86,5.21,2.76,5.02-2.02-3.92,3.18,10.7,2.23,6.7,1.48,6.24,2.25,12.78,2.29,19.25-.02-4.65-1.12,14.07-.52,9.38.26-2.04-2.79,13.04-1.43,8.15.4-1.44-4.3,10.7-2.17,6.53.31-.61.66-1.28.91-1.91.95-2.37-4.98,7.98-2.52,4.47.41-.58.78-1.2,1.18-1.78.88-1.25,1.82-2.46,2.79-3.64,2.33-2.82,4.89-5.44,7.52-7.98l-4.47,4.28c10.51-10.03,22.27-18.68,34.02-27.19,8.58-6.22,19.15-12.34,25.72-20.83,4.57-5.91,6.59-13.76,7.92-20.9,2.35-12.66,2.07-25.63-.96-38.17-1.88-7.77-7.01-21.68-17.35-21.44-5.89.14-12.03,3.03-17.5,4.9-26.54,9.07-51.52,22.58-73.14,40.5-11.96,9.92-24.4,21.12-33.29,34.05-5.09,7.4-7.5,16.6-8.59,25.4-1.28,10.26-1.04,22.73,1.89,32.75,1.86,6.38,4.57,16.47,11.18,19.53,5.56,2.57,10.8.97,14.41-4.28h0Z" />
<path class="logo-graffiti-shadow" d="M198.34,171.06c-10.69,0-13.77-18.28-16.69-42.17-.25-2.09-.5-4.13-.75-5.92-11.51,4.87-21.89,12.15-29.9,18.19-1.54,1.2-3.26,1.83-5.04,1.83-1.66,0-4.1-.57-6.35-3.26-3.12-3.73-4.98-11.1-5.05-15.59-7.65,8.3-13.29,17.09-17.96,25.01-1.47,2.59-3.96,4.12-6.79,4.12-2.22,0-4.48-.96-6.34-2.63.64,2.71.89,5.62.14,8.77-.6,4.89-4.03,8.02-8.82,8.02-11.05,0-28.96-16.75-34.1-36.3-2.08-7.93-3.07-20.45,5.2-33.27-11.35,5.55-21.87,9.55-32.36,12.37l-.13.03c-.63.15-1.28.23-1.91.23-6.7,0-10.66-7.79-11.5-15.04-.95-8.14,1.99-14.24,7.48-15.54,7.27-1.72,14.35-4.52,22.74-8.2,18.25-8,36.82-19.36,55.2-33.78,1.43-1.13,3.09-1.72,4.77-1.72,5.45,0,8.62,5.76,9.79,8.4,3.1,6.11,2.18,11.95.22,17.2,16.13-6.65,32.59-11.73,48.2-16.25.73-.21,1.48-.32,2.22-.32,3.2,0,6.01,1.86,8.09,5.19,1.75-9.43,4.84-17.68,9.91-23.2,4.43-4.81,9.98-7.25,16.52-7.25,9.86,0,21.52,5.55,35.63,16.97,12.28,8.57,20.03,22.98,20.23,37.64.18,12.74-5.31,23.87-15.44,31.36-12.29,10.28-27.62,16.49-38.34,19.9l-.12.04c-.65.19-1.32.28-1.99.28-1.31,0-2.48-.33-3.53-.88,1.51,10.2,3.2,19.6,5.15,28.49.51,2.31,1.16,9.28-1.85,13.66-1.36,1.98-3.27,3.2-5.54,3.54l-.13.02h-.14c-.25.04-.49.05-.74.05ZM104.5,102.93c-.95,3.49-1.87,7.04-2.64,10.63,1.65-4.41,3.67-8.59,5.74-12.38-1.05.58-2.08,1.16-3.1,1.74ZM198.03,90.19c2.71.81,5.15,2.1,7.3,3.87,13.17-4.92,27.19-11.33,34.63-23.28-5.17-6.99-23.18-20.26-33.16-20.26-2.33,0-3.12.79-3.44,1.19-6.44,9.47-5.95,22.26-5.48,34.62.05,1.27.1,2.56.14,3.85ZM165.66,81.23c.98.7,1.88,1.53,2.7,2.48,2.23,2.59,3.71,6,4.3,9.74,1.61-.67,3.18-1.26,4.71-1.77-.38-5.36-.62-11.02-.62-16.72-3.63,1.77-7.34,3.87-11.1,6.26Z" />
<path class="logo-graffiti-shadow" d="M205.15,24.5c8.18,0,18.93,4.72,32.92,16.07,20.51,14.19,26.44,45.92,4.72,61.86-10.46,8.79-23.94,15.02-36.92,19.15-.25.07-.5.11-.75.11-2.41,0-4.41-3.28-5.25-5-.64-.74-2.71-1.47-4.22-1.62,1.7,13.3,3.84,26.58,6.7,39.69.64,2.94.81,11.12-3.66,11.8-.11.01-.23.02-.34.02-10.11,0-11.72-41.14-13.92-49.76-13.18,4.58-25.04,12.42-36.12,20.77-.82.64-1.6.92-2.33.92-4.82,0-7.4-12.51-6.83-15.65.71-3.91,1.56-7.87,2.7-11.74-12.51,10.24-21.13,22.22-29.1,35.77-.77,1.36-1.82,1.9-2.91,1.9-1.51,0-3.1-1.03-4.17-2.37-9.29-18.35,3.67-40.66,14.01-56.24-6.53,2.93-12.89,6.18-19.02,9.81-3.61,13.02-6.75,26.26-5.02,39.9.88,6.29,5.29,12.15,3.57,18.76-.27,2.97-1.93,4.31-4.38,4.31-14.99,0-59.87-49.85-3.28-81.83.36-1.16.74-2.32,1.12-3.47-18.75,11.76-38.76,22.48-60.26,28.26-.3.07-.59.1-.88.1-6.96,0-10.47-19.92-2.99-21.69,8.07-1.91,15.95-5.14,23.51-8.46,20.15-8.83,38.9-20.81,56.18-34.37.68-.53,1.35-.76,1.99-.76,2.63,0,4.83,3.77,5.72,5.83,4.37,8.44-1.38,16.58-4.74,24.13,18.75-8.74,38.74-15.08,58.47-20.79.33-.1.66-.14.97-.14,6.36,0,9.91,18.35,4.31,21.08-6.95,3.38-13.62,7.59-19.91,12.23.58-.07,1.14-.1,1.68-.1,8.84,0,12.78,8.95,11.51,17.49,4.38-2.21,9.08-4.21,13.91-5.51-2.73-32.48-.19-70.44,23.01-70.44M204.28,99.24c14.96-5.44,31.69-12.47,40.19-27.23l.49-1.7c-3.9-7.72-25.5-24.29-38.16-24.29-2.96,0-5.43.9-7.07,3.03-8.79,12.78-6.33,30.04-6.11,44.8,3.98.49,7.64,2.11,10.66,5.39M83.69,135.73c-.75-7.93-.4-16,.68-24-3.97,3.71-7.8,8.18-8.93,13.61-.87,2.06,5.29,8.26,8.25,10.39M205.15,15.5c-7.73,0-14.59,3.01-19.83,8.71-4.01,4.36-7.1,10.3-9.27,17.8-1.68-.82-3.5-1.25-5.41-1.25-1.17,0-2.34.17-3.48.5-13.18,3.81-26.96,8.02-40.68,13.25.24-3.73-.36-7.69-2.42-11.8-3.11-6.98-8.14-10.97-13.86-10.97-2.7,0-5.32.93-7.55,2.68-18.08,14.19-36.33,25.36-54.23,33.2-8.17,3.58-15.03,6.3-21.97,7.94-7.86,1.86-12.14,9.88-10.91,20.44,1.33,11.37,7.74,19.01,15.97,19.01.99,0,1.98-.12,2.95-.35l.13-.03.13-.04c7.23-1.94,14.46-4.43,21.95-7.57-2.46,8.04-2.58,16.67-.32,25.27,2.58,9.82,8.24,19.54,15.93,27.39,3.62,3.69,13.05,12.27,22.52,12.27,7.04,0,12.29-4.68,13.26-11.72.19-.85.33-1.69.41-2.51.45.05.9.08,1.35.08,4.41,0,8.4-2.38,10.7-6.38,3.2-5.44,6.88-11.29,11.36-17.08,1,3.1,2.43,6.09,4.28,8.31,2.62,3.14,6.1,4.87,9.8,4.87,1.91,0,4.81-.48,7.78-2.77,6.49-4.89,14.56-10.61,23.45-15.09.96,7.85,2.15,17.56,4.14,25.66,1.23,5.02,2.65,8.9,4.32,11.86,4.14,7.31,9.71,8.4,12.67,8.4.38,0,.76-.02,1.14-.05l.27-.02.27-.04c3.48-.52,6.52-2.46,8.58-5.44,4.73-6.87,2.63-16.76,2.54-17.18-1.54-7.05-2.92-14.43-4.18-22.29.47-.08.94-.18,1.41-.31l.12-.03.12-.04c11.07-3.52,26.93-9.95,39.76-20.65,11.26-8.37,17.35-20.78,17.15-34.96-.22-16.03-8.65-31.78-22.02-41.17-14.89-12.03-27.43-17.88-38.34-17.88h0ZM206.58,55.03c.07,0,.14,0,.22,0h0c2.79,0,9,2.01,17.29,7.68,4.51,3.09,7.97,6.13,10.17,8.4-6.64,8.51-17.55,13.77-28.23,17.89-1.15-.76-2.35-1.41-3.61-1.97-.01-.28-.02-.56-.03-.84-.43-11.28-.88-22.92,4.19-31.14h0Z" />
<path class="logo-graffiti-shadow" d="M150.61,53.12c-9.19,0-17.81-1.73-25.63-5.13-4.97-2.17-5.9-9.36-4.62-15.52,1.24-5.97,4.45-9.54,8.56-9.54.96,0,1.92.2,2.84.61,5.38,2.34,12.45,3.63,19.92,3.63,6.16,0,12.21-.86,17.48-2.47.7-.21,1.41-.32,2.11-.32,1.51,0,6.54.63,7.76,8.72.82,5.44-.21,14.79-6.45,16.7-7.2,2.21-14.6,3.33-21.98,3.33Z" />
<path class="logo-graffiti-shadow" d="M128.93,27.43c.33,0,.68.07,1.04.23,6.2,2.7,13.93,4.01,21.72,4.01,6.5,0,13.05-.91,18.8-2.67.28-.08.54-.13.79-.13,4.83,0,4.5,15.24-.01,16.62-6.62,2.03-13.64,3.13-20.66,3.13-8.18,0-16.34-1.5-23.83-4.76-4.24-1.85-2.52-16.43,2.15-16.43M128.93,18.43c-4.95,0-10.95,3.45-12.97,13.12-1.54,7.37-.56,17.17,7.22,20.57,8.39,3.66,17.62,5.51,27.43,5.51,7.83,0,15.67-1.19,23.3-3.53,9-2.76,10.66-14.47,9.58-21.67-1.39-9.27-7.44-12.56-12.21-12.56h0c-1.15,0-2.3.18-3.43.52-4.85,1.49-10.44,2.28-16.16,2.28-6.87,0-13.31-1.16-18.13-3.26-1.49-.65-3.05-.98-4.64-.98h0Z" />
<path class="logo-graffiti-text" d="M231.07,33.57c-53.66-43.54-59.62,10.43-55.93,54.37-4.82,1.3-9.52,3.3-13.91,5.51,1.35-9.07-3.17-18.59-13.19-17.38,6.29-4.63,12.96-8.84,19.91-12.23,5.88-2.86,1.67-22.95-5.28-20.94-19.74,5.71-39.72,12.05-58.47,20.79,3.36-7.55,9.11-15.69,4.74-24.13-1.11-2.56-4.26-7.78-7.72-5.07-17.27,13.55-36.03,25.54-56.18,34.37-7.57,3.32-15.44,6.55-23.51,8.46-7.8,1.84-3.66,23.37,3.86,21.59,21.5-5.78,41.51-16.5,60.26-28.26-.38,1.16-.75,2.31-1.12,3.47-65.86,37.22,5.72,98.64,7.66,77.52,1.72-6.61-2.69-12.47-3.57-18.76-1.73-13.64,1.42-26.87,5.02-39.9,6.13-3.63,12.49-6.88,19.02-9.81-10.34,15.59-23.29,37.89-14.01,56.24,1.84,2.33,5.26,3.7,7.08.47,7.98-13.55,16.59-25.53,29.1-35.77-1.14,3.87-2,7.83-2.7,11.74-.65,3.61,2.85,19.63,9.16,14.72,11.08-8.35,22.94-16.2,36.12-20.77,2.23,8.72,3.85,50.67,14.26,49.74,4.47-.67,4.31-8.86,3.66-11.8-2.86-13.1-5-26.39-6.7-39.69,1.52.15,3.58.88,4.22,1.62.92,1.9,3.26,5.68,6,4.89,12.98-4.13,26.46-10.36,36.92-19.15,21.72-15.93,15.79-47.66-4.72-61.86ZM68.44,118.33c1.12-5.43,4.96-9.9,8.93-13.61-1.08,8-1.43,16.07-.68,24-2.96-2.13-9.11-8.34-8.25-10.39ZM237.47,65.01c-8.5,14.76-25.23,21.79-40.19,27.23-3.01-3.28-6.68-4.9-10.66-5.39-.22-14.76-2.67-32.01,6.11-44.8,8.68-11.26,40.42,11.73,45.23,21.25l-.49,1.7Z" />
<path class="logo-graffiti-text" d="M119.78,36.86c13.92,6.06,30.16,6.03,44.49,1.63,4.75-1.46,4.87-18.23-.77-16.49-12.63,3.88-29.14,3.62-40.52-1.34-5.44-2.37-7.74,14.22-3.19,16.2Z" />
</svg>
</a>
</div> <!-- #logoPrimary -->
<nav id="navPrimary">
<a class="main-nav-links" href="#secAbout">About Me</a>
<a class="main-nav-links" href="#secPortfolio">Portfolio</a>
<a class="main-nav-links" href="#secHobbies">Hobbies</a>
<a class="main-nav-links" href="#secContact">Get In Touch</a>
</nav> <!-- #navPrimary -->
</div>
</header> <!-- #headPrimary -->
<aside id="bgImageHolder">
<img id="bgImage" src="./assets/images/temp-bg.jpg" alt="">
</aside> <!-- #bgImageHolder -->
<div id="contentView">
<div id="containerLeft">
<!-- 작업해야 함 -->
</div> <!-- #containerLeft -->
<section id="secHero">
<div class="inner-container inner-hero">
<div class="hero-text">
<div class="hero-text-top">
<p>Hello</p>
<p>my name is</p>
</div>
<h1 class="hero-name">Kim Chang Wan</h1>
<div class="hero-text-bottom">
Frontend Web Developer & Designer
</div>
</div>
</div>
</section> <!-- #secHero -->
<section id="secAbout">
<div class="inner-container">
<h2 class="section-title">About Me</h2>
<div id="contAbout">
※ 본 웹 사이트는 현재 작업 진행중에 있습니다. 임시로만 확인해 주세요.
간략한 성격과 주력 기술 분야 소개, 사용 가능 툴과 숙련도 나열
</div> <!-- #contAbout -->
</div>
</section> <!-- #secAbout -->
<section id="secPortfolio">
<div class="inner-container">
<h2 class="section-title">Portfolio</h2>
<div id="contPortfolio">
<article class="pf-totalyear-container"> <!-- 하나의 연도 전체 컨테이너 - 반복형 -->
<div class="pf-yeartag">
<h4>2021</h4> <!-- 연도 태그 -->
</div>
<div class="pf-dots">
<div class="pf-yeardot"></div> <!-- 해당 연도의 메인 도트, 이후 도트는 각 업무별 디테일에서 absolute로 처리 -->
</div>
<div class="pf-yearworks-container"> <!-- 해당 연도의 업무 내역 컨테이너 -->
<div class="pf-yeartitle"> <!-- 해당 연도 메인 이벤트 -->
<h5>해당 연도 메인 이벤트</h5>
<p>이벤트 간략 설명</p>
</div>
<div class="pf-work-details"> <!-- 해당 연도 디테일의 컬럼 -->
<div class="pf-single-work"> <!-- 단일 업무 컨테이너 - 반복형 -->
<h6>해당 연도 소속 업무 디테일</h6>
<div class="work-thumbnails"> <!-- 해당 업무 썸네일 목록 -->
<div>
해당 업무 썸네일
</div>
</div>
</div>
<div class="pf-single-work"> <!-- 단일 업무 컨테이너 - 반복형 -->
<h6>해당 연도 소속 업무 디테일</h6>
<div class="work-thumbnails"> <!-- 해당 업무 썸네일 목록 -->
<div>
해당 업무 썸네일
</div>
</div>
</div>
</div>
</div>
</article> <!-- 연도 전체 아이템 -->
</div> <!-- #contPortfolio -->
</div>
</section> <!-- #secPortfolio -->
<section id="secHobbies">
<div class="inner-container">
<h2 class="section-title">Hobbies</h2>
<div id="contHobbies">
취미 분류별 탭 형식의 소개 구성
</div> <!-- #contHobbies -->
</div>
</section> <!-- #secHobbies -->
<section id="secContact">
<div class="inner-container">
<h2 class="section-title">Get In Touch</h2>
<div id="contContact">
</div> <!-- #contContact -->
</div>
</section> <!-- #secContact -->
</div> <!-- #contentView -->
<footer id="footPrimary">
Copyright © 2024 SoRaang All Rights Reserved.
</footer> <!-- #footPrimary -->
</div> <!-- #wrap -->
<script type="module" src="./assets/scripts/base.js"></script>
</body>
</html>