This is a website that I developed almost 90% or 95% 5 years ago, still live by the team at Code Nation Australia today in 2025, for whom I worked for over 4 years.
This was basically the last website I developed for them in 2019, I had a last work in 2021 for them with a translation of a template, but not a full website.
The Bogotá Bulldogs is the first amateur australian football club dedicated to establishing and growing the great australian sport in Bogotá and across Colombia.
The first image above is how the website looked like in 2019 in my old Macbook Pro in a 1366px wide screen, during its development—see the text still as Lorem Ipsum. The second image shows how the website looks today in 2025 in my new 1440px wide screen Macbook Air but connected to a 1920px (HD) wide monitor. Everything expands a bit, compared to the previous image.
I finished this full website and left Code Nation when it was just about to be launched. It still remains basically the same today, although the team has added many new photos through the CMS that I configured (using Forestry.io CMS), they added the Victoria (state government Australia) logo in the Footer, and populated a couple of sections like the Sponsors.
The above is how the website looks today in 2025 in my new 1440px wide screen Macbook Air connected to a 1920px (HD) wide monitor. The second image is showing a Ladder Section that I had to improvise a bit the design and functionality for, as there wasn't a desktop design for this specific section. I'm explaining further below.
As one of my bosses (Corey McCann) and our first environmetal manager and consultant (Alex Rafalowicz) lived in Colombia for a couple of years, our clients in the Melbourne based digital agency came from all around the world: most of them Australian NGOs and companies, some from the USA, some from the UK, and a few from Colombia.
The above are two screenshots of the live website as it remains in 2025 seen in a 1920px (HD) wide screen.
This is a great example of a collaboration website with Bogotá and the sports team of Bogotá Bulldogs Team.
Usually our work pivoted around Non-Governmental Organization issues like environmental, green energy, social, humanitarian, or health awareness and campaigning. Sometimes we were involved in political issues or campaigns; we even created some sites or landing pages that just lasted e.g. some weeks for a specific campaign or event, most which I no longer have anywhere in my 2 portfolios aside of the 28 websites I do have (displayed as Case Studies), as they were down and couldn't access them later in 2020.
But Bogotá Bulldogs is an example of something different.
The above are five more screenshots of the live website showing the Image Gallery as it remains in 2025 and as it looks like in a 1920px (HD) wide screen. Showing a few different images that the team have uploaded via the CMS that I configured.
I perfectly remember after 5 years that one of the last tasks that I was developing in the website was the slick Carousel or Slider in the image above, which now looks great with more recent pictures. I helped with the first imagery which included the 2 pictures in the Header Image at the top of this Case Study and in its Thumbnail Image in my HomePage, and many more real photos and content that was ready at the moment. They added many more event pictures and copy later while using the site.
The Carousel used this exact plugin from Ken Wheeler (Slick Carousel) which I then months later used in my first ever Portfolio (V1) (2019) to display my Case Studies, which was black (using dark-mode) and heavily inspired by this (Jomor Design) old website made in Webflow. I no longer have a single screenshot from it, but it evolved to my second an third Portfolios.
It used the same Slider Syncing option with the little Thumbnail Images below synching with the main image. I then used it here using the Right to Left option by dragging (as if they were flyers).
Small micro-interactions or small design elements in the page like the Carousel's small thumbnail-images having an opacity, except for the active one which is more vibrant, the little yellow border, or the red play buttons above in the videos, are small interpretations that I did while in-development and that weren't specified in the Desktop design that I received. The same was almost always with hover-effects like in the Nav, thumbnails, links, and more.
Same with the Mobile and Tablet versions which I never received a design; I had to always do these Responsive iterations of the Desktop design for Mobile and Tablet.
I remember this one occation having to improvise the design of the Ladder in this website (including the small hover effects or micro interactions, plus functionality) as I think it was not in the original Desktop Design, but I had to base it in another Ladder or Table example.
The above are three more screenshots of the live website as it looks like in 2025 in a 1920px (HD) wide screen.
One of my main front-end development tasks always at Code Nation Australia was to iterate on the (static) Desktop Design that I used to receive (made in Adobe Photoshop, Adobe Illustrator, or Adobe XD) mostly as a PDF, and create the Tablet and Mobile versions making it a real Responsive Web Design that adapts, or changes a bit its content, hides content or UI, or switches to a more suitable Mobile UI, for different viewport devices.
I studied Web Design and Design for Mobile Devices in a continuing education University course at Pontificia Universidad Javeriana in 2013 after graduating from the Universidad Jorge Tadeo Lozano as a Publicist.
I learned stuff that few Web Designers know or do, I learned the proper and even fun ways to do Responsive Web Designs, like e.g. reducing an image of a band of musicians with 5 members, to one consisting of now 3 members in Tablet, or just 1 musician in the Mobile version. Not just re-sizing the same image for Mobile as everyone out there does.
Although I was a Developer and not a Designer within the company, and I could never fully create a whole design, so I couldn't apply the above concepts, I was trusted with this part of the Development and of a usual Web Design and I was the one to do these Responsive iterations of the designs while developing for at least 28 websites within 4 years. I never received a Mobile or Tablet design, just the Desktop one.
I was also tasked to create the Accessibility features with e.g. hidden UI elements just for Keyboards or Screen Readers to access, labelling content for voice-only devices as well as right away for SEO, duplicating content in e.g. Modals or Popups (which becomes a problem for these devices) for them to access the equivalent content—in fact everything that is in the real definition of creating Accessible Web Designs which involves way more than simple color-contrast-ratio (as many Graphic Designers think).
We had to address this task since we were almost always creating websites accessed by people from all ages and circumstances.
