Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main #7

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added avatar.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
191 changes: 130 additions & 61 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!-- @falvojr: Reference article https://www.w3schools.com/howto/howto_website_create_resume.asp -->
<!-- @falvojr: Useful link to use fontawesome (fa) icons: https://fontawesome.com/v4/icons/ -->
<html lang="pt-BR">
<html lang="en">

<head>
<title>NOME_COMPLETO</title>
<title>Flávio Sotto</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -13,6 +13,7 @@
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
Expand All @@ -31,52 +32,69 @@
<div class="w3-third">

<div class="w3-white w3-text-grey w3-card-4">
<!-- @falvojr: This container has been modified to not use a profile picture. -->

<div class="w3-container">
<h2>NOME_COMPLETO</h2>
<div class="w3-display-container">
<img src="avatar.jpg" style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-text-white w3-dark-grey">
<h3>Flávio Sotto</h3>
</div>
</div>
</div>
<div class="w3-container">
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>CARGO</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>LOCAL</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>EMAIL</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>TELEFONE</p>
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-blue"></i>Front end | UX Designer</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-blue"></i>Santos, BR</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-blue"></i>[email protected]</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-blue"></i>+55 13 98114 7269</p>
<hr>

<p class="w3-large">
<b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b>
<b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-blue"></i>Hard Skills</b>
</p>
<p>TODO</p>
<p>UX Design</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-orange" style="height:12px;width:90%"></div>
</div>
<p>HTML</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-blue" style="height:12px;width:80%"></div>
</div>
<p>CSS</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
<div class="w3-container w3-center w3-round-xlarge w3-blue" style="height:12px;width:75%"></div>
</div>
<p>TODO</p>
<p>JavaScript</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
<div class="w3-container w3-center w3-round-xlarge w3-cyan" style="height:12px;width:70%"></div>
</div>
<p>TODO</p>
<p>PowerBI</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
<div class="w3-container w3-center w3-round-xlarge w3-cyan" style="height:12px;width:70%"></div>
</div>
<p>TODO</p>
<p>Python</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
<div class="w3-container w3-center w3-round-xlarge w3-light-blue" style="height:12px;width:65%"></div>
</div>
<p>SQL</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-light-blue" style="height:12px;width:60%"></div>
</div>
<br>

<p class="w3-large w3-text-theme">
<b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Idiomas</b>
<b><i class="fa fa-globe fa-fw w3-margin-right w3-text-blue"></i>Languages</b>
</p>
<p>TODO</p>
<p>Portuguese</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:50%"></div>
<div class="w3-round-xlarge w3-orange" style="height:12px;width:100%"></div>
</div>
<p>TODO</p>
<p>English</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:50%"></div>
<div class="w3-round-xlarge w3-blue" style="height:12px;width:65%"></div>
</div>
<p>TODO</p>
<p>French</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:50%"></div>
<div class="w3-round-xlarge w3-light-blue" style="height:12px;width:15%"></div>
</div>
<br>
</div>
Expand All @@ -89,71 +107,124 @@ <h2>NOME_COMPLETO</h2>
<div class="w3-twothird">

<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-terminal fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Sobre</h2>
<p>TODO</p>
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-terminal fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>About</h2>
<p> Data analyst with knowledge in SQL, Python, Apache Spark, PySpark, Pandas, Tableau and PowerBI | DAX.<br>
4x Microsoft Azure Certified AZ-900, DP-900, AI-900 and PL-900, 2x Databricks Accreditated - Datalake and platform administrator fundamentals
<strong>Migrating to the Front End</strong> development area, with experience in UX/UI Design and web development using: <br>
HTML5, CSS3, Tailwind CSS, Bootstrap, JavaScript, Typescript, Node.JS, Angular, React and Django.<br>
Also some experience in Python development, good English skills and very, very thirsty to learn.<br>
</p>
</div>

<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16">
<i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Experiências
<i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>Experiences
</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>TODO</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>INICIO - <span class="w3-tag w3-teal w3-round">Atual</span></h6>
<p>TODO</p>
<h5 class="w3-opacity"><b>Blueshift Brasil - UX Designer | Front end </b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Sep - 2022 <span class="w3-tag w3-blue w3-round">Now</span></h6>
<p>I initially worked as a data analyst, creating dashboards and reports through Microsoft Power BI, in addition to having experience in workflows using ETL/ELT processes in Microsoft Azure Data Factory and Databricks.<br>
I migrated to the company's design area, where I work mainly in the development of the company's educational platform, using the moodle tool, where I am responsible for the user experience.<br>
In addition to the UI/UX concepts, I have also participated in the development of the front end, where I have contact with HTML, CSS, Java Script, PHP and Mustache technologies.</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>TODO</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>INICIO - FIM</h6>
<p>TODO</p>
<h5 class="w3-opacity"><b>Freelancer developer</b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan - 2019 <span class="w3-tag w3-blue w3-round">Now</span></h6>
<p>Development of customized solutions, using technology.<br>
Some of the projects developed recently are:<br>
>_ Text extraction solution in subtitled videos using OCR;<br>
>_ Text extraction from audios using speech recognition AI;<br>
>_ Creation of Front end solutions;<br>
>_ Prototyping websites and applications using UX/UI techniques;<br>
>_ Cleaning and normalization data using Python / SQL;</p>
</div>
</div>

