alanreviews.github.io/portfolio.html at main · AlanReviews/alanreviews.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
<!DOCTYPE html>
<html lang="en">
<style>
  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }

  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }

  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  h2 {
      text-align: center;
  }
  p {
      text-align: center;
  }

  ul {
        text-align: center;
        list-style-position: inside;
  }
</style>
<script src="javascript/dropdown.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<header>
  <h1>Alan Zhou</h1>
  <nav>
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="experience.html">Experience</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Social Media</a></li>
      <ul>
  </nav>
</header>
<body>
  <h1>Portfolio</h1>
  <p>Here is my portfolio, showcasing my artwork, videos, and photography!</p>
  <ul>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#artwork">Artwork</a></li>
    <li><a href="#photography">Photography</a></li>
    <li><a href="#figma">Figma</a></li>
  </ul>
  <div id="projects">
  <h1>Projects</h1>
  <h2>Veloren and Rust Review</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/zh9_HldWFnM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  <p>Personal Project | August 2022 - October 2022</p>
  <ul>
    <li>Learned about the Rust programming language to learn about its features</li>
    <li>Performed research on Veloren and the Rust programming language to explain how Rust and Veloren works</li>
    <li>Created the thumbnail with <a href="https://www.gimp.org/">GNU Image Manipulator Program</a></li>
    <li>Created a YouTube video about Veloren and the Rust programming language with <a href="https://www.openshot.org/">OpenShot Video Editor</a> and <a href="https://obsproject.com/">Open Broadcast Software (OBS)</a></li>
  </ul>
  <h2>Goblet of Fire</h2>
  <img src="images/GobletofFire.jpg" alt="An image of the Goblet of Fire. Image credit: Thorsten Bonsch">
  <p>Personal Project | April 2020</p>
  <ul>
    <li>Developed a C++ program to draw out participants from an array to recreate the Goblet of Fire algorithm</li>
    <li>Drew a UML diagram to highlight the entity relationships and strucutre of the program</li>
    <li>Click <a href="https://github.com/AlanReviews/Goblet-of-fire">here</a> to see my project</li>
  </ul>
  <h2>Raspberry Pi Serial Console Server</h2>
  <p>Fidus Systems Inc, Ottawa, Ontario | April 2019 - May 2019</p>
  <iframe title="How to Build a Raspberry Pi Serial Console Server" src="https://www.youtube.com/embed/jU-xL-v-X28" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
  <ul>
    <li>Solved a real-world problem of providing serial connections to multiple boards from a remote computer</li>
    <li>Implemented an innovative solution of using a Raspberry Pi board as a serial console server or gateway to multiple boards</li>
    <li>Created a YouTube video to communicate the steps of creating a serial console server with a Raspberry Pi</li>
  </ul>
  <h2>Porting MicroPython into an STM32 Board</h2>
  <p>Fidus Systems Inc, Ottawa, Ontario | April 2019</p>
  <ul>
    <li>Ported MicroPython to an STM32-based board</li>
    <li>Demonstrated black-box testing by running Python scripts on the STM32 board</li>
    <li>Developed documentation to communicate the porting steps</li>
    <li>Click <a href="https://github.com/AlanReviews/Building-And-Flashing-MicroPython-into-a-STM32-Board">here</a> to see my project</li>
  </ul>
  <h2>Grid-based Mesh Simplification</h2>
  <img src="images/GeomprocMeshes.png" alt="A slide that consist of simplified meshes.">
  <p>Carleton University | November 2024 - December 2024</p>
  <p>I simplified meshes using a grid-based mesh simplification algorithm in a Geometry Processing course. I implemented the algorithm in Python. I used Blender and Meshlab to examine the results.
    The simplified mesh has fewer faces and looks like it is made out of voxels. From my observation, new holes are made in some meshes such as the bunny mesh.
  </p>
  </div>
  <div id="artwork">
  <h1>Artwork</h1>
  <div class="row">
    <div class="column">
      <img src="https://alanreviews.github.io/images/GhostHouse.jpg" alt="I photoshopped a ghost image onto a house">
      <img src="images/FlyingCircus.jpg" alt="I photoshopped a ghost image onto a circus">
      <img src="images/GERM1020 T-shirt.jpg" alt="I drew drawings on a German T-shirt with friends">
    </div>
    <div class="column">
      <img src="images/PygameCar.jpg" alt="I created a Pygame car with shapes">
      <img src="images/Maze1.png" alt="A linked-list maze that I created with C">
      <img src="images/My Python Triangle.JPG" alt="I created this Python triangle with Pygame">
    </div>
  </div>
</div>
<div id="photography">
  <h1>Photography</h1>
  <div class="row">
    <div class="column">
      <img class="img-responsive" src="images/Alex Gaming PC.jpg" alt="A Gaming PC with RGB lighting">
      <img class="img-responsive" src="images/Lake.jpg" alt="A lake">
      <img class="img-responsive" src="images/Ubuntu18.04 on Lenovo.jpg" alt="I installed Ubuntu 18.04 on my laptop">
    </div>
    <div class="column">
      <img class="img-responsive" src="images/MyGamingPC.jpg" alt="My Gaming PC">
      <img class="img-responsive" src="images/Lenovo_T450_Setup.jpg" alt="My work setup with a Lenovo T450 laptop and Dell 24 inch monitor">
    </div>
  </div>
</div>
  <div id="figma">
  <h1>Figma</h1>
  <p style="text-align:justify;">Here is a user interface prototype of the Heartwave Monitor, created in Figma. This prototype was developed to design and plan the user interface for a group project. Red, blue, and green rectangles represent the coherence levels. The white screen represents the screen that displays the HRV graph and battery life. The black rectangle represents the battery life.
  </p>
  <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="500" src="https://embed.figma.com/design/HEHy1STZQ7nzxGsDL4EQRj/COMP-3004-UI-prototype?node-id=102-2&embed-host=share" allowfullscreen></iframe>
  </div>
</body>
</html>