Add manga translator and tron bot projects

Author: cameronkinsella

package-lock.json

@@ -13,7 +13,6 @@
     "@testing-library/user-event": "^7.1.2",
     "animate.css": "^3.7.2",
     "firebase": "^7.14.4",
-    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-animate-on-scroll": "^2.1.5",
     "react-dom": "^16.12.0",
@@ -42,6 +41,7 @@
     ]
   },
   "devDependencies": {
-    "firebase-tools": "^7.13.1"
+    "firebase-tools": "^7.13.1",
+    "sass": "^1.51.0"
   }
 }

package.json

@@ -144,7 +144,7 @@ html {
 
   &:hover {
     z-index: 999;
-    font-size: 2em;
+    font-size: 1.2em;
   }
 }
 

src/App.scss

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { faJs, faNodeJs, faReact } from '@fortawesome/free-brands-svg-icons';
+import {faDocker, faJs, faNodeJs, faReact} from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
@@ -28,7 +28,10 @@ export function ProjectBlock(props) {
     'React-Native': faReact,
     'PyTorch': require('../assets/icons/pytorch.svg'),
     'OpenCV': require('../assets/icons/opencv.svg'),
-    'Google Cloud Platform': require('../assets/icons/gcp.svg')
+    'Google Cloud Platform': require('../assets/icons/gcp.svg'),
+    'Go': require('../assets/icons/go.svg'),
+    'TypeScript': require('../assets/icons/typescript.svg'),
+    'Docker': faDocker
   };
 
   return (

src/assets/icons/go.svg

@@ -57,7 +57,6 @@ function Home() {
           </ScrollAnimation>
         </div>
         <img className={'portrait'} src={me} alt={''}/>
-        <h2 style={{ fontWeight: 200, marginBottom: '5em' }}>Hello there, I'm Cameron</h2>
         <div className={'bodyContent'}
              style={window.mobileCheck() ?
                { backgroundImage: `url(${gliding})`, padding: '2em 1em', margin: '2em 1em' } :
@@ -67,7 +66,7 @@ function Home() {
               { margin: '8em 0', fontSize: 'calc(10px + 1vmin)' } :
               { margin: '8em 5%' }}>
               I'm a Mechatronics Engineering student at the
-              University of Waterloo with a passion for Software Development.
+              University of Waterloo with a passion for software development.
               I'm also a pilot! Aircraft I've flown include: <br/>
               Schweizer SGS 2-33As, Cessna 152s, and Cessna 172s.
             </div>
@@ -76,13 +75,11 @@ function Home() {
             <div className={'bodyBlock'} style={window.mobileCheck() ?
               { margin: '8em 0', fontSize: 'calc(10px + 1vmin)' } :
               { margin: '8em 5%' }}>
-              My favorite hobby is programming!
-              I like to learn by working on projects in my free time.
-              Through my personal projects, I've gained experience in a
-              variety of languages including:<br/>
-              <b>Python, C++, Java, JavaScript (ES6), HTML5, and CSS</b><br/>
-              along with several framework, including:<br/>
-              <b>PyTorch, OpenCV, React, React Native, and Selenium</b>
+              I like to code in my free time to learn new languages and technologies.
+              Most of my work has been done with:<br/>
+              <b>Python, Go, JavaScript, TypeScript, Node.js, C, and C++</b><br/>
+              along with several frameworks, including:<br/>
+              <b>PyTorch, OpenCV, React, and React Native</b>
             </div>
           </ScrollAnimation>
         </div>

src/assets/icons/typescript.svg

@@ -8,6 +8,7 @@ import { useHistory } from 'react-router-dom';
 import mailstorm from '../assets/thumbnails/mailstorm.jpeg'
 import sudoku from '../assets/thumbnails/seppuku-sudoku.png'
 import suspendont from '../assets/thumbnails/suspendont.png'
+import tronBot from '../assets/thumbnails/tron-bot.png'
 
 
 function Projects() {
@@ -36,6 +37,21 @@ function Projects() {
       </header>
       <div>
         <div className={'App-body'}>
+          <ProjectBlock title={'Manga Translator'} link={'https://github.com/cameronkinsella/manga-translator'}
+                        color={'black'} src='https://raw.githubusercontent.com/cameronkinsella/manga-translator/master/images/example-translation.gif' ratio={'74.1'} desc={
+            <p>An OCR and translation tool for translating text in images. Supports a wide variety of languages. The application consists of a cross-platform high-performant GUI made entirely in <b>Go</b>.</p>
+          } tech={
+            ['Go']
+          }/>
+          <ProjectBlock title={'Tron bot'} link={'https://github.com/uwaterloo-tron/discord-bot/'}
+                        color={'#565656'} src={tronBot} ratio={'74.1'} desc={
+            <p>A Discord bot used by the UWaterloo Mechatronics Engineering 2024 Discord server.<br/><br/>
+              Comprehensive documentation on how to contribute was created to help students get involved with
+              development. <b>Docker</b> is used to simplify local testing and reduce risk in production.
+            </p>
+          } tech={
+            ['Python', 'Docker', 'Google Cloud Platform']
+          }/>
           <ProjectBlock title={'Sudoku Solver'} link={'https://github.com/cameronkinsella/seppuku-sudoku'}
                         color={'black'} src={sudoku} ratio={'74.1'} desc={
             <p>A Sudoku solver which uses computer vision to solve any game of Sudoku from just a picture.<br/><br/>Users
@@ -55,7 +71,7 @@ function Projects() {
             ['Python', 'OpenCV', 'PyTorch', 'PHP', 'Google Cloud Platform']
           }/>
           <ProjectBlock title={`Suspendon't`} link={'https://github.com/cameronkinsella/suspendont'}
-                        color={'black'} src={suspendont} ratio={'65.45'} desc={
+                        color={'#565656'} src={suspendont} ratio={'65.45'} desc={
             <p>Suspendon't is a mobile and web app for tracking when your Twitter friends are suspended or delete their
               account.<br/><br/> The mobile app was built using <b>React Native</b> and is functional on both
               iOS and Android. The web app was build using <b>React</b>. A Node backend is used for communicating with