Skip to content

Commit 2ddcfc7

Browse files
Mireille-TMireille-T
committed
Include jQuery + bug fixes
1 parent 42cc56b commit 2ddcfc7

6 files changed

+99
-38
lines changed

‎3dmodels.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
1414
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
1515
crossorigin="anonymous"></script>
16+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1617
<script src="script.js"></script>
1718
</head>
1819

@@ -71,7 +72,8 @@ <h1>3D Models</h1>
7172
</p>
7273
</div>
7374
<div class="col-lg-5">
74-
<img id="modelIllustration" src="media/3dmodel_illustration.svg" width="100%" alt="3D modelling illustraton">
75+
<img id="modelIllustration" src="media/3dmodel_illustration.svg" width="100%"
76+
alt="3D modelling illustraton">
7577
</div>
7678
</div>
7779
</div>
@@ -90,7 +92,8 @@ <h1>3D Models</h1>
9092
</div>
9193
<div id="galleryCarousel" class="carousel-inner center-el">
9294
<div class="carousel-item active" data-bs-interval="0">
93-
<img src="media/Blender-Teahouse.png" alt="3D render of a Chinese tea set" class="d-block w-100 galleryImg">
95+
<img src="media/Blender-Teahouse.png" alt="3D render of a Chinese tea set"
96+
class="d-block w-100 galleryImg">
9497
<div class="carousel-caption d-none d-md-block carousel-gallery-caption center-el">
9598
<h5>"Teahouse" (22/12/2021)</h5>
9699
</div>
@@ -227,4 +230,4 @@ <h5>"Wagashi" (06/10/2020)</h5>
227230
</footer>
228231
</body>
229232

230-
</html>
233+
</html>

‎aboutMe.html

+47-7
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
1414
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
1515
crossorigin="anonymous"></script>
16+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1617
<script src="script.js"></script>
1718
</head>
1819

