Levi Zelley

URL: inspirize.acva.dev
> Github Page <

Goal: Create a website to help writers and creatives come up with inspiration for small projects.

Features: Prompts pulled from a list in JavaScript, an expanding options panel with checkboxes used to determine which kinds of prompts will generate, a pure CSS light/dark mode toggle with JavaScript to remember the user's choice in local storage, and an expanding footer.

End Result: The site performs admirably, loading fast and without any visible hitches, but it could be improved by pulling prompts from a database rather than a list directly written into the JavaScript. This is the first site where I felt like I had a simple and easy handle on variables for light and dark modes, and I learned valuable tricks for animating SVGs.

URL: khuxbingo.acva.dev
> Github Page <

Goal: Make an interactive bingo board that fans of Kingdom Hearts can use for entertainment when livestreaming or watching a fan voiceover of a now-defunct Kingdom Hearts mobile game.

Features: Light/dark mode toggle, randomly generated interactive bingo board, checkbox to toggle spoilers in the board generation, checkbox to allow user text input to write their own bingo tiles, and save/load buttons to store the bingo board in local storage across sessions.

End Result: This is the first web app I've made entirely in JavaScript, and I was really able to refine my technique and learn a lot of new tricks both for aesthetic (the ripple effect when tiles are clicked) and functionality.

URL: Site not currently live
 

Goal: Make a web app to help BNHA fans rank their selection of BNHA characters from favorite to least favorite.

Features: Buttons to allow selection of which characters to sort and begin the quiz; a list of objects providing background colors, names, images, and comparison functionality; characters randomly paired off never unnecessarily or more than once, a randomize button to pick a new pair, and a final result displayed with characters sorted by rank. Working on a feature to save the result as an image to share on social media.

End Result: I made this app as an experiment with Brython, when I only had a shaky grasp of simple JavaScript. Thanks to figuring out all the direct conversions from Python code I was familiar with to JavaScript, I earned a much stronger understanding of JavaScript and the use of objects.

URL: themefive-scenicroute.tumblr.com
> Tumblr Theme Blog <

Goal: Make a custom theme for blogs on the microblogging platform tumblr as part of a series of custom themes inspired by various norse goddesses.

Features: Large header that sticks halfway up the page; absolutely positioned blurb in the top right that comes to nest in left sidebar; navigation links in the left sidebar; profile image, blog description, and post page navigation in the right sidebar; integrated with tumblr's theme editing system so that users can easily change images, text, and links without directly editing the html or CSS.

End Result: Tumblr users often used to have a very self-taught grasp of CSS and HTML, and teenage maximalists' sense of design, so this was my intention to create a blog that fit well within the Tumblr atmosphere while still bringing the knowledge I've learned of more refined HTML, CSS, and design into play.

URL: Site no longer live
 

Goal: Make a portfolio for Mott's Dynamic Web Applications class that displayed my resume with a download link, a list of classes taken at Mott populated with PHP from a MySQL database and sorted by whether the class had been completed or not, a display of all projects I had completed in Mott classes, my certifications, my student engagement, and my extracurricular activities.

Features: Course list populated by PHP and MySQL as mentioned, a rudimentary side-scrolling display of projects using anchor links to move between projects, two headshots of myself that did a card swapping animation when hovered over.

End Result: Due to timeframe and the limited nature of the assignment's requirements, I always knew this was only going to be a bare-bones, rushed version of my future portfolio. I love what I accomplished in that time for that class, and am glad to have been able to reuse much of it for this current version.

Used For: Digital Imaging II, a class focusing on mastering Photoshop.

Goal: Use Adobe Photoshop to combine everything learned in Digital Imaging II to create a surrealist collage out of manipulated photos, using no more than 20% of five different images licensed for free manipulation and use.

Techniques: Blending modes were make or break with this image, being used to mimic glow/reflection effects and to map different metal and wire images onto an image of my own hand. I also applied a final overlay after adjusting each item individually, to pull them together into a more coherent feel.

