/* 
* <<< DON'T LEAVE RIGHT AWAY OR ELSE YOU'RE MISSING OUT! >>>
*
*
* Hello! I'm Zachary Chan.
* A 5th year computer science student at Simon Fraser University.
* I am currently a Junior Software Developer at Amazon.
* 
* I'm a programmer. 
* Currently, I'm trying out all sorts of stuff to see what I like.
* This is one of my favourite projects, a website that I made.
*
* If you're a boring person, you can press the skip button at the bottom-left.
*
* FOR THE BEST EXPERIENCE, VIEW ON DESKTOP, FULL SCREENED
*/

/*
* Oh... There's nothing here...                
* Let me fix that.
* 
* First, lets animate EVERYTHING!
*/

*  {
    -webkit-transition: all 1s;
    transition: all 1s;
}

/*
* Where's the animation?
* You will see... :)
*/

/*
* Let me create some space to work with.
*
* AND I SAY, "LET THERE BE A GRAY BOX AND WHITE TEXT!"
*/

pre:not(:empty)  {
    padding: 1em;
    margin: 1em;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #222;
    color: white;
    overflow: auto;
    padding-bottom: 2em;
    white-space: pre-wrap;
}

pre:hover  {
    box-shadow: 0px 0px 30px 5px rgba(255,255,255,0.4);
}

@media only screen and (min-width:769px) {
    pre:not(:empty)  {
        height: 83%;
        width: 45%;
    }
}

@media only screen and (max-width: 768px) {
    pre:not(:empty) {
        width: 85vw;
        height: 40vh;
        position: absolute;
    }
}

#styles  {
    position: absolute;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/*
* Oh EWWWW.
*
* My links are covering up this beautiful text and box.
* Let me fix this and make it not bother us.
*/

ul  {
    list-style: none;
    width: 100%;
    display: inline-block;
    overflow: auto;
}

li  {
    font-family: monospace, serif;
    display: inline;
    padding: 0px 10px;
}

a:hover  {color: #888888;}
a:visited  {color: #ffffff;}
a:link  {color: #ffffff;}
a:active  {color: #ffffff;}

/*
* Much better, don't you think?
* Now let me style the background and really make the site pop!
*/

body  {
    background-color: #151515;
    color: white;
    font-size: 14px;
}

h1  {
    font-size: 2em;
    font-weight: bold;
    margin-left: 29px;
    margin-bottom: 0px;
    padding: 0;
}

/* Customize scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #222;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


/*
* Not bad, if I do say so myself.
* But it feels a bit bland and empty. Doesn't it?
* Let me add some color. How about something IDE like?
* ... Maybe a lot more colourful than an IDE ...
*/

.number  {
    color: rgb(33, 205, 79);
}
.comment  {
    color: rgb(224, 127, 0);
}
.value  {
    color: rgb(228, 64, 64);
}
.property  {
    color: rgb(72, 196, 231);
}
.selector  {
    color: rgb(147, 147, 251);
}
.media  {
    color: rgb(255, 89, 225);
}

/*
* I can't imagine that you're here just for the fancy colours.
*
* You probably want to know a little more about me.
* About some of my work, projects and etc.
* Let me prep a TL;DR of my resume for you.
* 
* Oh and just in case you didn't notice...
* The link to my master resume is at the bottom left.
* It includes all of my work experience, education, skills, etc.
* 
*/

@media only screen and (min-width:769px) {
    #styles  {
        transform: translateX(110%);
    }
    #resume  {
        position: absolute;
    }
}

@media only screen and (max-width: 768px) {
    #resume  {
        transform: translateX(0%);
    }
    #styles  {
        transform: translateX(0%);
        bottom: 2em;
    }
}

/*
* I hope you enjoyed my website.
*
* Just one more thing! If you want, you can EDIT this website.
* You can change the colours, the text, the code, the layout.
* You can even break the website if you want!
* Simply start typing in this window.
*
* If you have any questions, comments or concerns
*
* Feel free to contact me at:
* Email: zca121@sfu.ca
* Discord: zach1502#4621
* LinkedIn: https://www.linkedin.com/in/zachary-chan-a125a01bb/
* GitHub: https://github.com/zach1502/
* 
* I'm always looking for new opportunities to learn and grow.
* 
* Thank you for your time and I hope you are impressed!
* 
* - Zachary Chan
*
* [END ANIMATION]
*/