<div class="w3-container w3-card w3-white">
<h2 class="w3-text-grey w3-padding-16">
<i class="fa fa-graduation-cap fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Educação
<i class="fa fa-graduation-cap fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>Education
</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>Digital Innovation One (DIO)</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>INICIO - <span class="w3-tag w3-teal w3-round">Atual</span></h6>
<h5 class="w3-opacity"><b>Anhanguera educacional</b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>April - 2023 <span class="w3-tag w3-blue w3-round">Now</span></h6>
<p>
Master's Degree in Front End Development:<br>
>_ Focus on development using HTML, CSS and JavaScript.<br>
>_ Current frameworks like Angular, React, Node.js and Django.<br>
>_ UX/UI Techniques
</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Anhanguera educacional</b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>March - 2023 <span class="w3-tag w3-blue w3-round">Now</span></h6>
<p>
MBA in Data Science & Analytics :<br>
>_ Data extraction processes<br>
>_ Programming in R<br>
>_ Applied statistics<br>
>_ Machine learning models <br>
>_ Data Analysis and Visualization
</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>IESB - Instituto de Ensino Superior de Bauru</b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>July - 2008 | June - 2012</h6>
<p>
Maior plataforma de educação aberta em TI da América Latina, com mais 1 milhão de usuários.
A DIO possui parcerias com algumas das empresas mais inovadoras do mundo, proporcionando experiências
de ensino imersivas e com foco em empregabilidade. Nesse contexto, seguem meus principais certificados:
Bachelor of Design:<br>
>_ Graphic design<br>
>_ Typography<br>
>_ User Experience<br>
>_ User Interface<br>
>_ Electronic publishing<br>
>_ Photography<br>
</p>
<ul>
<li><a href="LINK_CERTIFICADO" target="_blank">TODO</a></li>
<li><a href="LINK_CERTIFICADO" target="_blank">TODO</a></li>
<li><a href="LINK_CERTIFICADO" target="_blank">TODO</a></li>
</ul>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>TODO</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>INICIO - FIM</h6>
<p>TODO</p>
<h5 class="w3-opacity"><b>Digital Innovation One - DIO</b></h5>
<h6 class="w3-text-blue"><i class="fa fa-calendar fa-fw w3-margin-right"></i>January - 2022 <span class="w3-tag w3-blue w3-round">Now</span></h6>
<p>One of the largest technology learning platforms in Brazil, where I took several courses and learned different technologies, such as:<br>
>_ Databases fundamentals;<br>
>_ Python<br>
>_ SQL<br>
>_ Angular<br>
>_ Java Script<br>
>_ Node.JS<br>
>_ Git and Github<br>
>_ Docker<br>
>_ and more...</p>
</div>
</div>

<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16">
<i class="fa fa-git fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Projetos
<i class="fa fa-git fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>Projects
</h2>
<div class="w3-container">
<h6 class="w3-text-teal">
<h6 class="w3-text-blue">
<i class="fa fa-github fa-fw w3-margin-right"></i>
<a href="https://github.com/sottoflavio/js-developer-pokedex" target="_blank">sottoflavio/js-developer-pokedex</a>
</h6>
<p>A pokedex using HTML + CSS + JavaScript and a REST API</p>
<hr>
</div>
<div class="w3-container">
<h6 class="w3-text-blue">
<i class="fa fa-github fa-fw w3-margin-right"></i>
<a href="LINK_GITHUB" target="_blank">USUARIO_GITHUB/REPO</a>
<a href="https://github.com/sottoflavio/Instadog-landing-page" target="_blank">sottoflavio/Instadog-landing-page</a>
</h6>
<p>TODO</p>
<p>Front End study to remake instagram landing page</p>
<hr>
</div>
<div class="w3-container">
<h6 class="w3-text-teal">
<h6 class="w3-text-blue">
<i class="fa fa-gitlab fa-fw w3-margin-right"></i>
<a href="LINK_GITLAB" target="_blank">USUARIO_GITLAB/REPO</a>
<a href="https://github.com/sottoflavio/Agenda-django" target="_blank">sottoflavio/Agenda-django</a>
</h6>
<p>TODO</p>
<p>A schedule using Django Framework</p>
</div>
</div>

Expand All @@ -166,13 +237,11 @@ <h6 class="w3-text-teal">
<!-- End Page Container -->
</div>

<footer class="w3-container w3-teal w3-center w3-margin-top">
<p>Minhas Redes Sociais</p>
<a href="LINK_GITHUB" target="_blank"><i class="fa fa-github w3-hover-opacity"></i></a>
<a href="LINK_LINKEDIN" target="_blank"><i class="fa fa-linkedin w3-hover-opacity"></i></a>
<a href="LINK_FACEBOOK" target="_blank"><i class="fa fa-facebook-official w3-hover-opacity"></i></a>
<a href="LINK_INSTAGRAM" target="_blank"><i class="fa fa-instagram w3-hover-opacity"></i></a>
<a href="LINK_TWITTER" target="_blank"><i class="fa fa-twitter w3-hover-opacity"></i></a>
<footer class="w3-container w3-blue w3-center w3-margin-top">
<p>Social networks</p>
<a href="https://github.com/sottoflavio" target="_blank"><i class="fa fa-github w3-hover-opacity"></i></a>
<a href="https://www.linkedin.com/in/flaviosotto/" target="_blank"><i class="fa fa-linkedin w3-hover-opacity"></i></a>
<a href="https://www.facebook.com/flaviosotto" target="_blank"><i class="fa fa-facebook-official w3-hover-opacity"></i></a>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

Expand Down