About me

I am a full-stack developer with experience in web applications and apps.

At my current job, I work as a software engineer working on implement a data driven web ui for an analytics platform @Dema

hover action arrow
headshot

First line of code

First software engineering job

Total prod crashes

1 oops :(

What do I know?

Front-end development

  • React
  • React Native
  • Redux
  • Next.js
  • Svelte
  • Tailwind
  • Chakra UI
  • SASS

API

  • REST
  • tRPC
  • Node.js
  • GraphQL
  • Apollo

Back-end development

  • SQL
  • Express
  • Nest.js
  • MongoDB
  • Mongoose
  • Prisma
  • Firebase

Languages

  • Typescript
  • Golang
  • Swedish 🇸🇪
  • English 🏴󠁧󠁢󠁥󠁮󠁧󠁿
  • Portuguese 🇵🇹
  • Spanish 🇪🇸

Devops & CI/CD

  • Docker
  • Jest
  • EsLint
  • Puppeteer

Rank #1000 on CSS Battles

I really like CSS (I don't really get the hate), and one of my favorite sites is CSS Battles where you can compete with CSS. I used to play it a lot and at one point I got to rank 800, but now im siting at around 1000. There is about 350k total users on the platform.

headshot

Matheus Mendes

53700.24
(84 Targets)
#1146

3446 total github contributions in the last year

Dema.ai

Software engineer, April 2023 - Now

Contributions:

  • - Migrated our app from static in-house SCSS component library to a customized Chakra UI flow
  • - Lead the rebranding of the platform after Dema underwent a full rebrand as a company. Organized a hackathon for my team and did the entire rebranding in one single day. This involved color changes, layout changes and full component api rewrites
  • - Bought a polaroid camera on my very first day, which has taken well over 300 pictures and has been a core part of the internal employee branding. I also took it one step further on my 1 year anniversary and created a custom page with all polaroids. See it here
  • - Built our Shopify connector handling all order and inventory data for our Shopify customers. Later I created a monorepo for all our E-com data services, saving multiple hours of dev-time for our engineers. Used turborepo and deployed it to k8s

Dema (the company I work at) is an analytis platform for e-commerce that help companies understand there profitably. Its a very cool platform and down below is a small replica I made to showcase sort of how it looks but also some things you can do. Of course there is A LOT more to the platform than what is down below:)

Dashboard
Reports

Starting view

Show compare

Channel
Channel group
Visits
Sales
Instagram
Meta

7,645

17.62%

567

18.37%

Facebook
Meta

5,123

6.73%

423

5.49%

Google Ads
Google

3,137

8.17%

289

17.96%

YouTube
Google

2,123

17.94%

178

14.10%

TikTok
ByteDance

4,567

42.72%

345

20.21%

LinkedIn
Microsoft

1,567

11.93%

134

19.64%

Twitter
Twitter

2,567

11.61%

201

6.35%

Pinterest
Pinterest

1,267

15.18%

98

15.29%

Snapchat
Snap Inc.

3,567

15.06%

267

14.10%

Email
Direct

4,567

8.74%

389

9.27%

Organic Search
SEO

6,567

13.22%

512

7.11%

WhatsApp
Meta

2,345

11.67%

187

13.33%

Bing Ads
Microsoft

987

16.12%

76

22.58%

Reddit
Reddit

1,876

17.25%

143

11.72%

Quora
Quora

765

9.29%

54

12.50%

Display Ads
Google

3,456

8.00%

278

9.45%

Affiliate
Partners

2,345

17.25%

198

12.50%

Referral
Partnerships

1,234

12.18%

98

12.64%

Direct
Direct

5,678

9.19%

467

10.40%

Podcast Ads
Audio

876

16.80%

65

20.37%

SMS
Direct

1,543

10.21%

132

11.86%

Push Notifications
Mobile

2,109

11.00%

176

10.69%

Webinars
Events

987

16.12%

87

19.18%

Vercel UI

Design library inspired by Vercels design system. It's the same concept as ShadcnUI but does tackle some issue I felt ShadcnUI skips ove. Like handling multi-part components with multiple different sizes.

graygray-subtlebluepink-subtlegreengreen-subtletealteal-subtleblue-subtlepurplepurple-subtlegraygray-subtleblueblue-subtlepurplepurple-subtleamberamber-subtleredred-subtlepinkamberamber-subtleredred-subtlepinkpink-subtlegreengreen-subtletealteal-subtle
npm init next-app
Blue
Matheus
Is this red?
Vaaarning
npm init next-app
npm init next-app
Blue
Matheus
Is this red?
Vaaarning
npm init next-app
npm init next-app
Blue
Matheus
Is this red?
Vaaarning
npm init next-app

CSS only Rubiks cube

The project below was made with a total of ZERO lines of Javascript, its all just CSS. Every animation, hover effect and button click is just a combination of some clever CSS code.

I made this because a friend told me it was not possible to do, so out of spite, I had to prove him wrong. Thats also why if you look very closely in the bakgrund of the real website there is a lot "L"s in the bakgrund

LucioCode

TLDR; It's Leetcode and CSS battles combined into one that I made in early 2021 for fun, this project also landed me my first job as a software engineer.

Simple addition

Easy

Given two integers, a and b, return the sum of a + b

Sample Input

a = 5 
b = 7

Sample Output

12

Explanation

The sum of of 5 + 7 is 12

Loading...