Discipline

Graphic Design
Web Development
Software Development
Animation

Graphic Design

Equilibrium Magazine

Designed Print Layout for Magazine Group

Equilibrium Magazine

As a part of my Capstone course for the Digital Studies Certificate program, I was assigned with another classmate to work with the UW - Madison Equilibrium Magazine, a campus economics group. My partner and myself had complete creative control over designing the layout for their spring issue.

Process

The editor of the magazine sent us any of the information that we needed to include in the magazine, from articles to graphs to headshots of contributors. We worked closely with the editor as well as the people in charge of printing in order to ensure that we met all requirements and understood the basic timeline that they wanted us to follow. Using Adobe Illustrator, we collaboratively created the layout of the magazine article by article. My partner and I worked closely in creating a unique design for the cover that both conveyed some of the articles within the issue and also remained true to the magazine's overall image. We used Photoshop to resize, re-pixelate to have 300 ppi quality, and recolor using CYMK mode. Throughout this entire process, we updated the editor in chief of the magazine on our progress and saught any feedback where we could.

Skills

Adobe Illustrator
Adobe Photoshop
Printing Requirements

Communication
Collaboration
Creative Design

View Source Files

Photography Website

A web page to display photography from a class

Photography Website

This website is meant to showcase my photographs and graphic design projects from my Communcation Arts 155 class in Fall 2018. This website was itself a project for the same class. Built from scratch and using strictly HTML and CSS, this site displays some of the work I did throughout the semester.

Process

I wanted to create a simple design that was easy to navigate and visually clean. I made a neat entry page that gives users clear choices on how to navigate the site. The portfolio, about, and contact sections are all on one page, with the navigation bar taking users to that section on the web page.

Skills

HTML
CSS
Responsive Design

View Source Code

Web Development

Personal Portfolio

A web page to display work for Matt Stout

Personal Portfolio

This website is meant to showcase my projects and accentuate my skillset. While it contains information about all of my projects, this website itself is a project. Built from scratch, this website utilizes HTML and CSS functions in an ASP.NET environment, with some JavaScript for extra functionality. Bootstrap is also used to create a more responsive design. I will continue to manage this site for the foreseeable future.

Process

First I did a lot of research of other portfolios for web and software developers from around the world to get an idea of what standard features are usually included. From there, I sketched some ideas of how I wanted my website to look, and began thinking about the site flow from section to section. Next I started coding, using online resources when I ran into road blocks. I got input from friends and coworkers on the design and flow of my website, and I made several changes throughout the process. From each item's position down to the font-family, I created a site that not only displays my projects, but is also a reflection of my personality.

Skills

HTML
CSS
Bootstrap

ASP.Net
Javascript
Responsive Design

View Source Code

Rootfop Studios

A web page to display work for Rooftop Studios

Rooftop Studios

This website was built to act as a platform for Rooftop Studios, a small local videography company, to showcase their video projects and clientele. It is particularly geared towards targeting potential future clients and marketing their brand. It allows users to get a glimpse of their summary reel on the home page, see the list of all of their projects, and easily get in touch with the company members. The site is currently still in progress, but hopefully will be up shortly.

Process

I first got approached about the website by my roommate, who is one of the members of Rooftop Studio. I researched some standard videographer portfilio websites and presented several different ideas to the group until we settled on something that they felt would best respresent their company and uphold their brand style. Then I began putting together the code, periodically checking with the group to insure that I was following their expactations. There was a very lose timeline for this project, constantly changing with the availability of the group members. Once they give me the rest of the content they desired, I will be able to finalize the design with Rooftop Studio's approval.

Skills

HTML
CSS
Bootstrap

ASP.NET
Javascript
Responsive Design

View Source Code Go To Website

Elon Musk

A Tribute Web Page

Elon Musk

This website is a tribute page for Elon Musk. It was a starter project for a freeCodeCamp course I started in my free time. This project was meant to get started with coding in HTML and CSS in real time and get familiar with how the code effects a webpage. This site is not officially published, but you can view the site source code as well as what it would look like in my CodePen profile via the button below.

Process

For this introductory site, I chose a simple block design with a simplistic organisation. I picked a person I was interested in so that the research could still be a fun process as I added information to the page.

Skills

HTML
CSS
Bootstrap

View Source Code

Nations Stephenson

A Wix portfolio website for Nations Stephenson

Nations Stephenson Portfolio

This website was created for my roommate as he was applying for jobs as a videographer. Certain applications had a fast approaching deadline, so I used Wix rather than build a website from scratch. Once the site was published, I handed off site management to Nations so that he could add or remove items himself.

Process

