Tyler Simon's logo

Project Showcase

Browse my recent projects to get an idea of my skills and what I've been working on lately.

Capstone Project

Created: Early 2023

LARAVEL ALPINEJS

To wrap up all I learned through school, I was paired with two other students and tasked with building a website from scratch for a client. We coordinated as a team to design and develop this complex, multi-page website which had many features.

I participated in much of the entire process, including the design sprint, interviewing the client, some planning on how the site would look and function, etc. However my main focus was a mix of front-end and back-end development for the majority of it. I had to learn the PHP framework Laravel and use it to implement much of the functionality that was required on the site. I was able to achieve this in the one semester that we worked on this project.

Specifically, these are the notable tasks or features that I completed:

  • Normalization and completed the ERD for the database.
  • Login and registration system with proper authentication - users see different things depending if they are a guest, logged in, or admin. This also includes forgot password, remember me, and email verification.
  • "Wizard" forms using AlpineJS for a better user experience.
  • Profile update functionality - a logged in user can update their personal and contact information, change their email address, and change their password.
  • Admin dashboard (seen in the image) - admins can view a nicely laid out table, with pagination and search. Admins have the ability to set users as admin or back to user, and to delete users. Admins can also add and manage existing "sponsors", which are displayed in the website for everyone to see.

Note: Due to communication challenges with the client who requested the website, it wasn't implemented. So unfortunately it is not live and I cannot showcase it.

Desktop screenshot of an admin dashboard table

Learn By Habit

Created: Late 2022

HTML CSS GRID INTRINSIC LAYOUT

An assignment with a primary focus on CSS grid, this was a fun challenge and my first time using the technique. For the project, I was provided with a Photoshop document, and the instructions were to create a webpage based on the wireframe using HTML and CSS.

This assignment differed from similar ones I had done in the past in that I was given the wireframe for the largest screen size and tasked with planning and implementing the designs for the smaller screens in addition to all the coding. There was also an emphasis on "Intrinsic Web Design,” where the design was supposed to be highly usable across all screen sizes using things like grid and fluid typography, with minimal use of media queries.

Note: Build only includes the homepage. Additional pages not linked.

View Website
Desktop screenshot of a hero banner and navigation for a website called Learn By Habit

Creative Studio

Created: Early 2022

HTML CSS RESPONSIVE

This website was an assignment for a second-level web design fundamentals class. It was meant to test my skills in developing a responsive website based on a provided Photoshop wireframe, specifically the ability to use various CSS techniques like flexbox, navigation, horizontal scroll, and some form styling.

It's a pretty sleek design I enjoyed building and coding from scratch to look and function exactly like the wireframe, which I've become better at doing. The design is responsive and looks great on all screens.

Note: Build only includes the home and contact pages. Additional pages not linked.

View Website
Desktop screenshot of a hero banner and navigation for a website called Creative Studio

Blog

Created: Early 2022

HTML CSS RESPONSIVE

This was another website build assignment for the second-level web design fundamentals class, where I was given a Photoshop wireframe and tasked with replicating it using HTML and CSS. I implemented specific CSS techniques taught up until that point, including flexbox and CSS positioning.

Additionally, the build features dropdown menus. The CSS positioning techniques were also a bit tricky at first, but it definitely adds extra creativity and flexibility.

Note: Build only includes the homepage. Additional pages not linked.

View Website
Desktop screenshot of a hero banner and navigation for a website called Blog