old-website/index.html at master · tiffclee/old-website · 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
<!--color scheme: https://coolors.co/d87a65-e7ad99-373d20-717744-766153-->
<!DOCTYPE html>
<html>

  <head>
    <title>
    Tiffany's Portfolio!
    </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link rel="icon"
      type="image/jpg"
      href="./Website/boba.jpg">
  </head>

  <body>
    <h1>TIFFANY LEE</h1>

    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'Welcome')" id="defaultOpen">Welcome</button>
      <button class="tablinks" onclick="openCity(event, 'Coding')">Coding</button>
      <button class="tablinks" onclick="openCity(event, 'Design')">Design</button>
      <button class="tablinks" onclick="openCity(event, 'Photography')">Photography</button>
      <button class="tablinks" onclick="openCity(event, 'Calligraphy')">Calligraphy</button>
      <button class="tablinks" onclick="openCity(event, '3DPrinting')">3D Printing</button>
      <button class="tablinks" onclick="openCity(event, 'Resume')">Resume</button>
      <button class="tablinks" onclick="openCity(event, 'Coursework')">Coursework</button>

      <div id="Welcome" class="tabcontent">
        <br><br>
        <h3 style="font-size:300%">Welcome to my website.</h3>
        <img src="./Website/penguin.png" alt="drawn penguin picture" width="500">
      </div>

      <div id="Coding" class="tabcontent">
        <br><br>
        <h3>Coding</h3>
        <p>
          Check out my GitHub and Devpost!<br><br>
          <a href="https://github.com/tiffclee"><img src="./Website/github.jpg" alt="GitHub" width="100"></a>
          <a href="https://devpost.com/tiffclee"><img src="./Website/devpost.jpg" alt="Devpost" width="100"></a></p>
        <br>
        <br>
        <div style="float: center">
            <div style="padding: 20px; float: center; width: 460px; display: table-cell;">
                <img src="./Website/uclaslack.png" alt="UCLA Slack" width="300">
                <div style="float: center; width: 400px; padding: 10px"><p>• Worked with UCLA Campus IT to connect UCLA’s authentication system to Slack’s SCIM REST API for mass user and group provisioning, allowing over 40,000 students to communicate with peers for remote learning.<br>• Python, REST API, Git, Postman</p></div>
            </div>
            <div style="padding: 20px; float: center; width: 460px; display: table-cell;">
                <img src="./Website/mnuapp.jpeg" alt="mnu app" width="300">
                <div style="float: center; width: 400px; padding: 10px"><p>• Developed JSON back-end web tool for testing and data analytics for a web application for contactless menus and ordering during COVID-19 pandemic.<br>• Implemented controllers to handle and validate requests to the SQL database, allowing front-end and back-end to work seamlessly together.<br>• React, Node.js, SQL, JSON</p></div>
            </div>
        </div>
        <div style="float: center">
            <div style="padding: 20px; float: center; width: 460px; display: table-cell;">
                <iframe width="250" height="400" src="https://www.youtube.com/embed/0iYl3tW__zM" frameborder="0" allow="accelerometer; mute; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div style="float: center; width: 400px; padding: 10px"><p>• Home Sweet Home is an application for sharing chores and tasks between apartment mates and roommates can coordinate chores and groceries through this application.<br>• React Native, Google APIs</p></div>
            </div>
            <div style="padding: 20px; float: center; width: 460px; display: table-cell;">
                <iframe width="250" height="400" src="https://www.youtube.com/embed/N3p51qNartI" frameborder="0" allow="accelerometer; mute=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div style="float: center; width: 400px; padding: 10px"><p>MyCar is an application for car owners to have all their information at the convenience of their phone.<br>MyCar provides parking locating services and connects to the car to supply up-to-date maintenance information about their car.<br>• React Native</p></div>
            </div>
        </div>
        <div style="float: center">
            <div style="padding: 20px; float: center; width: 460px; display: table-cell">
                <iframe width="250" height="400" src="https://www.youtube.com/embed/CEQBejW5v7Y" frameborder="0" allow="accelerometer; mute; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div style="float: center; width: 400px; padding: 10px"><p>Compass provides a convenient and quick experience for travelers and with our simple UI, travelers can create a hassle-free itinerary to provide the best trip.<br>• React Native</p></div>
            </div>
        </div>
        <br><br>
      </div>

      <div id="Design" class="tabcontent">
        <br><br>
        <h3>Design</h3>
        These are some designs I have made from high school to college. Enjoy!
        <br>
        <br>
        <img src="./Website/acmdiscord.png" alt="ACM Discord branding" width="600">
        <br><p>These are the Discord banners I did for ACM at UCLA.<br>Left are the original banners I made based off the styleguide.<br>
        ACM then rebranded and the banners on the right follow the new styleguide.</p><br>
        <img src="./Website/acmdiscordig.png" alt="ACM Discord IG" width="300">
        <img src="./Website/3d4egraphic.png" alt="Multivariable Shirt" width="300">
        <br><p>Left: Instagram graphic I designed to advertise ACM at UCLA's Discord server.<br>Right: Instagram graphic I made to advertise 3D4E at UCLA, a 3D printing club.</p><br>
        <img src="./Website/jumpshirt.jpg" alt="Jumps Team Shirt" width="300">
        <img src="./Website/multivariableshirt.png" alt="Multivariable Shirt" width="300">
        <br><p>Left: Jumps team shirt I created for my track jumps team in high school<br>Right: Class shirt I created for my multivariable class in high school</p><br>
        <img src="./Website/cerritosmun.jpg" alt="Cerritos MUN Shirt" width="300">
        <img src="./Website/anothercerritosmun.jpg" alt="Another Cerritos MUN Shirt" width="300">
        <br><p>Two variations of shirt designs I created for my Model United Nations club in high school</p>
        <br>
        <img src="./Website/itbelikethatsometimes.jpg" alt="It Be Like That Sometimes Shirt" width="300">
        <img src="./Website/3d4eboardshirt.jpg" alt="3D4E Board Shirt" width="300">
        <br><p>Designed and printed shirts myself<br>
          Calligraphy was written by me <br>
        Left was for a personal project and right was for my 3D printing club board</p>
        <br>
        <img src="./Website/wattspot1.jpg" alt="Wattspot Advertisement" width="300">
        <img src="./Website/wattspot2.jpg" alt="Wattspot Advertisement 2" width="300">
        <br><p>Created visual advertisements for Wattspot, a fake portable battery brand,<br>for my product project in high school </p>
        <br>
        <img src="./Website/wattspotlogo.jpg" alt="Wattspot Logo" width="300">
        <img src="./Website/compasslogo.png" alt="Compass App Logo" width="300">
        <br><p>Left: Wattspot Logo<br>Right: Compass Logo</p>
        <br>
        <img src="./Website/homesweethomelogo.png" alt="Home Sweet Home App Logo" width="300">
        <img src="./Website/syplogo.jpg" alt="Syp Logo" width="300">
        <br>
        <p>Left: Home Sweet Home logo<br>Right: Syp logo</p><br>
        <img src="./Website/exercisehifimockup.png" alt="Exercising App Hi-Fi Mockup" width="300">
        <img src="./Website/compasssplashscreen.png" alt="Compass App Splash Screen" width="300">
        <br>
        <p>Left: Calendar screen for user interface design project<br>
        Right: Splash screen for Compass mobile application</p><br>
        <img src="./Website/carapphomescreen.png" alt="Car App Home Screen" width="300">
        <img src="./Website/homesweethomehomescreen.png" alt="Home Sweet Home App Home Screen" width="300">
        <br>
        <p>Left: Home screen for MyCar application<br>
        Home screen for Home Sweet Home application</p>
        <br><br>
      </div>


      <div id="Calligraphy" class="tabcontent">
        <br><br>
        <h3>Calligraphy</h3>
        I started my calligraphy journey in high school and this is my progress so far.
        <br><br>
        <img src="./Website/happybdaycalligraphy.jpg" alt="Happy Birthday Calligraphy" width="400">
        <img src="./Website/merryxmascalligraphy.jpg" alt="Merry Christmas Calligraphy" width="400">
        <img src="./Website/mynotebook.jpg" alt="My Notebook Design" width="400">
        <img src="./Website/happymothersday.jpg" alt="Happy Mother's Day Card" width="400">
        <br><br>
      </div>

      <div id="Photography" class="tabcontent">
        <br><br>
        <h3>Photography</h3>
        <p>All these photos are taken with my Nikon D5600.</p>
        <img src="./Website/pic1.jpg" alt="Drinking coffee" width="600">
        <img src="./Website/jenniferstring.jpg" alt="Entangled" width="600">
        <img src="./Website/sasha.jpg" alt="At rest" width="600">
        <img src="./Website/pic2.JPG" alt="Droplet on a lilypad" width="600"><br>
        <img src="./Website/pic5.JPG" alt="Hopes and Dreams" width="300">
        <img src="./Website/pic6.JPG" alt="Pride" width="300">
        <img src="./Website/jenniferoutside.jpg" alt="In the wild" width="600">
        <img src="./Website/pic3.jpg" alt="Ice Cream" width="600">
        <img src="./Website/kaiser.jpg" alt="Happiness" width="600">
        <img src="./Website/pic4.JPG" alt="SF" width="600">
        <img src="./Website/jenniferwindow.jpg" alt="Hope" width="600">

        <br><br>
      </div>

      <div id="3DPrinting" class="tabcontent">
        <br><br>
        <h3>3D Printing</h3>
        <p>These are some designs I made while learning how to CAD in Fusion 360.</p>
        <img src="./Website/queenchess.png" alt="Queen Chess Piece" width="400">
        <img src="./Website/kingchess.png" alt="King Chess Piece" width="400">
        <img src="./Website/bishopchess.png" alt="Bishop Chess Piece" width="400">
        <img src="./Website/knightchess.png" alt="Knight Chess Piece" width="400">
        <br><p>To familiarize myself with Autodesk Fusion 360, I designed all the chess pieces.<br>Above are the king, queen, bishop, and knight.</p><br><br>
        <img src="./Website/custommakeuporganizer.png" alt="Custom Makeup Organizer" width="800"><br><p>I created a makeup organizer that is curated for my makeup collection.</p><br>
        <br><br>
      </div>

      <div id="Resume" class="tabcontent">
        <br><br>
        <h3>Resume</h3>
        <p>Here is my most updated resume.</p>
        <iframe src="./Website/resume.pdf#toolbar=0" width="100%" height="1050px"></iframe>
        <br><br>
      </div>

      <div id="Coursework" class="tabcontent">
        <br><br>
        <h3>Relevant Coursework</h3>
        <p>These are the relevant coursework I've taken so far at UCLA.</p>
        <br>
        <h4>CS 32: Introduction to Data Structures</h4>
        <p class="text"><br>C++<br>Object Oriented Programming<br>Data Abstraction<br>STL Library<br>Inheritance and Polymorphism<br>Object-Oriented Design<br>Sorting<br>Recursion<br>Big O<br><br></p>

        <h4>CS 33: Introduction to Computer Architecture</h4>
        <p class="text"><br>Computer Architecture<br>Assembly Language<br>Operating System Fundamentals<br>Number systems<br>Procedure Calls<br>Stacks<br>Interrupts and traps<br>Assemblers, Linkers, and Loaders, Process management<br><br></p>

        <h4>CS 35L: Software Construction Laboratory</h4>
        <p class="text"><br>Unix system layout<br>Emacs<br>Commands and Basic Scripting<br>Python Introduction<br>Makefiles<br>C Compilation and Linking<br>Faults, Failures, Errors<br>Security threatds<br>Advanced Change Management<br>Git<br><br></p>

        <h4>CS M51A: Logic Design of Digital System</h4>
        <p class="text"><br>Verilog<br>Boolean Algebra<br>Combinational Logic Design<br>Arithmetic and Numbers<br>Sequential Logic Design<br><br></p>

        <h4>CS 88S: Human Centered Design</h4>
        <p class="text"><br>Product Design Principles<br>Design Choices<br>UI Interfaces<br>Mockups and Wireframes<br><br></p>

        <h4>CS 111: Operating System</h4>
        <p class="text"><br>OS Layers<br>Processes<br>Scheduling<br>Memory Management<br>Multithreading<br>Interprocess Communication<br>Semaphores<br>Synchronization<br>Performance Metrics<br>I/O Architecture<br>File Semantics<br>OS Security<br>Distributed Systems<br>Virtual Machines<br><br></p>

        <h4>CS 118: Computer Network</h4>
        <p class="text"><br>Fall 2020 class<br><br></p>

        <h4>CS 131: Programming Languages</h4>
        <p class="text"><br>Functional Programming<br>Logic Programming<br>Syntax and Semantics<br>Type Systems<br>Runtime Systems<br><br></p>

        <h4>CS 174A: Computer Graphics</h4>
        <p class="text"><br>Fall 2020 class<br><br></p>

        <h4>CS 180: Algorithms and Compexlity</h4>
        <p class="text"><br>Matching Algorithm<br>Greedy Algorithm<br>Depth First Search and Breadth First Search<br>Dijkstra<br>Minimum Spanning Tree<br>Clustering<br>Kruskal<br>Dynamic Programming<br>Ford Fulkerson Algorithm<br>NP Complete<br><br></p>

        <h4>E96C: Internet of Things</h4>
        <p class="text"><br>Hands on project with IoT applications and technology<br><br></p>

        <h4>Math 33A: Linear Algebra</h4>
        <p class="text"><br>System of Linear Equations<br>Matrix Algebra<br>Linear Independence<br>Subspaces<br>Eigenvalues and Eigenvectors<br>Matrix Diagonalizatin<br><br></p>

        <h4>Math 61: Discrete Algebra</h4>
        <p class="text"><br>Sets and Relations<br>Permutations and Combinations<br>Graphs and Trees<br>Induction<br><br></p>

        <h4>Stats 10: Introduction to Statistical Reasoning</h4>
        <p class="text"><br>Visualizing Data<br>Regression Analysis<br>Probability<br>Survey Sampling and Inference<br>Hypothesis Testing<br>Inference for Population Means<br><br></p>

        <br><br>
      </div>
    </div>
    <div id="bottom"><br>website designed and coded by Tiffany Lee (me!)<br><br><br></div>

    <script>
      document.getElementById("defaultOpen").click();


      function openCity(evt, cityName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
      }
    </script>

    </body>

</html>

<!--
comment!!
-->