PortfolioSite/index.html at main · Schorcher5/PortfolioSite · 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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Joaquin Cisneros</title>

  <!-- Css style sheet and Bootstrap 5 (including scripts)-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=League+Spartan&family=Poppins&family=Sacramento&display=swap" rel="stylesheet">

  <!-- Font awsome -->
  <script src="https://kit.fontawesome.com/d5537c955f.js" crossorigin="anonymous"></script>

  <!-- Favicon import -->
  <link rel="icon" href="./images/favicon.ico">
</head>

<body>

  <!-- This is the navbar -->
  <section id="nav-id">
    <nav class="hide-on-scroll navbar navbar-expand-lg fixed-top navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#home">Joaquin Cisneros</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav  ms-auto">
            <li class="nav-item">
              <a class="nav-link" aria-current="skills-section" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="work-volunteer-section" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="projects-section" href="#work-expierince">Work/Volunteer</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="education-section" href="#school">Education</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="extra-stuff-section" href="#extra-stuff">Extra-Stuff</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="contact-section" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </section>

  <!-- Home section -->
  <section id="home" class="gradient-background promo text-white">
    <div class="container-fluid row">
      <div class="text-sm-start col-sm-6 pt-5">
        <h1 class="title">Hi! I'm Joaquin, or Joe for short</h1>
        <p class="description">I am a computer science student at UFV and a aspiring software engineer. Learning full-stack/front-end development right now, but hope to do back-end one day!</p>
        <a href="https://www.linkedin.com/in/joaquin-cisneros-271256225/" class="icon-button btn special-btn" title="linkedin account" aria-label="linkedin"><i class="fa-brands fa-linkedin fa-2xl"></i></a>
        <a href="https://github.com/Schorcher5?tab=stars" class="btn icon-button special-btn" title="github account" aria-label="github"><i class="fa-brands fa-github fa-2xl"></i></a>
        <a href="https://devpost.com/Schorcher5?ref_content=user-portfolio&ref_feature=portfolio&ref_medium=global-nav" class="btn icon-button special-btn" title="devpost account" aria-label="devpost"><i class="fa-solid fa-code fa-xl"></i></a>
        <a href="https://leetcode.com/JoaquinCisneros/" class="btn icon-button special-btn" title="leetcode account" aria-label="leetcode"><img class="fa-solid ic-leetcode" src="./images/leetcode.png" alt="leetcode logo"></a>
        <div class="resume-btn">
          <a href="https://drive.google.com/file/d/19W-_uOhtsQ-MD7AQiO6dFIU91ON-t44n/view?usp=sharing" class="btn"><i class="fa-solid fa-file fa-xl"></i> Check out my resume</a>
        </div>
      </div>
      <div class="home-gif col-sm-6">
        <img src="images/first.gif" alt="Gif a person programming">
      </div>
    </div>
  </section>

  <!-- Skills section -->
  <section id="skills" class="text-secondary">
    <div class="container-fluid row">
      <div class="text-sm-start col-sm-6 load load-left">
        <h1 class="title">What I Can Do</h1>
        <p class="description">Full-Stack-Web developer who is proficient in a wide variety of tools ranging from front-end libraries to backend frameworks. Always learning more about different techonologies and adding more tools to my skill set.</p>
      </div>
      <div class=" text-sm-end col-sm-6 load load-right">

        <h2>Programming/Mark-Up Languages</h2>

        <a class=" btn special-btn" aria-label="Java"><img src="./images/java.png" alt="java logo" title="Java"></a>
        <a class=" btn special-btn" aria-label="Javascript"><img src="./images/javascript.png" alt="javascript logo" title="Javascript"></a>
        <a class=" btn special-btn" aria-label="Python"><img src="./images/python.png" alt="python logo" title="Python 3.0"></a>
        <a class=" btn special-btn" aria-label="C"><img src="./images/c.png" alt="C-programming language logo" title="C programming language"></a>
        <a class=" btn special-btn" aria-label="C++"><img src="./images/cpp.png" alt="C++-programming language logo" title="C++ programming language"></a>
        <a class=" btn special-btn" aria-label="HTML5"><img src="./images/html5.png" alt="HTML5 logo" title="HTML5"></a>
        <a class=" btn special-btn" aria-label="CSS3"><img src="./images/css3.png" alt="css3 logo" title="CSS3"></a>

        <h2>Libraries/Frameworks</h2>

        <a class=" btn special-btn" aria-label="Bootstrap 5"><img src="./images/bootstrap.png" alt="bootstrap logo" title="Bootstrap 5"></a>
        <a class=" btn special-btn" aria-label="JQuery"><img src="./images/jquery.png" alt="jquery logo" title="JQuery"></a>
        <a class=" btn special-btn" aria-label="Node.js"><img src="./images/node-js.png" alt="node.js logo" title="Node.js"></a>
        <a class=" btn special-btn" aria-label="Express.js"><img src="./images/express.png" alt="express.js logo" title="Express.js"></a>
        <a class=" btn special-btn" aria-label="Maven"><img src="./images/apachemaven-svgrepo-com.svg" alt="apachemaven logo" title="apachemaven"></a>


        <h2>Databases/Cloud Services</h2>

        <a class=" btn special-btn" aria-label="MongoDB"><img src="./images/mongodb.png" alt="MongoDB logo" title="MongoDB"></a>
        <a class=" btn special-btn" aria-label="Heroku"><img src="./images/heroku.png" alt="heroku logo" title="Heroku"></a>

        <h2>Other Software Tools</h2>


        <a class=" btn special-btn" aria-label="Git"><img src="./images/git.png" alt="Git logo" title="Git"></a>
        <a class=" btn special-btn" aria-label="GitHub"><img src="./images/github.png" alt="GitHub logo" title="GitHub"></a>
        <a class=" btn special-btn" aria-label="Linux/Ubuntu"><img src="./images/ubuntu.png" alt="Ubuntu logo" title="Ubuntu/Linux"></a>
        <a class=" btn special-btn " aria-label="JSON"><img src="./images/json-file.png" alt="json logo" title="JSON"></a>
        <a class=" btn special-btn" aria-label="Hyper Terminal"><img src="./images/hyper.png" alt="hyper terminal logo" title="hyper terminal"></i></a>


      </div>
    </div>
  </section>

  <!-- Projects section -->
  <section id="projects" class="gradient-background promo text-secondary">
    <div class="container-fluid">
      <h1 class="load title text-white text-sm-start pb-5 ">Here are some of the projects I've worked on</h1>
      <div class="row row-cols-1 row-cols-md-3 g-4 load ">
        <div class="col">
          <div class="card border border-secondary">
            <div id="carouselExampleIndicators" class="carousel slide card-img-top" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="images/MediHelpI.PNG" class="d-block w-100" alt="MediHelpI">
                </div>
                <div class="carousel-item">
                  <img src="images/MediHelpII.PNG" class="d-block w-100" alt="MediHelpII">
                </div>
                <div class="carousel-item">
                  <img src="images/MediHelpIII.PNG" class="d-block w-100" alt="MediHelpIII">
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title">MediHelp</h5>
              <p class="card-text">My submission for the 2022 HeroHacksII hackathon. Full stack application designed to empower users by giving them the tools to understand and keep track of there medicines. Generates dynamic webpages using server
                side rendering
                with ejs templates, node.js, and the express library as the backend. Implements a database to keep track of user's medications using MongoDB and the mongoose library and relies on Boostrap 5 components/utility classes and custom css
                classes
                to style webpages. Searches for medical information using the puppeteer library (web-scraping) and uses express middle ware to collect and manage json data. Repository and a demo hosted on heroku are found below.</p>
              <div class="text-start">
                <a href="https://github.com/Schorcher5/MediHelp" class="btn btn-dark special-btn" aria-label="Github repo for medihelp"><i class="fa-brands fa-github fa-2xl"></i></a>
                <a href="https://herohackstwo-medihelp.herokuapp.com/home" class="btn btn-success " aria-label="Demo for medihelp"><i class="fa-solid fa-arrow-right position-static"></i> Demo</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card border border-secondary">
            <div id="carouselExampleIndicators" class="carousel slide card-img-top" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="images/JavaSudokuI.PNG" class="d-block w-100" alt="JavaSudokuI">
                </div>
                <div class="carousel-item">
                  <img src="images/JavaSudokuII.PNG" class="d-block w-100" alt="JavaSudokuII">
                </div>

              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title">Java Sudoku Game</h5>
              <p class="card-text">A desktop Sudoku application written entirely in Java using the JavaFX library and Maven as the project builder.
                Sudoku game is design to produce random puzzels that are solvable near 100% percent of the time and keeps track of user progress by writing to a local file.
                Project has been exported to jar file for public use and can be found in the output section of repository. Repository can be found below.</p>
              <div class="text-start">
                <a href="https://github.com/Schorcher5/SudokuJavaGame" class="btn btn-dark special-btn" aria-label="Github repo for java sudoku"><i class="fa-brands fa-github fa-2xl"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class=" mb-5 card border border-secondary">
            <div id="carouselExampleIndicators" class="carousel slide card-img-top" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="images/MathGameI.PNG" class="d-block w-100" alt="MathGameI">
                </div>
                <div class="carousel-item">
                  <img src="images/MathGameII.PNG" class="d-block w-100" alt="MathGameII">
                </div>
                <div class="carousel-item">
                  <img src="images/MathGameIII.PNG" class="d-block w-100" alt="MathGameIII">
                </div>
              </div>
            </div>
            <div class="card-body">
              <h5 class="card-title">Math Game</h5>
              <p class="card-text">A simple math game made in Python 3.0. Presents users with a series of arithmetic questions with goal of completing as many as you can within one minute.
                Verifies each answer and keeps track of all questions asked using a dictionary. Application is entirely console based and its repository can be found below.</p>
              <div class="text-start">
                <a href="https://github.com/Schorcher5/MathGame" class="btn btn-dark special-btn" aria-label="Github repo for math game"><i class="fa-brands fa-github fa-2xl"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Work expierince -->
  <section id="work-expierince" class="text-secondary">

    <div class="container-fluid">
      <h1 class="load title text-sm-start pb-5">Here is some of my previous work/volunteer expierince</h1>
      <div class="row-cols-1 row-cols-md-3 g-4 row load">
        <div class="col">
          <div class="card">
            <div class="card-header bg-success ">
              UFV: Computer Lab Monitor
            </div>
            <div class="card-body">
              <p class="card-text">Worked as one of UFV's computer lab monitors form September 2021 to December 2021. Assisted students with a variety of technical problems while ensuring that UFV's computer lab standards were being maintained.
                Resolved issues ranging from logical failures in project design to student conflict and aggression.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header bg-success">
              UFV: Classroom Liason
            </div>
            <div class="card-body">
              <p class="card-text">Served as the classroom liason for my comp 155(OOP) class from September 2021 to December 2021 where I faciliated communication between the professor and classmates through the use of social media.
                I also assisted students in problems involving object-oriented-design, git management, Linux commands, and other relevant course content.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header bg-success">
              UFV: Research Assistent
            </div>
            <div class="card-body">
              <p class="card-text">
                Worked as a research assistent under Dr. Russell Campbell for paper that was submited to the Siggraph during Febuary 2022.
                Responsibilities were to help maintain communication between reasearchers and audit references used in the paper.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- School -->
  <section id="school" class="gradient-background text-white promo">

    <div class="d-flex justify-content-center container-fluid row">
      <h1 class="load text-sm-start title pb-5">Education</h1>
      <div class="text col-lg-6 load load-left text-sm-start">
        <h2 class="title">University of Victoria (UVic) </h2>
        <h4>Bachelor of Science: Computer Science</h4>
        <h5>2022-2024</h5>
        <p>Succesfully transfered into the Bachelor of computer science at UVic. Intend to finish the rest of my degree at UVic with a co-op designation and a specialty in software systems.</p>
      </div>
      <div class=" col-lg-6 pb-5 ps-lg-5  load load-right text-sm-end">

        <img class="mw-100 rounded-3 border border-success" src="./images/uvic.jpg" alt="Picture of UVic">
        <h2><em>Entrace to UVic</em></h2>
      </div>
      <div class="text col-lg-6 load load-left text-sm-start">
        <h2 class="title">University of the Fraser Valley (UFV)</h2>
        <h4>Bachelor of Science: Computer Science </h4>
        <h5>2019-2021</h5>
        <p >UFV is where I started my post-secondary journey. I originally started out in the Bachelor of arts majoring in psychology but had a change of heart and switched over to the sciences.
        Have been a consistent member of the dean's list and wil be leaving the university this summer with a 3.8 gpa (4.33 scale).</p>
      </div>
      <div class=" col-lg-6 pb-5 ps-lg-5  load load-right text-sm-end">

        <img class="mw-100 rounded-3 border border-success" src="./images/UFV.jpg" alt="Picture of UFV">
        <h2 class=><em>Building K on the UFV campus</em></h2>
      </div>

    </div>
  </section>

  <!-- Extra-Stuff -->
  <section id="extra-stuff" class="text-secondary">

    <div class="container-fluid">
      <h1 class="load text-sm-start title pb-5">Some of my hobbies</h1>
      <div class="row row-cols-1 row-cols-md-3 g-4 load ">
        <div class="col">
          <div class="card">
            <img src="./images/LeetCodeProfile.PNG" class="card-img-top" alt="Leetcode profile">
            <div class="card-body">
              <h5 class="card-title">Leetcode</h5>
              <p class="card-text">Solving questions on leetcode is something I have come to do on a semi regular basis. It started out as me trying to get
              some practice for interview type questions and has become something almost like a puzzle game to me. Trying to come up with solutions to problems I could never come up with my self
             is something I find quite rewarding and akin to trying to solve a sudoku puzzle.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="./images/VideoGames.PNG" class="card-img-top" alt="Picture of videogames">
            <div class="card-body">
              <h5 class="card-title">Video Games</h5>
              <p class="card-text">Ever since I was little, I have been playing videogames semi regularely. I enjoy playing strategy games and rpgs like EU4 and the Witcher 3 which are some of my all time favorite games.
              I hope to eventually get arround to playing and finishing up Persona 5 and Breath of the Wild when I get the time to do so.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="./images/anime.jpg" class="card-img-top" alt="AOT background image">
            <div class="card-body">
              <h5 class="card-title">Anime/Weeb stuff</h5>
              <p class="card-text">I have been a huge fan of anime and things withen the same spectrum of media ever since I watched Naruto and Dragonball when I was 10 years old.
             From intense thrillers like Attack On Titan to simple slice of life shows like 3-gatsu-no-lion, I always seem to find a new way to enjoy the medium and nowadays, I am into reading manga. </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="./images/History.jpg" class="card-img-top" alt="Image of a globe">
            <div class="card-body">
              <h5 class="card-title">History</h5>
              <p class="card-text">I have always been a huge nerd for history, especially for modern and Roman history.
              I once even considered becoming a history major and trying to find a job like that in the field(though I gave up on that when I realized how many papers I would have to write).</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="./images/spanish.jpg" class="card-img-top" alt="AOT background image">
            <div class="card-body">
              <h5 class="card-title">Spanish Speaker</h5>
              <p class="card-text">I am a intermediate spanish speaker and have been studying the subject for over two years now. I regularely speak to my parents using spanish since we were all born in Argetina (Buenos Aires).</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact-Me -->
  <section id="contact" class="gradient-background text-white">
    <div class="container-fluid row">
      <div class="home-text col-sm-6 text-sm-start">
        <h1 class="home-title">Want to get in touch?</h1>
        <p class="home-description">Whether for professional reasons or just to talk about a project/programming,
          I am always availble to talk over my linkedin,devpost,or my github acount.
        </p>
        <div class="">
          <a href="https://www.linkedin.com/in/joaquin-cisneros-271256225/" class="icon-button btn special-btn" title="linkedin account" aria-label="linkedin"><i class="fa-brands fa-linkedin fa-2xl"></i></a>
          <a href="https://github.com/Schorcher5?tab=stars" class="btn icon-button special-btn" title="github account" aria-label="github"><i class="fa-brands fa-github fa-2xl"></i></a>
          <a href="https://devpost.com/Schorcher5?ref_content=user-portfolio&ref_feature=portfolio&ref_medium=global-nav" class="btn icon-button special-btn" title="devpost account" aria-label="devpost"><i class="fa-solid fa-code fa-xl"></i></a>
        </div>

        <div class="btn bg-white"><i class="fa-brands fa-canadian-maple-leaf fa-xl position-static"></i> Abbotsford BC, Canada</div>

      </div>
      <div class="home-gif col-sm-6">
        <img class="img-thumbnail" src="./images/profilePicture.jpg" alt="My picture">
      </div>
    </div>
  </section>

  <!-- Scripts for scrolling fade -->
  <script type="text/javascript" src="javascript/navbarScript.js">
  </script>
  <script type="text/javascript" src="javascript/fadeScript.js">
  </script>
</body>

</html>