Weevil is a portfolio website presenting a student animation project.
Frontend Development
Overview
Scope
This project functions as a portfolio website for a student 3D animation project created by the masterclass for animation and visual effects at the UAS St. Pölten.
I was commissioned through a tender to implement the web design created by another commissioned team member.
Involvement
Frontend development
Date
March 2024 - June 2024
Tools and Technologies
Figma, React, Webstorm
A Website To Showcase A Student Project
Objective
The goal of this website was short and sweet: to create a one-page portfolio website that showcases the semester project of the animation and visual effects class.
The animation itself, produced by the entire animation class, was a 3D trailer for a fictional TV show about two rival weevils and ill intentions, hence the title - The Root Of All Weevil. The portfolio website was intended to align with the visual design of the animated video.
My personal learning objective for this project was to get to know the React framework, which I hadn’t had the opportunity to take a closer look at before.
Target Users
As a portfolio website, the site is meant to present the animation project to both potential clients and employers alike in a visually engaging manner. With the YouTube upload embedded directly into the website, they can watch the full video right there and then.
Development
I was commissioned via tender to handle the web development. Another student, commissioned for web- and logo design, was tasked with creating the designs I would then turn into a working website. Part of my responsibilities was therefore to work together with the web designer to bring her vision to life. I assumed the role of developer, and tried to implement the design as exactly as possible.
Requirements
The specifications for the portfolio website included a brief overview of the project, embedding the finished animated film as a YouTube video, introducing all contributors including relevant social media links and contact details, and providing insights into the production process of the animated film through a picture gallery. Another requirement was a responsive design and optimization of the website for mobile devices. The visual design of the website was also to continue the brand design developed for the animated film, thus emphasizing the visual language and color scheme of the animation.
Process
The screen design concept was developed by another student hired for the project via tender. Parallel to the start of the semester project, the screen design underwent several rounds of feedback, both with the animation team and with me, so that I could also provide feedback on questions regarding technical implementation.
Finalized Screen Designs By Anika Podrietschnig
Getting To Know React
Since I didn't have to worry about the design, I used the time and opportunity to familiarize myself with React, as I had never used this framework before and this project was a good place to start. At the end of April, the finished screen design was approved by the animation team. I was able to clarify further questions in a meeting with the coordinator for external contractors and finally begin implementation with React and Vite. Since the website is static, no backend was necessary.
Working With The Client Group
With WhatsApp as the primary communication channel, all contractors received regular updates on the current status of the project and relevant deliverables from the work packages, as well as their deadlines. I was primarily in contact with the coordination lead on the animation team, who handled the majority of communication between me and the rest of the team, and who was my primary contact for any questions from my side.
By June, all requirements for the website had been implemented. After another round of feedback, a few additions such as a graphic illustration were added and a separate domain was purchased for hosting.
The actual go-live of the website was delayed due to production delays on the animation project. Since I had my own deadline for handing in this project as part of my curriculum, I was able to set up hosting with a placeholder video embedded on the website until it could be updated with the finished animation video.
Possibilities for Improvement
In hindsight, I wish i would have offered some imput regarding the design itself, which I feel could have benefitted from some more collaborative brainstorming beyond technical matters. I refrained from doing so since I was commissioned for web development only. With the responsibility for the web design lying solely with another person, I initially approached this project as an opportunity to fully inhabit the role of the developer, challenging myself to let go of the need to have control over the visual design. Looking back, there are some things I would have done differently, and the site may have benefitted from my speaking up about them.
Primarily, however, I believe this portfolio website suffers from a lack of content. This resulted in a one-pager that could have presented this massive project in a much more detailed and engaging manner, such as detailing behind the scenes processes, setbacks, and triumphs along the way. As a portfolio site, it currently does not provide that detailed glimpse into the creation and collaboration process. Projects, and especially student projects, after all, are allowed to be messy - that’s where the opportunities to learn and grow arise. Documentation of how these issues are solved provides valuable insights for colleagues and potential recruiters alike.
The End Result
The website is can be viewed online. Press the button below to see the final result!