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.
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.
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.
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.
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.
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.