Looking through the many templates provided by Wix, I worked out with Nations which home page main design he liked best for his portfolio. I then customized additional pages for specified purposes that fit his needs, working with him along the way to ensure that the page had the aesthetics that he wanted while also maximizing the functionality.

Skills

Wix
Basic Design

Go To Website

Software Development

MetaSolv for Cable

Incorporate New Information Into Databases

MetaSolv for Cable

The purpose of this project was to augment existing systems to be able to allow TDS to report on the current and future planned state of a given service location. This data is to be used to steer an upgrade program spanning 10 years and 28 states. Most of the project work was centered on combining spatial data from a GIS system with service location centric data. I personally handled the augmentations for two applications within the ecosystem of effected applications: SA Availability and SA SuperMetrics.

SA Availability is a read only GUI where users can see details about a service location such as: what is the fastest speed TDS can deliver them, what network technologies are built to their location, is there a planned speed upgrade for their area, etc. it has a wide user base, typically across Sales, Operations, and Marketing.

SA SuperMetrics is an application software that derives location speed capabilities and best network technology from basic service location data. This information is put into reports that the whole organization uses, including Strategic Finance. This application also has a wide user base, typically across Finance, Marketing, and Engineering.

This project impacted these and several other applications throughout the company, making additional information regarding the upgrade program visible to the organization. It enabled better reporting, providing a single source of data for all parties to work from, and making data visible that hadn’t been derived let alone stored previously. The project took around 8 months from development to launch.

Process

Working on a team with a project manager, a tech lead, and several other developers, we used an agile style task management system to efficiently communicate current issues and their progress during each two week sprint. I primarily worked on SA Availability programming tasks, making updates to several components within the web application. This includes inserting new data, maintaining the web page layout, and improving certain button functionalities. I completed all of the tasks for this portion of the project and submitted them for code review by the tech lead. He was pleased with the quality and speed of work I produced, and assigned me to work on a higher risk task.

The SuperMetrics application was vastly more complex than the Availability application. I was left to figure out most of the tasks on my own, and had to track down leads and coordinate with other people and applications. While coding these tasks, I had to use a unique testing technique utilizing command line to call to the service and produce report data, which I compared to the expected data. Going through code review produced some bugs, which I was responsible for fixing. Along with updates to this application, I was required to update and view from several database tables using SQL.

I was also closely involved with creating test cases. I made test scenarios for both of the above applications, testing both the existing and newly added functionalities. Due to the complexity of SuperMetrics, I was also responsible for executing the test cases for this application.

Skills

C#
HTML
JavaScript
ASP.NET

SQL
Command Line
Testing Standards

Due to company policies I am unable to disclose any direct information regarding this project.

CAFSA Enhancements

Augment Existing Reporting Systems

CAFSA Enhancements

Process

Skills

C#
HTML
JavaScript
ASP.NET

SQL
Command Line
Testing Standards

Due to company policies I am unable to disclose any direct information regarding this project.

Symbol Table

A Java Object for Symbol Storage

Symbol Table

This program was an assignment for CS 536: Introduction to Languages and Compilers, for the Spring 2018 semester. The SymTable class is to be used by the compiler that will be written later in the semester to represent a symbol table: a data structure that stores the identifiers declared in the program being compiled (e.g., function and variable names) and information about each identifier (e.g., its type, where it will be stored at runtime). The symbol table will be implemented as a List of HashMaps. Eventually, each HashMap will store the identifiers declared in one scope in the program being compiled.

Process

First I created the Sym class, implementing a constructor method, a getType() method which returns this Sym's type, and a toString() method which will eventually be used to print information stored in this Sym. Next, I created the SymTable class, implementing a constructor method, addDecl(...) method, addScope() method, lookupLocal(...) method, lookupGlobal(...) method, removeScope() method, and a print() method. Lastly, I created the necessary custom exception classes. All the while, I was building a tester class that tested each new functionality as I added it.

Skills

Java
Object-oriented programming
Test practices

View Source Code

Game Simulator

A Game with Score-Keeping Object

Game Simulator

This program was an assignment for CS 367: Introduction to Data Structures, for the Spring 2017 semester. In a group of six total students, we created a game simulator that utilizes iterators and ADTs. Some of the base classes were provided by instructors; the rest of the code we had to collaborate with our group members and build the code together.

Process

Skills

Java
Object-oriented programming
Test practices

Collaboration
Communication
Organization

View Source Code

Grade Estimator

Calculates Grade Based on Weight

Grade Estimator

This program was an assignment for CS 367: Introduction to Data Structures, for the Spring 2017 semester. Utilizing iterators, ADTs, and object-oriented programming, in a group of six total students we created a grade estimating application that calculates grades based on weight and assignment type within a list of graded assignments. Some of the base classes were provided by instructors; the rest of the code we had to collaborate with our group members and build the code together.