@@ -66,7 +67,8 @@
6667
<div class="row g-5">
6768
<div class="col-lg-7">
6869
<h1>About Me</h1>
69-
<p>Hello! I am a graduate from Raffles Institution and a <span class="yellow-text">Gold Microsoft
70+
<p>Hello! I am a Singaporean graduate from Raffles Institution and a <span class="yellow-text">Gold
71+
Microsoft
7072
Learn Student Ambassador</span>, who plans on studying <span class="yellow-text">Computer
7173
Science</span> in
7274
university. A <span class="yellow-text">self-motivated learner</span>, I make the most out of
@@ -185,6 +187,42 @@ <h2>Languages</h2>
185187
<div class="container">
186188
<h1 id="journey">My Journey</h1>
187189
<br>
190+
<div class="row">
191+
<div class="col-md-12 col-lg-3">
192+
<img src="media/Tinkercademy_Icon.png" alt="Tinkercademy Logo" class="journeyIcon">
193+
</div>
194+
<div class="col-md-12 col-lg-9" id="left-text">
195+
<h2>Internship at Tinkertanker Pte. Ltd.</h2>
196+
<h3>Nov 2020 - Dec 2020, Jan 2022 - Present</h3>
197+
<span id="break"></span>
198+
<p>As an intern at Tinkertanker Pte. Ltd., and specifically their tecnology education branch
199+
Tinkercademy, I have fun completing a wide variety of tasks. From fabricating with a laser
200+
cutter to developing curriculum for various technologies, I highly value each and every
201+
opportunity I have to learn something new here!</p>
202+
<span id="break"></span>
203+
<h3>Notable activities:</h3>
204+
<ul>
205+
<li>Used TypeScript to make company MakeCode extensions compatible with the micro:bit v2</li>
206+
<li>Researched on WebVR with A-Frame and Edge Impulse for AI integration with micro:bit v2 for
207+
curriculum development</li>
208+
<li>Assisted with curriculum for Game Development in Unity (C# and Bolt Visual Scripting)</li>
209+
<li>Designed hamper tags and decoration for the 2020 Christmas sale in Inkscape</li>
210+
<li>Wrote two articles for the Tinkercademy Build Log
211+
<ul>
212+
<li><a href="https://blog.tinkercademy.com/returning-to-re-intern-at-tinkertanker-2de013324042"
213+
target="_blank">Re-interning at Tinkertanker</a></li>
214+
<li><a href="https://blog.tinkercademy.com/3d-printing-thrills-and-tribulations-6bd887f29ce4"
215+
target="_blank">3D Printing: Thrills and Tribulations</a></li>
216+
</ul>
217+
</li>
218+
</ul>
219+
</div>
220+
</div>
221+
</div>
222+
<br>
223+
<hr id="divider-hr-overwrite" class="center-el">
224+
<br>
225+
<div class="container">
188226
<div class="row">
189227
<div class="col-md-12 col-lg-3">
190228
<img src="media/MLSA_Badge.png" alt="Microsoft Learn Student Ambassadors Program badge"
@@ -247,7 +285,7 @@ <h3>2020 - 2021</h3>
247285
<h3>Notable honours / distinctions:</h3>
248286
<ul>
249287
<li>Edusave Award for Achievement, Good Leadership and Service (2022)</li>
250-
<li>Lee Kuan Yew Award for Mathematics and Science (2020)</li>
288+
<li><span class="yellow-text">Lee Kuan Yew Award for Mathematics and Science (2020)</span></li>
251289
<li>Spanish Language Elective Scholarship (2020 - 2021)</li>
252290
</ul>
253291
</div>
@@ -276,12 +314,14 @@ <h3>2016 - 2019</h3>
276314
<span id="break"></span>
277315
<h3>Notable honours / distinctions:</h3>
278316
<ul>
279-
<li>Dorothy Buckle Top Mathematics and Science Award (2020)</li>
280-
<li>KS Goh New Media & Technology Award (2019)</li>
317+
<li><span class="yellow-text">Dorothy Buckle Top Mathematics and Science Award (2020)</span>
318+
</li>
319+
<li><span class="yellow-text">KS Goh New Media & Technology Award (2019)</span></li>
281320
<li>Edusave Character Award (2019)</li>
282321
<li>Singapore Young Physicists' Tournament - 1st Runners-up (2019)</li>
283-
<li>RoboCupJunior OnStage League World Finals in Montréal - SuperTeam Champions, Best OnStage
284-
Performance (2018)</li>
322+
<li><span class="yellow-text">RoboCupJunior OnStage League World Finals in Montréal - SuperTeam
323+
Champions, Best OnStage
324+
Performance (2018)</span></li>
285325
<li>Top in Year 3 Mathematics (2018)</li>
286326
</ul>
287327
</div>
@@ -301,4 +341,4 @@ <h3>Notable honours / distinctions:</h3>
301341
</footer>
302342
</body>
303343

304-
</html>
344+
</html>

‎index.html

+22-12
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
1515
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
1616
crossorigin="anonymous"></script>
17+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1718
<script src="script.js"></script>
1819
</head>
1920

@@ -99,7 +100,8 @@ <h1>About Me</h1>
99100
<img id="profilePicture" src="media/profile.jpg" alt="Mireille Tan" width="90%">
100101
</div>
101102
<div class="col-lg-8">
102-
<p>Hello! I am a graduate from Raffles Institution and a <span class="yellow-text">Gold Microsoft
103+
<p>Hello! I am a Singaporean graduate from Raffles Institution and a <span class="yellow-text">Gold
104+
Microsoft
103105
Learn Student Ambassador</span>, who plans on studying <span class="yellow-text">Computer
104106
Science</span> in
105107
university. A <span class="yellow-text">self-motivated learner</span>, I make the most out of
@@ -114,8 +116,10 @@ <h1>About Me</h1>
114116
</p>
115117
</div>
116118
</div>
117-
<a href="aboutMe.html#skills"><button type="button" class="moreButton">My Skills <i class="fas fa-arrow-right"></i></button></a>
118-
<a href="aboutMe.html#journey"><button type="button" class="moreButton">My Journey <i class="fas fa-arrow-right"></i></button></a>
119+
<a href="aboutMe.html#skills"><button type="button" class="moreButton">My Skills <i
120+
class="fas fa-arrow-right"></i></button></a>
121+
<a href="aboutMe.html#journey"><button type="button" class="moreButton">My Journey <i
122+
class="fas fa-arrow-right"></i></button></a>
119123
</div>
120124
</div>
121125
<br>
@@ -144,21 +148,26 @@ <h5><i class="fab fa-youtube"></i> YouTube: <a
144148
target="_blank">@Elly</a></h5>
145149
</div>
146150
<div class="col-lg-4">
147-
<h5><i class="fab fa-twitter"></i>&ensp;Twitter: <a href="https://twitter.com/EllyOrg"
148-
target="_blank">@EllyOrg</a></h5>
151+
<h5><i class="fab fa-twitter"></i>&ensp;Twitter: <a
152+
href="https://twitter.com/EllyOrg" target="_blank">@EllyOrg</a></h5>
149153
</div>
150154
</div>
151155
</div>
152-
<p class="card-text">Presently, together with 4 other Microsoft Learn Student Ambassadors, I am part of a
153-
global development team of Elly - a browser extension that uses Computer Vision to generate alt text for
154-
images on Twitter. As a backend developer, I used JavaScript to make several API calls with Axios to add
155-
features for an accessibility checker. Additionally, I translated the frontend of the extension
156+
<p class="card-text">Presently, together with 4 other Microsoft Learn Student Ambassadors, I
157+
am part of a
158+
global development team of Elly - a browser extension that uses Computer Vision to
159+
generate alt text for
160+
images on Twitter. As a backend developer, I used JavaScript to make several API calls
161+
with Axios to add
162+
features for an accessibility checker. Additionally, I translated the frontend of the
163+
extension
156164
popup from Figma to HTML and CSS.</p>
157165
<h6>Skills used: JavaScript, HTML, CSS, GitHub, Azure</h6>
158166
</div>
159167
</div>
160168
</div>
161-
<a href="projects.html"><button type="button" class="moreButton">Check out more of my projects beyond web development <i class="fas fa-arrow-right"></i></button></a>
169+
<a href="projects.html"><button type="button" class="moreButton">Check out more of my projects beyond
170+
web development <i class="fas fa-arrow-right"></i></button></a>
162171
</div>
163172
</div>
164173
</div>
@@ -175,7 +184,8 @@ <h1>3D Models</h1>
175184
Sorry, but your browser does not support the video tag. Access the video <a
176185
href="media/Blender-Sony_A7C.mp4" target="_blank">here</a> instead.
177186
</video>
178-
<a href="3dmodels.html"><button type="button" class="moreButton">Check out more of my 3D models in Blender <i class="fas fa-arrow-right"></i></button></a>
187+
<a href="3dmodels.html"><button type="button" class="moreButton">Check out more of my 3D models in
188+
Blender <i class="fas fa-arrow-right"></i></button></a>
179189
</div>
180190
</div>
181191
</div>
@@ -193,4 +203,4 @@ <h1>3D Models</h1>
193203
</footer>
194204
</body>
195205

196-
</html>
206+
</html>

‎media/Tinkercademy_Icon.png

86.6 KB
Loading

‎projects.html

+8-4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
1515
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
1616
crossorigin="anonymous"></script>
17+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1718
<script src="script.js"></script>
1819
</head>
1920

@@ -67,11 +68,14 @@
6768
<div class="row g-5">
6869
<div class="col-lg-7">
6970
<h1>Projects</h1>
70-
<p>Here are some of the key projects that I have worked on. Even if they may not be perfect, these are the
71-
projects where I feel that I have exhibited my skills, displayed my passions and learnt a lot from!</p>
71+
<p>Here are some of the key projects that I have worked on. Even if they may not be perfect, these
72+
are the
73+
projects where I feel that I have exhibited my skills, displayed my passions and learnt a lot
74+
from!</p>
7275
</div>
7376
<div class="col-lg-5">
74-
<img id="projectsIllustration" src="media/projects_illustration.svg" width="100%" alt="Painter illustraton">
77+
<img id="projectsIllustration" src="media/projects_illustration.svg" width="100%"
78+
alt="Painter illustraton">
7579
</div>
7680
</div>
7781
</div>
@@ -255,4 +259,4 @@ <h6>Skills used: Inkscape, GIMP</h6>
255259
</footer>
256260
</body>
257261

258-
</html>
262+
</html>

‎script.js

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
var toTopButton;
22
var upArrow;
33
var downArrow;
4-
var rotatingText;
54
var rotatingTextList = ["code!", "tinker!", "3D model!", "solve puzzles!", "learn!"];
65
var rotatingImageSrc = ["media/coder_illustration.svg", "media/construction_illustration.svg", "media/3dmodel_illustration.svg", "media/quiz_illustration.svg", "media/learn_illustration.svg"];
76
var rotatingImageAlt = ["Coder illustration", "Construction illustration", "3D modelling illustration", "Problem-solving illustration", "Studying illustration"];
87
var toggleAnimation;
9-
var landingImage;
108
var counter = 0;
119
var animationOn = true;
1210

1311
window.addEventListener('load', (event) => {
1412
toTopButton = document.getElementById("btn-back-to-top");
15-
rotatingText = document.getElementById("rotating");
16-
landingImage = document.getElementById("landingIllustration");
1713
upArrow = document.getElementById("rotating-up");
1814
downArrow = document.getElementById("rotating-down");
1915
toggleAnimation = document.getElementById("toggleAnimation");
@@ -31,18 +27,26 @@ function backToTop() {
3127

3228
function scrollNext(){
3329
counter++;
34-
if (counter == 5) counter = 0;
35-
rotatingText.textContent = rotatingTextList[counter];
36-
landingImage.src = rotatingImageSrc[counter];
37-
landingImage.alt = rotatingImageAlt[counter];
30+
if (counter >= 5) counter = 0;
31+
$("#rotating").fadeTo(200,0.30, function() {
32+
$("#rotating").text(rotatingTextList[counter]);
33+
}).fadeTo(500,1);
34+
$("#landingIllustration").fadeTo(200,0.30, function() {
35+
$("#landingIllustration").attr("src", rotatingImageSrc[counter]);
36+
$("#landingIllustration").attr("alt", rotatingImageAlt[counter]);
37+
}).fadeTo(200,1);
3838
}
3939

4040
function scrollPrevious(){
4141
counter--;
42-
if (counter == -1) counter = 4;
43-
rotatingText.textContent = rotatingTextList[counter];
44-
landingImage.src = rotatingImageSrc[counter];
45-
landingImage.alt = rotatingImageAlt[counter];
42+
if (counter <= -1) counter = 4;
43+
$("#rotating").fadeTo(200,0.30, function() {
44+
$("#rotating").text(rotatingTextList[counter]);
45+
}).fadeTo(500,1);
46+
$("#landingIllustration").fadeTo(200,0.30, function() {
47+
$("#landingIllustration").attr("src", rotatingImageSrc[counter]);
48+
$("#landingIllustration").attr("alt", rotatingImageAlt[counter]);
49+
}).fadeTo(200,1);
4650
}
4751

4852
function toggleAnimate(){

0 commit comments

Comments
 (0)