In the months preceding the summer vacation between Junior and Senior year, I noticed art students working with their art teachers to make portfolios for universities to look at. Art students do this to help make themselves stand out. I thought that since what I did was a form of art as well, I should make a portfolio, too. However, I couldn't just send in text files of my code or include chess in my Common App, I had to make a website to host the projects that I want to send to universities.
I began work the moment after I finished up my AP exams for the 2016-2017 school year. I wasn't exactly sure what I wanted from a portfolio website at the time, so I just began work on something I thought would look cool using HTML canvas. I figured that I'd be able to implement it into my website somehow, and I eventually stuck it in the footer, at the bottom of the page. It's hidden by default, but clicking on the footer reveals it while subsequent clicks add lines. It's made up of many little dots that I like to call "nodes" that move around and connect to each other and the mouse with lines. The lines get fainter the further away the two nodes are. A node is just an object with 4 values: an x coordinate, a y coordinate an x direction and a y direction. The x and y directions are random values between -1 and 1 that determine how far the node should move in that particular direction every 50 milliseconds. This value is changed every time it touches the edge of the canvas to make sure that the node doesn't keep going in one direction forever. There's a full page version that allows you to change the values of some variables by using sliders at the bottom. I think this project came out pretty well, and it adds a nice touch to my website. It also works well on cell phones by detecting touch, but dragging your finger around the screen will cause it to scroll around, which can be a little annoying. The source code for the project is available below, just click the play button above the code to run it.
After finishing up the canvas project, I started working on a project that would allow people to expand or collapse certain sections of a specific page with a clean animation. At first, I used velocity.js animations but I eventually switched to using css3 animations, which are faster. Orignally, I was going to use this on some kind of FAQ page, but I couldn't think of a good reason to have an FAQ page so it didn't make the final cut. The remnants of the FAQ page can act as a full page example of this. It could prove useful later, however, so I'm glad I made it, even if I didn't end up using it.
Once I was done with that, I began to design my portfolio itself. To do this, I drew up a wireframe and made an HTML document that would act as the template for all the other ones. Originally, the color palette was blue and bluish green, but due to the fact that these colors made the website look underwater, I changed the colors to black and white. I also picked out all the fonts and text sizes as this time. Once I was satisfied with the design, I made the actual pages and began to fill them in with content. Around September 2017, I finished up this website. My hope that this website gives visitors an idea of who I am and what I can do in terms of software engineering.