Undergraduate Research Connect Mock Website & Portfolio Site

May 2024

This was my final project for my software engineering class, CS 3733, which primarily focused on learning the non-programming side of computer science, including agile, user stories, and UML diagrams, to name a few.

To illustrate these concepts, we were assigned to create an application in teams of four for the latter half of the term (about 3-4 weeks). But first, we needed a crash course in web dev. Our professor instructed us to individually create two websites in Flask, using CSS and HTML for the frontend. Later, we also utilized Bootstrap, but that was more of an example for teams less design-inclined, and it is not something I used for the final project, nor is it something I typically use now, although I recognized its versatility. For the first of these two websites, our professor created videos to walk us through nearly every line for each commit—a grueling 20 or so hours with a quick due date. But it was a thorough tutorial, because for the second website, we only had very loose instructions, and I was shocked yet quite happy to say I was able to breeze through the assignment. The class has quite the intense reputation, but it turned out to be quite manageable, in the end.

With the confidence to create a website from start to finish, we were tasked with creating a job portal designed to connect research faculty and undergraduate students who may not normally interact. We utilized an SQL database, with a model we designed ourselves, to store all the profiles, positions, and applications.

I took the lead on all things front-end. I had decent experience already doing mockups, and I had a lot of fun doing them for this site! I love thinking about optimal layouts, putting the user experience first. It reminds me of where I got my start, middle and high school robotics, where I had to spend a lot of time figuring out the best gamepad layouts for our drivers. Our professor noted that we easily had the best and most-functional layout in the class for our site, and as that was my role, I was quite proud!

For fun, we named our team Doofenshmirtz Evil Inc. (from the children’s show Phineas and Ferb) and themed our student side around Perry and faculty side around Doof! All the artwork used for that is my original work. I actually already had a Perry the Platypus artwork to steal the hat from, since I sell my own artwork! (He’s my bestseller, with holographic stickers, double sided wood earrings, and double sided wood keychains. Apparently everyone my age had the same childhood lol)

I utilized the skills I learned in this project to create this very website! I again used Flask, but I explored my options a bit more for the front-end. I really like being super hands-on with the styling, so I did primarily do everything manually in CSS and HTML. Whenever I hit a feature I wanted to create that couldn’t be handled with that alone, I then looked for outside options. There are some simple Javascript scripts running, and the background is handled by Sass. I would not feel comfortable listing either of these on my resume, but having at least some familiarity and exposure with both would certainly help me should a future project call for a more in-depth use of them. Additionally, I implemented the tiny-slider library to handle all the image carousels.

Please feel free to view the website using the button below!

Return toPROJECTS