Front-end development

I'm currently learning to code through SheCodes. I'm primarily working with HTML, CSS and JavaScript, and the stuff I've coded include a world clock, a weather app and an AI haiku generator. Not to mention this website you're on (it's open-sourced on GitHub)!

Read more about each project below. 👩‍💻

screenshot of a world clock coded using html, css and javascript. Showcased cities are: Buenos Aires, New York, Edinburgh, Addis Ababa, Tokyo

Vanilla JS Weather App

Aside from a few simple html and css landing pages, this was my first real challenge using JavaScript and working with APIs. I spent a lot of time staring blankly out my window while working on this, especially when I couldn't figure out why the wind speed data wasn't updating. Until it finally turned out that my dummy numbers were the exact same as the windspeed in that particular city at that point. 🤯 What are the chances!

Launch project
screenshot of a weather app, made with React

React Weather App

Having built the previous weather app using vanilla JavaScript, it was definitely an adjustment to learn how to build using React. What a great library! I also experimented with importing different icons in this project, and unlike the previous one, this one is built to be responsive, using Bootstrap.

Launch project
screenshot of a world clock coded using html, css and javascript. Showcased cities are: Buenos Aires, New York, Edinburgh, Addis Ababa, Tokyo

World Clock

The world clock was the final project for a workshop on more advanced JavaScript. It was my first foray into using JS libraries, specifically Moment.js in this case. I also wanted to challenge myself and add some fun facts to the selected places.

Launch project
screenshot of an AI haiku generator

AI haiku generator

I, for one, welcome our new [ai] overlords (well, I have some qualms, but don't tell them that), and in this project I tried out another JS library, namely one for the typewriting effect. And of course I worked on my prompt engineering. By now I think it's clear that I'm no graphic designer, but the code works fine!

Launch project
screenshot of a travel website about the fictional place Baldur's Gate

Travel Website

After learning how to use Bootstrap (as seen on the website you are currently on), I practiced achieving responsiveness using CSS grids and media queries among other things on this travel website project. Enjoy your trip to Baldur's Gate on the Sword Coast in Faerûn!

Launch project
screenshot of a dictionary, made using react and bootstrap

React dictionary

After building the React weather app mentioned above, my next project was this React dictionary. I used two different APIs along with Bootstrap.

Launch project
screenshot of a simple pink heart, made with css

CSS heart animation

This one was literally just a personal project where I tried to figure out how css animations work. I figured it out! 🩷

Launch project