#skip  {
    display: none;
}

===================
Zachary Chan
===================
5th year Computer Science Student at Simon Fraser University (SFU)
Junior Software Developer @ Amazon 

===================
Personal Projects:
===================
This Website (JavaScript, HTML, CSS)
October 2022 - Present

OctoBot: Repo Assistant (Flask, React, Python, JavaScript)
September 2024 - September 2024

AI Need Help: Therapist App (MongoDB, Express, React, Node.js, Javascript)
May 2024 - May 2024

Statistical Analysis of SFU Computing Science Student Society Discord Server (Python, Pandas, Numpy, Matplotlib)
April 2024 - April 2024

Peak Buddies: Speed Networking App (MERN Stack, Socket.io, Javascript)
🏆 Mountain Madness 2024 Winner 🏆
April 2024 - April 2024

Statistical Analysis of SFU CSSS Discord Server (Python, Pandas, Numpy, Matplotlib)
March 2024 - April 2024

Asynchronous, Multi-threaded C++ Server (C++, Boost, Networking)
January 2024 - February 2024

Algorithmic Trading with LSTM (Python, PyTorch, Pandas, NumPy)
December 2023 - January 2024

Custom Malloc and Free Implementation (C)
November 2023 - November 2023

Simple Chat Application (C, Posix Threads, TCP Sockets)
October 2023 - October 2023

Sorting Algorithm Visualization Tool (Node.js, Javascript, React)
August 2023 - October 2023

Gesture Genius: Real Time ASL-to-English translator website (Javascript)
September 2023 - September 2023

Chess AI using Monte Carlo Tree Search and Deep Neural Networks (Python)
February 2023 - May 2023

4-Key Rhythm Game (JavaScript)
January 2023 - February 2023

Automatic UPass Registration (Python)
August 2022 - October 2023

Chess Engine Tournament (JavaScript and C++)
June 2022 - Sept 2022

Chess With Friends Discord Bot (JavaScript)
June 2022 - Sept 2022

Automated Crossword Puzzle Generator (Python)
May 2022 - June 2022

===================
Education:
===================
B.Sc Computer Science
Simon Fraser University
2022 - 2026 (expected graduation)
3.82 CGPA

Associate of Computer Science (Transferred)
Langara College
2020 - 2022
3.66 CGPA

===================
Skills:
===================
Programming Languages: C/C++, Python, JavaScript, HTML, CSS, SQL
Frameworks & Libraries: React, Node.js, Express, Material-UI, PyTorch, Pandas, NumPy, Matplotlib
Developer Tools: Git, AWS (API Gateway, DynamoDB, Lambda, S3, Scheduler, TimeStream), GCP
Soft Skills: Effective Communication, Problem-Solving, Team Collaboration, Adaptability, Creativity
Human Languages: English, French, Mandarin

===================
Competitions and Hackathons: 
===================
A Strange Programming Contest 2023, Simon Fraser University - 2nd Place
A Strange Programming Contest 2022, Simon Fraser University - 5th Place
New Year's MASH Programming Contest 2022, Simon Fraser University - 8th Place
ICPC Pacific NorthWest Regional Programming Contest 2022, Division 2 - Placed 16th out of 61 teams
ICPC Pacific NorthWest Regional Programming Contest 2023, Division 2 - Placed 17th out of 76 teams
Advent of Code 2023, Online - Placed 122nd out of 316,118 global participants
Advent of Code 2022, Online - Completed

Mountain Madness 2024, Simon Fraser University - 1st Place
Hack The North 2024, University of Waterloo - Participant
Hack The North 2023, University of Waterloo - Participant
StormHacks 2023, Simon Fraser University - Participant
Fall Hacks 2022, Simon Fraser University - Participant

===================
Interests:
===================
Chess
2000 Rapid, 1700 Blitz, 1250 Bullet, 2200 Puzzle on chess.com.

Finance
Self-directed investments. Took economics related electives.