Portfolio/index.html at master · JacobCuke/Portfolio · 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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"
    integrity="sha512-kb1CHTNhoLzinkElTgWn246D6pX22xj8jFNKsDmVwIQo+px7n1yjJUZraVuR/ou6Kmgea4vZXZeUDbqKtXkEMg=="
    crossorigin="anonymous" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <script src="https://kit.fontawesome.com/df3eabbc1c.js" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="css/styles.css">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Jacob Cuke</title>
  <link rel="apple-touch-icon" sizes="180x180" href="img/favicon_io/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon_io/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/favicon_io/favicon-16x16.png">
  <link rel="manifest" href="img/favicon_io/site.webmanifest">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="250">

  <nav class="navbar navbar-expand-lg fixed-top">
    <a href="/" class="navbar-brand">Jacob Cuke</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
      <i class="fa fa-bars"></i>
    </button>

    <div id="navbarMenu" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#about" class="nav-link" data-langkey="about-head">About Me</a>
        </li>
        <li class="nav-item">
          <a href="#programming" class="nav-link" data-langkey="projects-head">Projects</a>
        </li>
        <li class="nav-item">
          <a href="#japanese" class="nav-link" data-langkey="japanese-head">Japanese</a>
        </li>
        <li class="nav-item">
          <a href="#guitar" class="nav-link" data-langkey="guitar-head">Guitar</a>
        </li>
        <li class="nav-item">
          <a href="#contact" class="nav-link" data-langkey="contact-head">Resume</a>
        </li>
        <li class="nav-item">
          <a onclick="toggleLanguage()" class="nav-link lang-menu" data-langkey="lang-selector">日本語</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="jumbotron text-center animate__animated animate__fadeIn animate__slower">
    <div class="title">
      <h1 class="english animate__animated animate__fadeInDown animate__delay-1s">Jacob Cuke</h1>
      <h2 class="animate__animated animate__fadeInDown animate__delay-1s">ジェイコブ・キューク</h2>
      <hr class="animate__animated animate__zoomIn animate__delay-2s">
      <h3 class="animate__animated animate__fadeInUp animate__delay-2s" data-langkey="main-desc">Programmer/Guitarist
      </h3>
    </div>
  </div>

  <div id="about" class="section anchor about col-12 text-center">
    <div class="fade-in">
      <img class="profile-pic" src="img/profile.jpg" alt="profile_picture">
      <h1 class="text-light font-weight-bold" data-langkey="about-head">About Me</h1>
      <hr class="my-4">
      <p class="lead" data-langkey="about-text">
        Hello! My name is Jacob Cuke and I'm currently in my final year of Computer Science at the University of
        Calgary. I have a passion for problem solving and building applications, with a focus on web development and
        database management. I also love teaching myself new skills, and have taught myself to speak Japanese fluently,
        and to play the guitar.
      </p>
    </div>

    <div class="fade-in mt-4">
      <a class="btn btn-resume" href="Jacob Cuke Resume.pdf" target="_blank" data-langkey="resume-button">Download
        Resume</a>
    </div>

    <div class="container contact-links mt-4 fade-in">
      <a href="mailto:jacobcuke@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
      <a href="https://github.com/JacobCuke" target="_blank"><i class="fab fa-github"></i></a>
      <a href="https://www.instagram.com/cukejacob/" target="_blank"><i class="fab fa-instagram"></i></a>
    </div>

    <div class="container skill-set fade-in">
      <h4 class="font-weight-bold" data-langkey="skillset-head">Skill Set</h4>
      <hr>
      <div class="row">
        <div class="col-md-6 my-list">
          <ul>
            <li>HTML5/CSS3</li>
            <li>JavaScript</li>
            <li>Django</li>
            <li>SQL</li>
          </ul>
        </div>
        <div class="col-md-6 my-list">
          <ul>
            <li>Python</li>
            <li>Java</li>
            <li>Linux</li>
            <li>Git</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <img src="img/wavy_transition.png">
  </div>

  <div id="programming" class="text-dark background-light section anchor programming col-12 text-center">
    <div class="fade-in">
      <h1 class="font-weight-bold" data-langkey="projects-head">Projects</h1>
      <hr class="my-4">
      <p class="lead" data-langkey="projects-text">
        Below are some of the projects that I'm most proud of, and I feel best represent my abilities as a programmer.
      </p>
    </div>

    <div class="container">
      <div class="row info-box fade-in">
        <div class="col-md-6 info-col-left">
          <h2 class="font-weight-bold project-title"><span data-langkey="school-title">School Management System</span><a
              class="ml-2" href="https://github.com/JacobCuke/SchoolManagement" target="_blank"><i
                class="fab fa-github"></i></a></h2>
          <hr>
          <div class="mt-3 project-list">
            <p><span data-langkey="school-desc">A complete web application and API that allows students and instructors
                to manage their courses, view lectures, submit and grade assignments. Visit the site </span><a
                href="https://cukeschoolmanagement.herokuapp.com/" target="_blank" data-langkey="school-link">here!</a>
            </p>
            <ul class="my-list list-right">
              <li><span class="list-right-text" data-langkey="school-1">Built with the Django framework</span></li>
              <li><span class="list-right-text" data-langkey="school-2">SQL database with 15+ related tables</span></li>
              <li><span class="list-right-text" data-langkey="school-3">Fully fleshed out API with authentication</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <img src="./img/school_management.png" alt="chess-pic">
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6">
          <img src="./img/MySouko.png" alt="mysouko-pic">
        </div>
        <div class="col-md-6 info-col-right">
          <h2 class="font-weight-bold project-title"><span data-langkey="mysouko-title">MySouko</span><a class="ml-2"
              href="https://github.com/JacobCuke/MySouko" target="_blank"><i class="fab fa-github"></i></a></h2>
          <hr>
          <div class="mt-3 project-list">
            <p><span data-langkey="mysouko-desc">A web application I built to keep track of all the Japanese books/TV
                shows/games etc. that I've completed or am currently working on. Visit the site </span><a
                href="https://mysouko.herokuapp.com/" target="_blank" data-langkey="mysouko-link">here!</a></p>
            <ul class="my-list">
              <li data-langkey="mysouko-1">Made using the Django framework in Python</li>
              <li data-langkey="mysouko-2">Postgres SQL database</li>
              <li data-langkey="mysouko-3">File storage with AWS S3 bucket</li>
              <li data-langkey="mysouko-4">Site hosted using Heroku</li>
              <li data-langkey="mysouko-5">HTML/CSS/JavaScript</li>
              <li data-langkey="mysouko-6">Mobile-friendly</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6 info-col-left">
          <h2 class="font-weight-bold project-title"><span data-langkey="chess-title">Chess Game</span><a class="ml-2"
              href="https://github.com/JacobCuke/Chess-Game" target="_blank"><i class="fab fa-github"></i></a></h2>
          <hr>
          <div class="mt-3 project-list">
            <p><span data-langkey="chess-desc-1">A chess game built entirely using JavaScript.</span><br><a
                data-langkey="chess-link" href="chess.html" target="_blank">here!</a></p>
            <ul class="my-list list-right">
              <li><span class="list-right-text" data-langkey="chess-1">JavaScript</span></li>
              <li><span class="list-right-text" data-langkey="chess-2">Highlight potential moves</span></li>
              <li><span class="list-right-text" data-langkey="chess-3">Collision detection</span></li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <img src="./img/chess.png" alt="chess-pic">
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6">
          <img src="./img/ecs_game_engine.png" alt="game-engine-pic">
        </div>
        <div class="col-md-6 info-col-right">
          <h2 class="font-weight-bold project-title"><span data-langkey="engine-title">Game Engine</span><a class="ml-2"
              href="https://github.com/JacobCuke/Game-Engine" target="_blank"><i class="fab fa-github"></i></a></h2>
          <hr>
          <div class="mt-3 project-list">
            <p data-langkey="engine-desc">This is a prototype game engine that I built from scratch in order to practice
              C++ and the Entity-Component-System (ECS) paradigm.</p>
            <ul class="my-list">
              <li data-langkey="engine-1">Advanced C++</li>
              <li data-langkey="engine-2">XML level map</li>
              <li data-langkey="engine-3">Collision detection</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6 info-col-left">
          <h2 class="font-weight-bold project-title"><span data-langkey="portfolio-title">This Site!</span><a
              class="ml-2" href="https://github.com/JacobCuke/Portfolio" target="_blank"><i
                class="fab fa-github"></i></a></h2>
          <hr>
          <div class="mt-3 project-list">
            <p data-langkey="portfolio-desc">I built this site from the ground up as a place to introduce myself and
              showcase the projects I've worked on in both English and Japanese!</p>
            <ul class="my-list list-right">
              <li><span class="list-right-text" data-langkey="portfolio-1">HTML/CSS/JavaScript</span></li>
              <li><span class="list-right-text" data-langkey="portfolio-2">Mobile responsive</span></li>
              <li><span class="list-right-text" data-langkey="portfolio-3">Multi-language support using JSON</span></li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <img src="./img/portfolio.png" alt="portfolio-pic">
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <img src="img/wavy_transition_inverted.png">
  </div>

  <div id="japanese" class="section anchor japanese col-12 text-center">
    <div class="fade-in">
      <h1 class="text-light font-weight-bold" data-langkey="japanese-head">Japanese</h1>
      <hr class="my-4">
      <p class="lead" data-langkey="japanese-text">
        What started as just a hobby quickly turned into one of my greatest passions as I spent 4 years teaching myself
        Japanese to fluency. I've worked as an interpreter, given speeches and even taken courses at the university
        level in Japan.
      </p>
    </div>

    <div class="container">
      <div class="row info-box fade-in">
        <div class="col-md-6">
          <img src="./img/senshu.jpg" alt="senshu-pic">
        </div>
        <div class="col-md-6 info-col-right">
          <h2 class="font-weight-bold" data-langkey="exchange-head">Study Abroad</h2>
          <hr>
          <p data-langkey="exchange-text">
            I spent a total of 9 months across two seperate trips to Japan studying at Senshu University in Tokyo. While
            there I studied both Computer Science and Japanese culture, while also helping a local church with the
            translation and interpretation of their Sunday services.
          </p>
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6 info-col-left">
          <h2 class="font-weight-bold" data-langkey="speech-head">Speeches</h2>
          <hr>
          <p data-langkey="speech-text">
            I also helped out my university by participating in events, where I gave multiple speeches and presentations
            entirely in Japanese to university, high school and elementary students.
          </p>
        </div>
        <div class="col-md-6">
          <img src="./img/speech.jpg" alt="senshu-pic">
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <img src="img/wavy_transition.png">
  </div>

  <div id="guitar" class="text-dark background-light section anchor guitar col-12 text-center">
    <div class="fade-in">
      <h1 class="font-weight-bold" data-langkey="guitar-head">Guitar</h1>
      <hr class="my-4">
      <p class="lead" data-langkey="guitar-text">
        I also taught myself to play the electric guitar, and currently play for one of the largest churches in Canada,
        Centre Street Church, where I have served for over 4 years.
      </p>
    </div>

    <div class="container">
      <div class="row info-box fade-in">
        <div class="col-md-6">
          <div class="video-wrapper">
            <iframe src="https://www.youtube.com/embed/ZTMiyUqZuwY" frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>
        </div>
        <div class="col-md-6 info-col-right">
          <h2 class="font-weight-bold" data-langkey="live-head">Live Services</h2>
          <hr>
          <p data-langkey="live-text">
            At CSC we have live services every weekend where I regularly serve in the worship band. This is one of the
            songs we did recently!
          </p>
        </div>
      </div>
      <div class="row info-box fade-in">
        <div class="col-md-6 info-col-left">
          <h2 class="font-weight-bold" data-langkey="mv-head">Music Videos</h2>
          <hr>
          <p data-langkey="mv-text">
            Here is one of the music videos we made for the Christmas season. Thankfully it wasn't very cold when we
            filmed it!
          </p>
        </div>
        <div class="col-md-6">
          <div class="video-wrapper">
            <iframe src="https://www.youtube.com/embed/0X3OnZQbUcc" frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <img src="img/wavy_transition_inverted.png">
  </div>

  <div id="contact" class="section anchor contact col-12 text-center">
    <div class="fade-in">
      <h1 class="text-light font-weight-bold" data-langkey="contact-head">Resume</h1>
      <hr class="my-4">
      <p class="lead" data-langkey="contact-text">
        Below is a link to my full resume and contact information. Feel free to reach out in whatever way works best.
      </p>
    </div>
    <div class="fade-in mt-4">
      <a class="btn btn-resume" href="Jacob Cuke Resume.pdf" target="_blank" data-langkey="resume-button">Download
        Resume</a>
    </div>
    <div class="container contact-links mt-4 fade-in">
      <a href="mailto:jacobcuke@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
      <a href="https://github.com/JacobCuke" target="_blank"><i class="fab fa-github"></i></a>
      <a href="https://www.instagram.com/cukejacob/" target="_blank"><i class="fab fa-instagram"></i></a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="javascript/langdata.js"></script>
  <script type="text/javascript" src="javascript/multilang.js"></script>
  <script type="text/javascript" src="javascript/appearOnScroll.js"></script>
</body>

</html>