Process

Skills

Java
Object-oriented programming
Test practices

Collaboration
Communication
Organization

View Source Code

Signal Handler

Program Handles Different User Signals

Signal Handler

This program was an assignment for CS 354: Introduction to Computer Systems, for the Spring 2017 semester. Fot this program, I wrote three programs: one that handled the user signal Ctrl^C to exit the infinite program that allowed the user to do simple calculations and end the program when they choose, and another that handled signals sent by an external program.

Process

Skills

C
Linux
Command Line

View Source Code

Cache Simulator

Create a 1D and 2D Cache from Scratch

Cache Simulator

This program was an assignment for CS 354: Introduction to Computer Systems, for the Spring 2017 semester. Fot this program, I wrote four programs in total. One was used to create a 1D cache. Another was to handle creating the columns of a 2D cache, and a third was used to handle creating the rows of a 2D cache. The last program was used to simulate the creating of a cache.

Process

Skills

C
Linux
Command Line

View Source Code

Heap Simulator

Simulates a Heap Search and Memory Store

Heap Simulator

This program was an assignment for CS 354: Introduction to Computer Systems, for the Spring 2017 semester. Fot this program, I wrote three programs: one to generate "magic," one to verify the "magic" created by the first program, and another program that simulated a heap search and memory store.

Process

Skills

C
Linux
Command Line

View Source Code

Animation

Village Street

3D Viewing Pipeline

Village Street

As the fourth program for my CS 559 Computer Graphics class, this program was meant to have students create a 3D viewing pipeline. Using linear algebra transformation techniques, we were required to make a 3D drawing via filled triangles, and we also required to adjust visibility of objects using the "painter's algorithm." The more complex models or animations would be rewarded with a higher grade.

Process

Trying to be on the creative side, I tried to think of a shape that was uncommon and unique. I thought of top-spinners from playing with them as a kid. Implementing TWGL as my linear algebra library, I created this shape with a spinning animation. To make the shape more interesting and the animation more complex, I added a helicopter-like propeler to the top of the top-spinner and had it animated so that it would spin in the opposite direction that the top-spinner did. I then added a function to zoom in and out in the Canvas view.

Skills

HTML
CSS
Canvas

JavaScript
Transformations
TWGL

View Source Code View in Web Browser

Top-Spinner

3D Hierarchical Model

Project title

As the third program for my CS 559 Computer Graphics class, this program was meant to have students explore animating in 3D. Using linear algebra transformation techniques, we were required to make a 3D hierarcical model that could be animated. The more complex models or animations would be rewarded with a higher grade.

Process

When I think of viewing pipelines, I instantly think of video and computer games. So what I tried to do was create an environment around the viewing portal in which the user could control where he or she is looking within the view. It was meant to be like in a game where the viewer feels like they are in the game and controlling where they look an move. While this program is by no means a perfect representation of human movement, it is able to replicate certain aspects of it.

Skills

HTML
CSS
Canvas

JavaScript
Transformations
TWGL

View Source Code View in Web Browser

Axe Man

2D Hierarchical Model

Project title

As the second program for my CS 559 Computer Graphics class, this program was meant to introduce some of the more complex aspects of 2D animation. We were required to use transformations on hierarchical objects to demonstrate our knowledge of its usefullness in modeling and animation. The requirements were to draw any 2D shape with a hierarchical shape in connection with the first shape with some sort of transformation. The more complex shapes or animations would be rewarded with a higher grade.

Process

In order to have my program be more on the creative side, I tried to think of some sort of game that could be played within a 2D environment. The first thing I thought of was a lumber jack chopping down a tree. Using my knowledge of rotation from the Loading Symbol project, I was able to replicate a swinging arm. The most challenging part of this program was animating the tree to appear to fall down as the axe-man got closer to the tree.

Skills

HTML
CSS
Canvas

JavaScript
Transformations

View Source Code View in Web Browser

Loading Symbol

Animated 2D Object

Project title

As an introductory program for my CS 559 Computer Graphics class, this program was meant to get students familiar with Canvas and how to draw images within this environment. Particularly, we were supposed to get familiar with the 2D library Canvas provides. The requirement was merely to draw any shape, while the more complex shapes or animations would be rewarded with a higher grade.

Process

I first started messing around with the Canvas library to test out creating various different shapes. Then I explored some transformation animations. I eventually settled on creating a loading symbol simulation, using several JavaScript functions to control the animation.

Skills

HTML
CSS
Canvas

JavaScript
Transformations

View Source Code View in Web Browser