Hi, my name is Caio Marcellus Welcome to my portfolio

I am a self-taught/community-taught full stack developer based in Toronto with a diverse background that ranges from teaching to working with contract management on Brazil's biggest development bank. By the way, I am Brazilian and I can communicate in 4 languages: Portuguese, English, Spanish and French. I love learning new things, languages are one of them.

I started my career shift in 2020. Since then I've been creating projects, being an active member of communities, helping others and asking for feedback on my projects. I follow and learn from valuable developers on youtube, on podcasts and newsletters. I also love sharing what I learned.

I have worked for a digital marketing agency as a developer and for an NGO as a lead developer and mentor. With that experience and my non-developer background, I built valuable skills on time and project-management, the importance of communication and continuous learning.

By looking at my projects, you will see some different technologies: Next.js, Astro, WordPress, PHP, Sass and more. I seek not to be a one-tool-for-everything type of developer. Because of that, I sought to learn well the foundations of the web - HTML, CSS, and JavaScript - and from there being able to learn the right tool for my next project.

I specialized in creating pixel-perfect implementations of layouts. Using modern CSS techniques, I build websites that strictly follow the desired design, while also adapt to the many different screens and user preferences.

I also believe that accessibility should never be neglected, so I am constantly learning more about the subject and its many aspects. An inclusive web is the ultimate goal, and I work to progressively build the path to it, either by raising the subject on the projects in which I work, or by writting about it on my blog.

I invite you to explore my projects and my articles. Reach out to me if you have any questions.

My Projects

Company registration

Technologies:

  • Next.js
  • React
  • Sass
  • TypeScript

Summary: A single page application where the user can create, update, display and delete companies from the database. The project was thoroughly tested for accessibility, allowing full zoom and bigger default font-sizes.

Project screen for desktop

Power From Within Clean Energy Society

Technologies:

  • Astro
  • CSS
  • TypeScript
  • WordPress

Summary: Website with information about the NGO. Project created using Astro and Headless WordPress. The content is easily updatable by users with no coding skills whatsoever. We used Static Site Generation for increased performance.

Project screen for desktop

Meteora

Technologies:

  • WordPress
  • PHP
  • CSS
  • HTML
  • JavaScript

Summary: Webpage for ficticious store built with WordPress. I created a Custom WordPress Theme to have total control of the frontend. Products are easily updatable by clients with no coding experience.

Imagem

Codechella

Technologies:

  • HTML
  • CSS
  • JavaScript

Summary: Webpage for ficticious music festival. Built only with HTML, CSS and JavaScript, without the use of libraries. Website has many animations built from scratch.

Project screen for desktop

Pomodoro

Technologies:

  • JavaScript
  • CSS
  • Tailwind
  • HTML

Summary: Description coming soon

View all

My Articles

  • Fluid Typography

    Summary: Learn how to make fonts responsive without using Media Queries with fluid typography. It is an elegant solution that brings visual integrity to your project on various screens.

    Read more
  • Using REM Doesn't Make Your Website Responsive - Here's Why

    Summary: Knowing that typography is a topic that gets so little attention from developers (yeah, I am talking to you, who only declares font-size and font-family and completely ignores font-weight and line-height), I decided to write this article to talk about best practices when working with text in web development.

    Read more
  • Tips for creating better front-end projects faster - part 2

    Summary: The name is really self-explanatory. Article written in portuguese. Translation coming soon.

    Read more
  • Tips for creating better front-end projects faster - part 1

    Summary: The name is really self-explanatory. Article written in portuguese. Translation coming soon.

    Read more
  • Who is afraid of nth-child?

    Summary: On this article I dive deep into the nth-child pseudo-class. Article written in portuguese. Translation coming soon.

    Read more
View all