Fungeey · Fungeey · Sep 11, 2024 · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/artgallery.html b/artgallery.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>aaron lee</title>
+  <link rel="icon" href="img/icon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <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=Space+Mono&family=Inter&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div id="main">
+    <div id="center">
+      <a href="index.html" class="nameTitle">aaron lee</a>
+
+      <div class="subtitle">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="m19.706 13.708-3 3a1 1 0 0 1-1.414-1.414L16.586 14H5a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v4h10.586l-1.293-1.293a1 1 0 0 1 1.414-1.414l3 3a1 1 0 0 1-.001 1.415z" />
+        </svg>
+        <h3>digital art gallery</h3>
+      </div>
+
+      <br>
+
+      <a target="_blank" href="https://fungeey.github.io/artgallery/">live demo</a>
+      <br>
+      <a target="_blank" href="https://github.com/Fungeey/artgallery">source code</a>
+
+      <br><br>
+
+      <!-- <img src="img/gallery.gif" class="projImg"> -->
+
+      <img src="https://github.com/Fungeey/artgallery/assets/45613337/58126103-490f-4c0e-b66c-5aadf3e70017"
+        class="projImg">
+
+      <img src="https://github.com/Fungeey/artgallery/assets/45613337/40acbb4a-06cc-4459-a50d-4fca2de34177"
+        class="projImg">
+
+
+      <br>
+      <br>
+      <hr>
+
+      <div class="spaceBetween">
+        made by aaron lee
+        <div id="links">
+          <a target="_blank" href="https://soundcloud.com/fungeey"><svg class="icon" xmlns="http://www.w3.org/2000/svg"
+              width="2500" height="1387" viewBox="0 208.952 1048.713 581.696">
+              <path
+                d="M0 686.216c0 13.014 4.718 22.854 14.152 29.524 9.435 6.669 19.52 9.027 30.256 7.076 10.085-1.952 17.161-5.531 21.229-10.736 4.066-5.205 6.1-13.827 6.1-25.864v-141.52c0-10.086-3.497-18.626-10.492-25.62-6.994-6.995-15.534-10.492-25.62-10.492-9.76 0-18.137 3.497-25.132 10.492C3.498 526.07 0 534.61 0 544.696v141.52zm112.24 60.512c0 9.436 3.335 16.511 10.004 21.229 6.67 4.718 15.21 7.076 25.62 7.076 10.736 0 19.438-2.359 26.108-7.076 6.669-4.717 10.004-11.793 10.004-21.229V416.84c0-9.76-3.498-18.138-10.492-25.132-6.995-6.994-15.535-10.492-25.62-10.492-9.76 0-18.138 3.498-25.132 10.492-6.995 6.995-10.492 15.372-10.492 25.132v329.888zm111.752 15.616c0 9.435 3.416 16.511 10.248 21.229 6.832 4.717 15.616 7.076 26.353 7.076 10.41 0 18.95-2.359 25.619-7.076 6.67-4.718 10.005-11.794 10.005-21.229V461.248c0-10.085-3.498-18.707-10.492-25.864-6.995-7.157-15.372-10.735-25.132-10.735-10.086 0-18.707 3.578-25.864 10.735s-10.736 15.779-10.736 25.864v301.096zm112.24 1.464c0 17.894 12.037 26.841 36.112 26.841 24.074 0 36.111-8.947 36.111-26.841v-488c0-27.328-8.296-42.781-24.888-46.36-10.736-2.603-21.31.488-31.72 9.272-10.411 8.784-15.616 21.146-15.616 37.088v488zm114.193 14.152V247.016c0-16.917 5.042-27.002 15.128-30.256 21.797-5.205 43.432-7.808 64.904-7.808 49.775 0 96.136 11.712 139.079 35.136 42.944 23.424 77.674 55.388 104.188 95.892 26.515 40.505 41.887 85.156 46.116 133.957 19.845-8.459 40.991-12.688 63.439-12.688 45.547 0 84.506 16.104 116.876 48.312 32.371 32.209 48.557 70.923 48.557 116.145 0 45.547-16.186 84.424-48.557 116.632-32.37 32.208-71.166 48.312-116.388 48.312l-424.56-.488c-2.929-.976-5.125-2.766-6.589-5.368s-2.193-4.882-2.193-6.834z" />
+            </svg>
+          </a>
+          <a target="_blank" href="https://github.com/Fungeey/"><svg class="icon" xmlns="http://www.w3.org/2000/svg"
+              width="24" height="24" viewBox="0 0 24 24">
+              <path
+                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg></a>
+          <a target="_blank" href="https://linkedin.com/in/aaronklee"><svg class="icon"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path
+                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+            </svg></a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</body>
+
+<script src="fadein.js"></script>
+
+</html>
diff --git a/fadein.js b/fadein.js
@@ -0,0 +1,41 @@
+
+
+
+
+
+var elems = document.body.getElementsByTagName("*");
+
+for (let element of elems) {
+  element.style.opacity = 0.1;
+  element.style.transform = "translate(0px, 3px)";
+}
+
+let i = 0;
+var unfader = setInterval(function () {
+  if (!elems[i]){
+    clearInterval(unfader);
+    return;
+  }
+  window.scrollTo(0, 0);
+
+  unfade(elems[i++]);
+}, 10);
+
+function unfade(element) {
+  var op = 0.1;  // initial opacity
+
+  var timer = setInterval(function () {
+    if (op >= 1 || !element) {
+      element.style.transform = 'none';
+      element.style.opacity = 1;
+
+      clearInterval(timer);
+      return;
+    }
+
+    element.style.opacity = op;
+    op += op * 0.1;
+    element.style.transform = `translate(0px, ${(1 - op) * 3}px)`;
+    element.style.transform = 'translateZ(0)';
+  }, 10);
+}
diff --git a/fontname.js b/fontname.js
@@ -0,0 +1,26 @@
+
+
+
+let aaron = document.body.getElementsByTagName("h1")[0];
+console.log(aaron);
+
+let fonts=[
+  'Courier New',
+  'Lucida Console',
+  'Space Mono',
+  'Monospace'
+]
+
+let font=[
+  'Times New Roman',
+  'Georgia',
+  'Garamond',
+  'Arial',
+  'Verdana',
+  'Helvetica'
+]
+
+let j = 0;
+let fontSwitcher = setInterval(function () {
+  aaron.style.fontFamily = fonts[(++j) % fonts.length];
+}, 750);
diff --git a/img/icon.ico b/img/icon.ico
diff --git a/img/icon.png b/img/icon.png
diff --git a/img/leaf.png b/img/leaf.png
diff --git a/img/leaves.png b/img/leaves.png
diff --git a/img/me.JPG b/img/me.JPG
diff --git a/img/soundcloud-icon.svg b/img/soundcloud-icon.svg
diff --git a/index.html b/index.html
@@ -1,81 +1,141 @@
 <!DOCTYPE html>
 
 <head>