End Result: My understanding of blending modes is significantly improved after hands-on use learning which modes provided the best looks for different glow and reflection effects. This project also gave me a much better grasp on making sure all the separate parts of the image have similar temperatures and compatible colorings.

Used For: Digital Imaging I, a class focusing on mastering Illustrator.

Goal: Use Adobe Illustrator to make a vector map of any state including state name and NESW compass, populated with at least 10 icons representing vegetation, 5 icons representing wildlife, 5 icons representing landmarks/destinations, 5 icons representing cities (including names), and 3 icons representing activities.

Features: Topographical map translated into a vector, custom Petosky stone used as the compass, and custom vector graphics for the icons representing flora, fauna, and locations across Michigan.

End Result: I'm incredibly proud of what I achieved with this map, and I might only change how awkward some of the organic icons turned out, and how abruptly many of the icons touch the map. Overall, I find it a very loving if not entirely thorough representation of what my home is all about.

Used For: Typography I, a class teaching the basics of typography.

Goal: Create a poster design that has seven clear levels of hierarchy, highlighting a quote and a particular part of it, another quote from the same source, and my own thoughts on the quote.

Techniques: Apart from font size, I used weight, outlines, and backgrounds to indicate the importance of different parts of the text, and direct the eye to these parts in order.

End Result: I am very proud of this design, and am pleased that when I look at it, it still holds up in my opinion even after years. It's sleek, creative without being overstated, and simple. As someone whose taste leans towards maximalism, I can look back to this project and see when simplicity is better.

Used For: Digital Imaging I, a class focusing on mastering Illustrator.

Goal: Create a simple self portrait from tracing a picture of myself, using only 5 colors as a palette.

Techniques: With a palette of only five colors, I was able to use semitransparent layers to create shadowing and lighting effects that really helped define the image. The rest was simple tracing with the pen tool.

End Result: I think I produced a solid image for use as an icon potentially. A more stylized image may have looked better in the end, but I found this a good exercise in forcing myself to use less detail where it wasn't needed.

Used For: Typography I, a class teaching the basics of typography.

Goal: Create a z-fold mini zine that tells a short story, shares a quote of my choice, and only uses text and special characters to create the illustrations and decorations.

Techniques: Knowing that the intent was to only use text and special characters to convey all illustrations, I went skimming through all special characters and picked out a small handful to represent grass, flowers, and stars, and any other ones I felt could be useful in making shapes or decorations.

End Result: I think I told a very effective short story, and articulated the shapes and settings as effectively as could be done with only text, and I'm pleased with the creative ideas I came up with to decorate the words.

Used For: Digital Imaging I, a class focusing on mastering Illustrator.

Goal: Create a cityscape in isometric view using a limited color palette.

Techniques: I decided early on that I wanted a futuristic/sci fi feel to my city, so I settled on a color palette with bright oranges and purples, and used blending modes to make "hologram" decorations on the buildings.

End Result: I think my city effectively conveys a 3D space in a visually interesting way, and I love it. Without constraints I'd have worked with a less limited color palette, but the most important thing I learned from this project is to be more conscious of space, so that the top of the image doesn't have to cut off so sharply.

Used For: Typography I, a class teaching the basics of typography.

Goal: Using a provided image, edit text over the image to make it look as though the text is part of the original photo, painted onto the environment.

Techniques: In addition to blending modes, I also used transparency and selecting color ranges to add some spottiness and blurriness to the lines to resemble the wear and tear of being driven over.

End Result: Over the pavement, this turned out fantastic. I'm much less satisfied with how the words turned out over the grating, and I might make different choices in the color range selection when applying specifically to those kinds of areas in the future.

Used For: Typography I, a class teaching the basics of typography.

Goal: Create studies of 12 words representing myself, aiming to convey the meaning of the word using only the word itself.

