My name is Isabella and I’m a student at Sciences Po in France. Growing up in Ecuador exposed me from an early age to being in close contact with the marine ecosystems of my country — from going to beach cleanups to snorkeling with turtles. I started programming at the age of 11. What makes this an exciting career is being able to use my analytical and creative skills to develop a product that users enjoy.
When I first heard of Google Summer of Code (GSoC) I was intrigued and I decided to apply, but I didn’t think that my chances of getting accepted were high. I browsed through the different organizations but the one that captivated me the most was Orcasound. In the past years, I have witnessed the deterioration of my natural ecosystem. It seems like a wonderful opportunity to improve my skills while contributing open source code to an organization that is doing everything it can to protect the Southern Resident killer whales.
My first interaction with Orcasound was in their Slack workspace. I Joined different channels and participated in the meetings of the UX team, and collaborated by creating mockups of the Figma files into simple CSS and HTML websites. At the same time, I was writing my GSoC proposal. My goals for the summer for this year’s GSoC are to implement the newest version of the Orcasound homepage. At the time of writing this article, the website is built on WordPress (open source software!). One of my first challenges was to decide whether to create a new WordPress theme for the current site or to migrate to using a static site generator and a CMS.
This was a challenge for me since I would be rebuilding everything from scratch with new technologies that I hadn’t used before. But after careful consideration, we decided to go the static-site route and we chose Next.Js as our stack and Netlify as a CMS. However, since Next.js is a react framework, a technology that I am familiar with, the learning process was fairly simple and I had no problem getting started with it. I started creating the Home and the About page since they are the least content heavy and I had to optimize them for mobile.
Along with making progress on these projects, I used a combination of react-bootstrap and material-ui. I ran into some issues at the beginning when it came to optimizing my files into mobile. For example, the hamburger menu for the navbar blended with the text of the web content, as well as some of the material ui components wouldn’t respond to the CSS classes i added. But I managed to fix some of those issues by changing the Z index and the top property in my CSS. So, now the Hamburger menu is fully responsive.
As for the UX design, I worked alongside other team members to go through the orcasound.net analytics in order to create a sitemap and make improvements for SEO. We went over the google analytics metrics and discussed further improvements that can be done for the redesign. We also modeled some designs for the mobile version.
Furthermore, this is my first time contributing to an open-source organization and I was a bit anxious about taking on this challenge, moving into to unknown waters, but my mentors helped me navigate through this quest. And things became clearer through practice.
So far it has been an amazing learning curve for me. There has been constant trial and error, but I’m glad to be able to improve my skills. I’m happy to be able to collaborate with an amazing group of people that are always willing to give a helping hand and that are committed to this incredible organization.