-    <meta charset="UTF-8">
-    <title>aaron lee's website</title>
-    <link rel="icon" href="img/icon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="style.css">
-    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400&family=Overpass:wght@100;400&display=swap" rel="stylesheet">
-    <script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
-    <script src = "main.js" type = "module"></script>
+  <meta charset="UTF-8">
+  <title>aaron lee</title>
+  <link rel="icon" href="img/icon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <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=Space+Mono&family=Inter&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <div id = "main">
-        <div id = "firstScreen">
-            <img src = "img/dogjump.gif" id = "dog">
-            <div id = "nameTitle">
-                <h1> aaron lee</h1>            
-            </div>
-
-            <p id = "introBlurb">is studying software engineering
-            <div id = "links">
-                <a class = "plainLink" href = "mailto:aaronkyl5@gmail.com">email</a>
-                <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "Aaron_Lee_Resume.pdf">resume</a>
-                <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "https://github.com/Fungeey/">github</a>
-                <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "https://linkedin.com/in/aaronklee">linkedin</a>
-            </div>
-            <br><br>
-            <img src = "img/arrow.png" id = "downArrow">
+  <div id="main">
+    <div id="center">
+
+      <br><br>
+
+      <div style="width:60%; aspect-ratio:1/1; border-radius: 50%; overflow: hidden; position:relative; margin:0px auto;" >
+        <img src="/img/me.JPG" style="width:100%;"/>
+      </div>
+
+      <h1 style="margin:-0.5rem"> aaron lee </h1>
+      <p>
+        I'm a fifth year <span>software engineering</span> student studying at Toronto Metropolitan University. I love learning and using my programming knowledge to build things! I'm currently learning <span>react.js</span> on the side. </p>
+      <p>
+        In my spare time, I like to run, listen to music, and read 📖.
+      </p>
+      <p>
+        You can reach me at <a href="mailto:aaron.k.lee@torontomu.ca">aaron.k.lee@torontomu.ca</a>
+      </p>
+
+      <h2>experience</h2>
+
+      <div style="padding-left: 1rem;">
+          <li><a target="_blank" href="https://www.canada.ca/en/environment-climate-change.html">Environment
+              Canada:</a> Software
+            Engineer Intern 
+          </li>
+
+          <li>
+            <a target="_blank" href="https://www.ibm.com/">IBM:</a> Consultant Intern
+          </li>
+
+          <li> <a target="_blank" href="https://www.genexissystems.com/">Genexis Design:</a> Software Engineer
+          Intern </li>
+      </div>
+
+      <h2>projects</h2>
+
+      <div class="projects">
+        <div class="project" style="cursor: pointer;" onclick="window.open('https://github.com/Fungeey/artgallery', '_blank');">
+            <h4>digital art gallery</h4>
+            3D interactive web experience made with <span>three.js</span> showcasing my sister's art
         </div>