Techniques: For some words I took a literal approach to conveying their meaning, relying on recognizable shapes, but primarily I tried to use rotation, size, and space to evoke implied meanings.

End Result: "INDEPENDENT" and "PATIENT" are the most effective studies shown here, with "BUTCH" being the most literal and thus least effective. I learned a lot about text controls throughout the course of this project, and got a better grasp of how to use negative space to my advantage.

> View Code on GitHub <

Goal: Create a Windows form project for class in C# that utilizes at least three forms, interacts with a data source of at least 500 records, utilizes HTML reporting onscreen, deploys with a setup application, includes at least one class object, and is documented with XML documentation.

Features: A class object used to store global appearances across all three forms, a Microsoft Access database with over 500 records, a series of checkboxes, radio buttons, and dropdown menus that effect how the queries for access are constructed, and the ability to add records.

End Result: This program worked fantastically as a prototype for the Inspirize website, and was an excellent way for my to flex my C# and .NET programming skills.

> View Code on GitHub <

Goal: Create a website for class using ASP.NET, C#, database access, and XML documentation that has a landing page, an about me page, a page that interacts with the colors selected by the user, and a page that loads from a database and displays information using in-browser dialogue windows.

Features: Colors and data in the .aspx files are drawn from the associated .cs files. Colors of items placed in design view and backgrounds are affected in .cs files by user input. A database connection is used to populate the movies page, and C# is used to display the title of the selected record in an alert.

End Result: This COMS-276 assignment didn't allow for much creativity or straying from the example we were given, but I was pleased to learn ASP.NET and flex beyond the boundaries of the assignment wherever I could.

> View Code on GitHub <

Goal: Create a program for class with appropriate form design, meaningfully named controls and variables, a functioning close button, conditional statements, methods, text file access, lists, and class objects; all with informative inline documentation.

Features: Used clsQuizQuestions class to make it easy to create and add questions to the quiz, question counter, restart/retake buttons that work from either form, radio buttons that reset to allow user to pick their answer for each question, public reference to the first form that the second form can use for this purpose, and second results form. All images are pulled from resources, so that the quiz won't rely on other files in the same folder to display properly.

End Result: This is an extremely effective form for what it was created to be. Going above and beyond the requirements allowed me to teach myself how to store files in resources and reference/affect one form from another. This still feels like one of my greatest successes in learning in my time at Mott.

> View Code on Github <

Goal: Create a program that would allow many items in a list to be ranked against each other, taking as little time as possible.

Features: Class object for list items, containing lists of objects ranked above itself and objects ranked below. These lists are used to skip ranking in cases where one character is already logically above or below the other (A was ranked higher than C, B was ranked lower than C, A is obviously higher than B even without direct ranking). Program loops until all objects are logically ranked, at which point objects are ranked by the amount of objects ranked higher than them.

End Result: This program still takes longer than I would like it to, but it was an excellent exercise in class objects and how to cut down on the amount of times an item would be ranked. It performs its intended function perfectly.

> View Code on Github <

Goal: Compute and display estimated moving truck rental cost. Estimated cost will be calculated depending on variables of truck type, daily or weekly rental, time rented, and mileage.

Features: A nested list used to store daily vs weekly rates, a global variable used to hold the mileage not charged for weekly rentals, a main() function to keep the entire program contained, and a loop that keeps going until the user chooses to terminate.

End Result: This project challenged me to work with menu loops, nested lists, somewhat complex math, and functions in Python. It was a voluntary exercise in critical thinking and problem solving, as I had already completed and submitted the other option for the final project at the time I worked on this one.

> View Code on Github <

Goal: Encrypt or decrypt user input by mapping one character from user input onto another for output, displaying the altered message back to the user.

Features: Try/except error handling, menu looping, parallel lists and indexing, main() function to keep the program contained.

End Result: This project challenged me to work with menu loops, parallel lists, indexing, and functions in Python. It was a good exercise in cutting down on bulky and repetitive code, and helped me significantly in learning how to optimize my code.