---
title: Skills and Tools
description: A look at all the programming languages, libraries, and tools I've worked with.
caption: Work
layout: PageWithMDX
---

import { Label } from '@/components/mdx/Labels';
import { VStack, HStack } from '@/components/mdx/Stack';

I started my career as a web developer about **{new Date().getFullYear() - 2016} years ago**. I've tried some programming languages and tech stack, both Back-End, and Front-End.

Even though the scope of web development is broad, I was very interested and focused on **Front-End Development** and **UI/UX Design**.

---

## Front-End Developer

I love creating something that is clean and minimalistic, attractive and has value, and of course, easy to use.

I really enjoy creating websites with **rich UI components**, including:

- **Web application**,
- **Documentation pages**,
- **CMS contents layout**,
- **Dashboard layout**,
- and others.

But I still like to make simple website pages like **landing pages**. So, what tools did I feel comfortable using during the website creation?

### TypeScript

First of all, the programming language. I'm very used to using **TypeScript**, although website creation can be done using PHP, Python, etc.

The JavaScript superset—TypeScript—has accompanied me for **about {new Date().getFullYear() - 2018} years**.

### React

I really enjoy building single page application websites and React is my go-to library.

I've been using it **since 2018 ({2022 - 2018} years)** and have become quite proficient with it.

### Vue.js

Single-page websites are my thing, and Vue.js is like my magic wand. Been waving it for a year now, and things are getting pretty cool!

### Tailwind CSS

For now, I love using Tailwind CSS for styling, even though I've been using SCSS for a longer time ({2020 - 2016} years).

**I'm really comfortable** using it and I think it's a great tool.

### Framer Motion

For animations, I am more comfortable using Framer Motion. Creating animations using JavaScript has **never been as easy as using Framer Motion**.

### Next.js

I've been using CRA for a few years, but since discovering Next.js, I don't think I would want to use any other web framework. **It's just that good!**

---

## UI/UX Designer

Designing user interfaces is something I'm really good at and I've been a UI/UX designer **from 2018 to present ({new Date().getFullYear() - 2018} years)**.

I'm always thinking about how to create the best possible user experience, in addition to creating visually appealing user interfaces.

The biggest challenge is finding the balance between creating a great user interface and an amazing user experience.

---

## Detail and Summary

I represent all data in labels to make it easier to read. The **underline indicator** shows how often I used the related item, e.g.:

<br />
<HStack spacing={8}>
  <Label indicator={100}>Frequently Used</Label>
  <Label indicator={25}>Occasionally</Label>
</HStack>

### Programming Languages

<VStack spacing={12}>
  <HStack spacing={8}>
    <Label indicator={100}>TypeScript</Label>
    <Label indicator={100}>JavaScript</Label>
    <Label indicator={100}>HTML</Label>
    <Label indicator={100}>CSS/SCSS</Label>
  </HStack>
  <HStack spacing={8}>
    <Label indicator={50}>PHP</Label>
    <Label indicator={25}>SQL</Label>
  </HStack>
</VStack>

### Technologies

<VStack spacing={12}>
  <HStack spacing={8}>
    <Label indicator={100}>Tailwind CSS</Label>
    <Label indicator={75}>Material UI</Label>
    <Label indicator={50}>Chakra UI</Label>
    <Label indicator={50}>Bootstrap</Label>
    <Label indicator={50}>Zurb Foundation</Label>
  </HStack>
  <HStack spacing={8}>
    <Label indicator={90}>React</Label>
    <Label indicator={90}>Vue.js</Label>
    <Label indicator={50}>Next.js</Label>
    <Label indicator={50}>Framer Motion</Label>
    <Label indicator={50}>Storybook</Label>
    <Label indicator={50}>Framework7</Label>
    <Label indicator={25}>Redux</Label>
    <Label indicator={25}>Webpack</Label>
    <Label indicator={25}>Gulp</Label>
    <Label indicator={25}>Backbone.js</Label>
    <Label indicator={25}>Marionette.js</Label>
    <Label indicator={25}>WordPress</Label>
  </HStack>
  <HStack spacing={8}>
    <Label indicator={25}>Express</Label>
    <Label indicator={25}>Redis</Label>
    <Label indicator={25}>MongoDB</Label>
  </HStack>
</VStack>

### Softwares and Tools

<VStack spacing={12}>
  <HStack spacing={8}>
    <Label indicator={100}>VS Code</Label>
    <Label indicator={100}>Node.js</Label>
    <Label indicator={100}>Git</Label>
    <Label indicator={25}>Sourcetree</Label>
  </HStack>
  <HStack spacing={8}>
    <Label indicator={100}>Figma</Label>
    <Label indicator={50}>Inkscape</Label>
    <Label indicator={50}>Photoshop</Label>
  </HStack>
</VStack>