-    </div>
-    <div id = "notMain">
-        <br><br><br>
-
-        <div class = "glitch">projects</div>
-
-        <div id = "content">
-            <div id = "sidebar">
-                <br>
-                <div id = "sideLinks">
-                    <a class = "plainLink" href = "mailto:aaronkyl5@gmail.com">email</a>
-                    <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "Aaron_Lee_Resume.pdf">resume</a>
-                    <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "https://github.com/Fungeey/">github</a>
-                    <a class = "plainLink" target="_blank" rel="noopener noreferrer" href = "https://linkedin.com/in/aaronklee">linkedin</a>
-                    <br><br><br><br><br>
-                    <img src = "img/dogidle.gif" id = "dogIdle">
-                    <div id = "dogCircle"></div>
-                </div>
-            </div>
-            <div id = "projects">
-                <div class = "projectGrid">
-                    <template>
-                        <div class = 'grid-item'>
-                            <div class = "gridContainer">
-                                <h3></h3>
-                                <a target="_blank">
-                                    <img src = "img/git.png" class = "gitImg">
-                                </a>
-                                <img class = "projImg">
-                                <p></p>
-                                <div class = "tags"></div>
-                            </div>
-                        </div>
-                    </template>
-                </div>
-            </div>
+
+        <div class="project" style="cursor: pointer;" onclick="window.open('https://github.com/Fungeey/detectiveboard', '_blank');">
+          <h4>detective board</h4>
+          web tool for creating stylized mind maps built with <span>react.js</span>
         </div>
-    </div>
 
-    <div id ="footer">
-        thanks for visiting :) <br><br>
-        <a href="#top"> jump to top </a>
+        <div class="project">
+          <h4> skateport </h4>
+            skateboard storage locker secured using an RFID access card controlled by <span>arduino</span>. 2nd
+          in
+          Metropolitan Engineering Competition
+          2022
+        </div>
 
-        <br><br>
-    </div>
+        <div class="project">
+          <h4> inventory manager </h4>
+          full stack e-commerce site to create, search, buy, and sell products in an <span>oracle
+            database</span>
+        </div>
+
+        <div class="project" style="cursor: pointer;" onclick="window.open('https://github.com/Fungeey/perceptronxor', '_blank');">
+          <h4> xor solver </h4>
+          neural network that learns to implement logic gates
+        </div>
+
+        <div class="project">
+          <h4> digital CPU project </h4>
+          ALU designed with Quartus and VHDL to perform arithmetic operations with 8-bit signals.
+        </div>
+      </div>
+
+      <h2 style='margin-top:0;'> music </h2>
+      <p>
+        I also produce music for fun:
+        <a target="_blank" href="https://open.spotify.com/track/27DPZD54htZgO7sJeIwTLn?si=9506cdabb82347a5">paths</a> is
+        my
+        newest
+        song.
+      </p>
+
+      <!-- <br> 
 
