TITLE: TOP 5 BALLPARKS
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code, Photoshop
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/07_final/
DESCRIPTION: The final project for FMX 311, Online Production, we were tasked with showcasing all of the skills we learned throughout the semester by creating an informative webpage. Using the parallax design principle, as the user scrolls through the site they are met with a beautiful image of a ballpark, as well as a video displaying a famous moment at that park. Each ballpark image had the background removed in Photoshop so that it stood out on the page. The background features a continuously scrolling gradient meant to reflect a sunset.

TITLE: SPACE
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code, Photoshop
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/06_parallax/parallax.html
DESCRIPTION: Inspired by the “Cromulons” (planets that are heads) from the cartoon “Rick and Morty” each one of my heads is manipulated using CSS image filters that change as you scroll the page, reflecting a creative use of parallax design. If you hover over each of the images, they change and their mouths open, as if they wanted to eat the cursor you are dangling in front.

TITLE: INTERACTIVE RESUME
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/05_resume/interactive_resume.html
DESCRIPTION: Inspired by my love of retro tech aesthetics, my interactive resume is a recreation of Windows 95 using only HTML, CSS and Javascript. The “My Documents” icon is clickable and reveals the Windows 95 file system with folder to access examples of my work in different digital mediums. As you click around you can find work framed by recreations of MS Paint, Internet Explorer and a system video player.

TITLE: YBOR CITY
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/04_mmediapoem/videopoem.html
DESCRIPTION: Created using HTML, CSS and Javascript this “video poem” is dedicated to the attractions and culture of Ybor City in Tampa, FL. As you hover over each of the dots, a masked video plays showing different things you could see or do during the day in Ybor. However, click on the text in the top left and the nightlife comes alive. The color palette changes and the videos are replaced with videos from a night on the town.

TITLE: MURDER! WHO DID IT?
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code, Photoshop
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/03_imgtxtpoem/imgtext.html
DESCRIPTION: This website repurposes my “Multiplicity” project and turns it into an interactive comic strip. Using HTML, CSS and Javascript, “Murder! Who Did It?” takes inspiration from Mexican Fotonovelas. Each of the images was created in photoshop and then brought together in the code. It features a timer that tells the whole story, or you can hover over each panel to try and uncover what happened.

TITLE: IMAGE POEM
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/02_imgpoem/imagepoem.html
DESCRIPTION: In a straightforward example of how CSS animations can be applied to HTML elements, I combined that with interactivity to bring this comic strip to life. As you hover over each of the elements the animation reflects and emphasizes the action in the frame, that of a baseball pitcher and batter facing off.

TITLE: MEMORY’S FOREVER MADNESS
MEDIA: HTML/CSS/JS
SOFTWARE: Visual Studio Code
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
LINK: https://fmx311.santiago.bz/FMX311/SP22/bryan_neill/02_imgpoem/imagepoem.html
DESCRIPTION: This piece takes inspiration and a direct quote from one of my favorite comic book characters, the Joker. This text poem interactively spirals his words, spiraling them down representing how your memories can take you to dark places in a descent to madness. Created using HTML, CSS and Javascript the text was turned into SVGs in or to manipulate each character onto an arc. This proved to use a ton of browser resources as the project will not open up in Google Chrome (further driving me mad).

TITLE: LISA
MEDIA: HTML/CSS
SOFTWARE: Visual Studio Code
HARDWARE: macOS
CLASS: FMX 311 Online Production
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 22
INSTITUTION: University of Tampa
DESCRIPTION: In practicing some CSS, I challenged myself to recreate the famous Apple Lisa computer using pure HTML and CSS. Changing border colors to show depth and matching the font style of the computer are small details that I feel really bring this work together.