Short Explanation
Petrolida 2021 website was made to promote Petroleum Integrated Days 2021 at Sepuluh Nopember Institute of Technology. I developed this website using Next.js to implement easy route management with Static Side Generation then can be exported statically to Cpanel.
Project Goals
This project objective is to give information and guide the user to register for the competitions and the other pre-event through google forms. There are four kinds that are developed in the website which are Landing Page to give the user general knowledge about the event. Then, there are 7 competitions that were made into different routes each one. Lastly is the pre-event such as the talk show.
Tech Stack Used
This project was made using Next.js and Tailwindcss. Although this is fairly only a static website that didn't really need much complexity, using Next.js really simplifies the routing of the website and help me make reusable components. I usually use tailwindcss when using the Next.js framework to increase productivity.
Spotlight
Open Graph & SEO Optimization
The spotlight on this project that I spend some time on SEO and I got into opengraph where you can get a link preview with a custom description and opengraph image.
Animation
I also implemented some animation on this website using the GSAP library. It was my first time using GSAP on React projects.
The Problems and How I Deal With It
In this project, the problem that I found was that the domain that was given and needed to use its old and kind of hard to configure. Eventually, I only host the static files and ditch out the Image Optimization feature from Next.js. It was not ideal, because I need to optimize images that are being used to increase loading speed.
I also struggled with implementing ScrollTrigger with GSAP because there are not many blogs or tutorials on Google, so I take the chance on reading the documentation to make it work.
Lessons Learned
This is my first website for an event so I really consider a lot how to do a great practice on SEO, I discovered a library called next-seo that helped a lot on configuring SEO using Next.js.
In this project, I anticipated that there will be many revisions because that is what usually happens, so I try to reduce writing HTML and make everything based on the data, so I store the data in a javascript file and just map it out to the layout. This makes revising much quicker and easier.
This project really taught me a lot about making a cleaner code and make the development process more effective by using some library that helps.