+            <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
+                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1548188698&color=%23c8d195&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
+            <div
+                style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;    font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
+                <a href="https://soundcloud.com/fungeey" title="fungeey" target="_blank"
+                    style="color: #cccccc; text-decoration: none;">fungeey</a> · <a
+                    href="https://soundcloud.com/fungeey/paths" title="paths" target="_blank"
+                    style="color: #cccccc; text-decoration: none;">paths</a>
+            </div> -->
+
+      <br>
+      <hr>
+
+      <div class="spaceBetween">
+        made by aaron lee
+        <div id="links">
+          <a target="_blank" href="https://soundcloud.com/fungeey"><svg class="icon" xmlns="http://www.w3.org/2000/svg"
+              width="2500" height="1387" viewBox="0 208.952 1048.713 581.696">
+              <path
+                d="M0 686.216c0 13.014 4.718 22.854 14.152 29.524 9.435 6.669 19.52 9.027 30.256 7.076 10.085-1.952 17.161-5.531 21.229-10.736 4.066-5.205 6.1-13.827 6.1-25.864v-141.52c0-10.086-3.497-18.626-10.492-25.62-6.994-6.995-15.534-10.492-25.62-10.492-9.76 0-18.137 3.497-25.132 10.492C3.498 526.07 0 534.61 0 544.696v141.52zm112.24 60.512c0 9.436 3.335 16.511 10.004 21.229 6.67 4.718 15.21 7.076 25.62 7.076 10.736 0 19.438-2.359 26.108-7.076 6.669-4.717 10.004-11.793 10.004-21.229V416.84c0-9.76-3.498-18.138-10.492-25.132-6.995-6.994-15.535-10.492-25.62-10.492-9.76 0-18.138 3.498-25.132 10.492-6.995 6.995-10.492 15.372-10.492 25.132v329.888zm111.752 15.616c0 9.435 3.416 16.511 10.248 21.229 6.832 4.717 15.616 7.076 26.353 7.076 10.41 0 18.95-2.359 25.619-7.076 6.67-4.718 10.005-11.794 10.005-21.229V461.248c0-10.085-3.498-18.707-10.492-25.864-6.995-7.157-15.372-10.735-25.132-10.735-10.086 0-18.707 3.578-25.864 10.735s-10.736 15.779-10.736 25.864v301.096zm112.24 1.464c0 17.894 12.037 26.841 36.112 26.841 24.074 0 36.111-8.947 36.111-26.841v-488c0-27.328-8.296-42.781-24.888-46.36-10.736-2.603-21.31.488-31.72 9.272-10.411 8.784-15.616 21.146-15.616 37.088v488zm114.193 14.152V247.016c0-16.917 5.042-27.002 15.128-30.256 21.797-5.205 43.432-7.808 64.904-7.808 49.775 0 96.136 11.712 139.079 35.136 42.944 23.424 77.674 55.388 104.188 95.892 26.515 40.505 41.887 85.156 46.116 133.957 19.845-8.459 40.991-12.688 63.439-12.688 45.547 0 84.506 16.104 116.876 48.312 32.371 32.209 48.557 70.923 48.557 116.145 0 45.547-16.186 84.424-48.557 116.632-32.37 32.208-71.166 48.312-116.388 48.312l-424.56-.488c-2.929-.976-5.125-2.766-6.589-5.368s-2.193-4.882-2.193-6.834z" />
+            </svg>
+          </a>
+          <a target="_blank" href="https://github.com/Fungeey/"><svg class="icon" xmlns="http://www.w3.org/2000/svg"
+              width="24" height="24" viewBox="0 0 24 24">
+              <path
+                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg></a>
+          <a target="_blank" href="https://linkedin.com/in/aaronklee"><svg class="icon"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path
+                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+            </svg></a>
+        </div>
+      </div>
+    </div>
+  </div>
 </body>
+
+<script src="fadein.js"></script>
+<script src="fontname.js"></script>
+
 </html>