CSS
is
fun!
Hi!
I'm Giulia Cardieri, a Brazilian front-end developer located in Toronto, Canada. I enjoy creating visually pleasing and accessible web applications. I have over five years of experience working with technologies such as JavaScript, CSS, Vue.js, React and HTML. I've been working with north american companies since 2018.
In 2019 I got a master's degree in Computer Science (on the HCI field) from Federal University of São Carlos (UFSCar Sorocaba). I developed an approach called PWA-EU that assists developers to create PWAs that empower end-users. This was when I learned that besides front-end, I'm also eager to learn and practice end-user research. To learn more about PWA-EU, check my publications. On October 2021, I finished a UX Design course on Mergo UX.
I'm a CSS and Women in Tech enthusiast. I co-organize/speak/attend events in those fields, such as Rails Girls Sorocaba. I believe the people who are already working with technology should share their experiences and knowledge to create a more welcoming place to those who are starting, as the technology field has its challenges.
Download my resume to learn more about my experience and education.
Work Highlights
GeoFun - a geography website for children
As a big geography fan and a postcard collector, I found the planning phase of this project particularly exciting. Users can engage with an interactive map or explore a list to discover interesting facts about each country. The data is sourced from the Rest Countries API. All the illustrations, except the map, have been created using CSS!
Initially, I used Figma to select the colors, fonts, and overall style. Once the initial phase was complete, I planned how to implement the interactive map. I decided to use an existing SVG of the world map and customized it by assigning HTML IDs to each country code.
Finally, implementation! While going through React's documentation, I noticed a recommendation to use a framework like Next or Gatsby. Considering my familiarity with Nuxt, a similar technology, I opted for Next. Exploring the React world while working full-time with Vue.js was occasionally challenging, but I still thoroughly enjoyed working with React!
For the CSS aspect, I chose to use CSS Modules and the BEM architecture (block element modifier). These features helped me maintain an organized codebase. However, when it comes to CSS, Vue has an advantage over React with its Scoped attribute, which accomplishes a similar goal as CSS Modules.
Flower Maker - a pure CSS interactive page
This is an experiment with CSS and HTML in which you can customize your own CSS flower. I wanted to explore custom properties inheritance and default values, besides testing the new :has selector. This is not accessible and works only for modern browsers due to how new the :has selector is. I do hope you like colors and flowers, if you don't, this might not be the right experiment for you.
Lola - UI Components Library (in progress!)
Lola was my dog who passed away in 2021 after 16 years being my friend. The goal of this library is to create UI components such as buttons, accordions, cards, form controls and others that are ready to use and are accessible. I added Storybook as a way to document and test each component individually. My plan is to use these components as a base on future Vue.js projects.
Giulia & Gabriel
My wedding website
Well, this was my wedding website created with Vue.js components and plain CSS. I designed everything and decided to make something simple that would match the cerimony's and party's decorations.
Dinokiki, a fun (and loud!) website
Dinokiki is a personal project created in 2014 and my favorite playground to learn new technologies. It's a website about a green dinosaur that speaks the Kiki language (beware: it's loud!). You can interact with Dinokiki by letting him speak to you in different voices and even send a kiki (e.g. audio file of you singing your favorite song using only ki syllables) that can be included on the website.
A collection of pure CSS games
Who said we can't build games using only CSS and HTML? Well, I don't know who said it but I have a collection of CSS games to prove this person wrong. My goal is not to set CSS as a tool to build games, instead, I hope to make people learn and explore the limits of the CSS.
A collection of pure CSS drawings
Drawing is an amazing skill that I, unfortunately, don't have on paper, but I do have with CSS! Anyway, drawing with CSS is fun but it's also a lot more than that. I learned a lot of new things by drawing with CSS. Similar to games, we can explore how to use CSS in a different perspective and how to use it better in work environments.
CSS Technical Articles (in Portuguese)
After getting into this point in my portfolio, I hope you already noticed that I'm a huge CSS fan! One of my goals is to share why I love CSS and hopefully help other people to feel the same. Based on that, I enjoy writing articles about CSS. Initially, I'm writing in Portuguese because there is a lack of creative CSS content accessible to Brazilian developers who don't speak English.