ozen0718.github.io/index.html at main · ozen0718/ozen0718.github.io · 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="ko">
  <head>
    <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>포트폴리오</title>
    <link rel="stylesheet" href="style/style.css" />
    <link rel="stylesheet" type="text/css" href="style/jquery.fullpage.css" />
    <link rel="shortcut icon" href="images/favicon.svg" type="image/x-icon" />
  </head>

  <body>
    <header>
      <input type="checkbox" name="" id="dark-mode" />
      <label for="dark-mode" class="switch"></label>
    </header>
    <main id="fullpage">
      <section class="section main white active">
        <div class="title">
          <h1 class="bold">
            프론트엔드 개발자 지망<br />
            임용균 입니다<span class="white-point">.</span>
          </h1>
          <p class="date normal">portfolio-30%</p>
        </div>
      </section>
      <section class="section about white">
        <div class="title">
          <h3 class="grow bold black-point">"꾸준함으로"</h3>
          <h1 class="bold">
            개발에 몰입하는 개발자 <br />
            임용균 입니다<span class="black-point">.</span>
          </h1>
          <div class="aboutMe normal">
            <p class="black-point">
              “꾸준함은 기회를 만들고, 기회는 경험을 만들고, 경험은 지식을
              쌓게합니다.”
            </p>
            라는 가치관으로 무엇이든 경험하려고 합니다. <br />
            꾸준한 노력 덕에 다양한 기술스택을 경험할 수 있었습니다. <br />
            <br />

            <p class="black-point">사용자 경험을 중요하게 생각합니다.</p>
            기존에 불편했던 물품 배분시스템을 개발한 경험이 있습니다.
            <br />
            같이 일을하는 사람들에게 평가가 좋았고 이후 여러 분점에서
            사용되었습니다.<br />
            <br />
            <p class="black-point">
              지식을 다른 사람들과 공유하고, 기록하는 것을 좋아합니다.
            </p>
            스터디를 기획하고 운영하며 지식을 나누고 팀원들과 함께 성장하려고
            합니다. <br />
          </div>
        </div>
      </section>
      <section class="section skills white">
        <h2 class="skill-title bold">
          저는
          <span class="black-point">_ _ _ _</span>
          를 잘해요<span class="black-point">.</span>
        </h2>
        <div class="skill">
          <div class="value">
            <h3 class="bold">html</h3>
            <h3 class="bold">JavaScript</h3>
            <h3 class="bold">CSS</h3>
            <p class="explain normal"></p>
          </div>
          <div class="value">
            <h3 class="bold">html & JavaScript & CSS</h3>
            <p class="explain normal">
              ES6 자바스크립트 문법을 사용합니다. <br />
              JavaScript 문법에 익숙합니다. <br />
              JavaScript 문법을 프로젝트에 적용한 적이 있습니다.
            </p>
          </div>
        </div>
      </section>
      <section class="section skills white">
        <h2 class="skill-title bold">
          저는
          <span class="black-point">_ _ _ _</span>
          를 잘해요<span class="black-point">.</span>
        </h2>
        <div class="skill">
          <div class="value">
            <h3 class="bold">ReactJS</h3>
            <p class="explain normal">
              Recoil을 이용하여 전역 상태관리를 할 수 있습니다 <br />
              함수형 컴포넌트 문법에 익숙합니다. <br />
              React hooks를 능숙하게 사용합니다. <br />
            </p>
          </div>
          <div class="value">
            <h3 class="bold">GIT</h3>
            <p class="explain normal">
              git을 사용하여 프로젝트 관리를 합니다. <br />
              git-flow에 대해 압니다. <br />
              GitKraken을 사용할 수 있습니다. <br />
            </p>
          </div>
        </div>
      </section>
      <section class="section skills white">
        <h2 class="skill-title bold experience">
          저는
          <span class="black-point">_ _ _ _</span>
          를 사용한 적이 있어요<span class="black-point">.</span>
        </h2>
        <div class="bold skill">
          <h3 class="value">NginX</h3>
          <h3 class="value">Express.js: Rest API</h3>
          <h3 class="value">MySQL</h3>
          <h3 class="value">AWS EC2</h3>
        </div>
        <div class="bold skill">
          <h3 class="value">Ubuntu</h3>
          <h3 class="value">Git & Github</h3>
        </div>
      </section>
      <section class="section projects white">
        <h2 class="project-title bold">
          <span class="white-point">_ _ _ _</span>
          를 만들어 보았습니다<span class="white-point">.</span>
        </h2>
        <div class="wrap">
          <div class="box">
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 01</span>

                <img
                  class="code-link"
                  src="https://github.githubassets.com/favicons/favicon.png"
                  alt=""
                />
              </div>
              <a href="https://github.com/ozen0718/food-map">
                <p class="medium">대한민국 맛집지도</p>
                <p class="normal">
                  유튜버들과 연예인들의 맛집탐방을 한눈에 모아봤습니다.
                </p>
              </a>
            </div>
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 02</span>
                <img
                  class="code-link"
                  src="https://github.githubassets.com/favicons/favicon.png"
                  alt=""
                />
              </div>
              <a href="https://github.com/ozen0718/Macro">
                <p class="medium">이용자 자동등록기</p>
                <p class="normal">
                  사회복무시절 업무효율화를 위해만든 자동 분류기 입니다.
                </p>
              </a>
            </div>
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 03</span>
                <a
                  href="https://github.com/ozen0718/member-registration/tree/master/cyworld"
                >
                  <img
                    class="code-link"
                    src="https://github.githubassets.com/favicons/favicon.png"
                    alt=""
                  />
                </a>
              </div>
              <a
                href="https://github.com/ozen0718/member-registration/tree/master/cyworld"
              >
                <p class="medium">포스팅 홈페이지</p>
                <p class="normal">
                  블로그 처럼 자신의 일상을 포스팅할수있는 사이트 입니다.
                </p>
              </a>
            </div>
          </div>
          <div class="box">
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 04</span>
                <a href="https:">
                  <img
                    class="code-link"
                    src="https://github.githubassets.com/favicons/favicon.png"
                    alt=""
                  />
                </a>
              </div>
              <a href="https:">
                <p class="medium">제목3</p>
                <p class="normal">설명3</p>
              </a>
            </div>
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 05</span>
                <a href="https:">
                  <img
                    class="code-link"
                    src="https://github.githubassets.com/favicons/favicon.png"
                    alt=""
                  />
                </a>
              </div>
              <a href="https:">
                <p class="medium">제목4</p>
                <p class="normal">설명4</p>
              </a>
            </div>
            <div class="project">
              <hr class="line" />
              <div class="inline">
                <span class="number medium text"> 06</span>
                <a href="https:">
                  <img
                    class="code-link"
                    src="https://github.githubassets.com/favicons/favicon.png"
                    alt=""
                  />
                </a>
              </div>
              <a href="https:">
                <p class="medium">제목5</p>
                <p class="normal">설명5</p>
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="section white">
        <div class="contact">
          <h3 class="medium">
            구경하고 가세요<span class="black-point">.</span>
          </h3>
          <div class="icons">
            <a href="https://github.com/ozen0718" class="logo">
              <img
                class="logo"
                src="data:image/png;base64,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"
                alt="github_logo"
              />
            </a>
          </div>
        </div>
        <div class="contact">
          <h3 class="medium">
            여기로 연락 주세요<span class="black-point">.</span>
          </h3>
          <div class="icons">
            <p class="normal">
              <a href="mailto:limyong301p@gmail.com" class="e-mail"
                >limyong301p@gmail.com</a
              >
            </p>
          </div>
        </div>
      </footer>
    </main>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="src/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="src/jquery.fullpage.js"></script>
    <script src="src/index.js"></script>
    <script src="src/darkmode.js"></script>
  </body>
</html>