blog-icon

Hi, I am Mari

Results-oriented, adaptable and motivated person, eager to contribute to the team’s success through hard work. Experienced in developing modern web applications from scratch, working as a full-stack developer. Updated with the latest technologies and software development methodologies.
hero img
blog-icon blog-icon
blog-icon
blog-icon

Skills

90%
PHP
90%
Laravel
85%
JavaScript
90%
VueJS
80%
NodeJS
75%
AWS
90%
MySql
85%
MongoDB
blog-icon blog-icon

About Me

about-02 about-01
picture

I'm a software developer who's all about creating sophisticated, practical solutions. But there's more to me than just code—I've got a story to share that goes beyond the tech stuff. Let me give you a peek into who I am.

I'm originally from a small town in Brazil, where resources were limited. Despite this, I had big dreams, and I used education and resilience as my tools to build the life I wanted.

Now, I live in Canada, working in the field I love—software development. I've built a beautiful life here and have amazing friends by my side.

I'm known as resilient, hard-working, and eager to learn like a sponge. My focus is always on delivering results.

about-03

Latest Posts

blog-icon
Subtitle: Mastering the Art of Custom Button Design

Styling Buttons with HTML and CSS

Buttons are a fundamental component of web applications, serving as key call-to-action elements. To ensure your buttons attract users and prompt clicks, it's essential to make them visually appealing and distinct within your design. 

While HTML buttons come with default styles—including border, background color, text decoration, and color—you often need to customize these to achieve your desired look. Understanding how to override these default properties with CSS will enable you to design buttons that perfectly align with your design requirements.

<button>Click Me!</button>

Button States

  1. Default
    The default state is what the button looks like when the page first loads.
  2. Hover
    The hover state occurs when the user places the cursor over the button, providing visual feedback.
  3. Active
    The active state is triggered when the user clicks on the button, indicating it is being pressed.
  4. Focus
    The focus state is activated when the button is selected via keyboard navigation or other non-mouse actions.
  5. Disabled
    The disabled state indicates that the button is not available for interaction, often graying it out or changing its opacity.

To start customizing your button, the first step is to override the default border.

button {
    border: none;
}

Then overwrite the outline in the focus state:

button:focus {
    outline: none;
}

Now we can add a cool style to it:

button {
    border: none;
    background-color: #01786a;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;
}

button:focus {
    outline: none;
}

button:hover {
    box-shadow: 8px 5px 5px rgba(0, 0, 0, .2);
}

button:disabled {
    box-shadow: none;
    background-color: #7ce1d5;
}

Read More
How to create a Laravel Project with Filament

Create a Laravel Project with Filament

Laravel is a PHP framework that makes the web development experience smoother and interesting.

Create a project

composer create-project laravel/laravel example-app

Run the project locally

cd example-app
 
php artisan serve

Add Filament to your Laravel application

composer require filament/filament:"^3.2" -W
 
php artisan filament:install --panels

Now install Filament Livewire components

php artisan filament:install --scaffold --widgets
 
npm install
 
npm run dev


Read More