diff --git a/assets/css/styles.css b/assets/css/styles.css
index 629ecb4..9e21ce8 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,1320 +1,1320 @@
/* GOOGLE FONTS */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/* VARIABLES CSS */
:root {
- --header-height: 3rem;
-
- /* Colors */
- --hue-color: 23;
-
- /* HSL color mode */
- --first-color: hsl(var(--hue-color), 69%, 61%);
- --first-color-second: hsl(var(--hue-color), 69%, 61%);
- --first-color-alt: hsl(var(--hue-color), 57%, 61%);
- --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
- --title-color: hsl(var(--hue-color), 8%, 15%);
- --text-color: hsl(var(--hue-color), 8%, 45%);
- --text-color-light: hsl(var(--hue-color), 8%, 65%);
- --input-color: hsl(var(--hue-color), 70%, 96%);
- --body-color: hsl(var(--hue-color), 60%, 99%);
- --container-color: #FFF;
- --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
- --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
-
- /* Font and typography */
- --body-font: 'Poppins', sans-serif;
- --big-font-size: 2rem;
- --h1-font-size: 1.5rem;
- --h2-font-size: 1.25rem;
- --h3-font-size: 1.125rem;
- --normal-font-size: .938rem;
- --small-font-size: .813rem;
- --smaller-font-size: .75rem;
-
- /* Font weight */
- --font-medium: 500;
- --font-semi-bold: 600;
-
- /* Magenes Bottom */
- --mb-0-25: .25rem;
- --mb-0-5: .5rem;
- --mb-0-75: .75rem;
- --mb-1: 1rem;
- --mb-1-5: 1.5rem;
- --mb-2: 2rem;
- --mb-2-5: 2.5rem;
- --mb-3: 3rem;
-
- /* z-index */
- --z-tooltip: 10;
- --z-fixed: 100;
- --z-modal: 1000;
+ --header-height: 3rem;
+
+ /* Colors */
+ --hue-color: 23;
+
+ /* HSL color mode */
+ --first-color: hsl(var(--hue-color), 69%, 61%);
+ --first-color-second: hsl(var(--hue-color), 69%, 61%);
+ --first-color-alt: hsl(var(--hue-color), 57%, 61%);
+ --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
+ --title-color: hsl(var(--hue-color), 8%, 15%);
+ --text-color: hsl(var(--hue-color), 8%, 45%);
+ --text-color-light: hsl(var(--hue-color), 8%, 65%);
+ --input-color: hsl(var(--hue-color), 70%, 96%);
+ --body-color: hsl(var(--hue-color), 60%, 99%);
+ --container-color: #fff;
+ --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
+ --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
+
+ /* Font and typography */
+ --body-font: "Poppins", sans-serif;
+ --big-font-size: 2rem;
+ --h1-font-size: 1.5rem;
+ --h2-font-size: 1.25rem;
+ --h3-font-size: 1.125rem;
+ --normal-font-size: 0.938rem;
+ --small-font-size: 0.813rem;
+ --smaller-font-size: 0.75rem;
+
+ /* Font weight */
+ --font-medium: 500;
+ --font-semi-bold: 600;
+
+ /* Magenes Bottom */
+ --mb-0-25: 0.25rem;
+ --mb-0-5: 0.5rem;
+ --mb-0-75: 0.75rem;
+ --mb-1: 1rem;
+ --mb-1-5: 1.5rem;
+ --mb-2: 2rem;
+ --mb-2-5: 2.5rem;
+ --mb-3: 3rem;
+
+ /* z-index */
+ --z-tooltip: 10;
+ --z-fixed: 100;
+ --z-modal: 1000;
}
/* Font size for large devices */
@media screen and (min-width: 968px) {
- :root {
- --big-font-size: 3rem;
- --h1-font-size: 2.25rem;
- --h2-font-size: 1.5rem;
- --h3-font-size: 1.25rem;
- --normal-font-size: 1rem;
- --small-font-size: .875rem;
- --smaller-font-size: .813rem;
- }
+ :root {
+ --big-font-size: 3rem;
+ --h1-font-size: 2.25rem;
+ --h2-font-size: 1.5rem;
+ --h3-font-size: 1.25rem;
+ --normal-font-size: 1rem;
+ --small-font-size: 0.875rem;
+ --smaller-font-size: 0.813rem;
+ }
}
/* Variables Dark Theme */
body.dark-theme {
- /* HSL color mode */
- --first-color-second: hsl(var(--hue-color), 30%, 8%);
- --title-color: hsl(var(--hue-color), 8%, 95%);
- --text-color: hsl(var(--hue-color), 8%, 75%);
- --input-color: hsl(var(--hue-color), 29%, 16%);
- --body-color: hsl(var(--hue-color), 28%, 12%);
- --container-color: hsl(var(--hue-color), 29%, 16%);
- --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
- --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
+ /* HSL color mode */
+ --first-color-second: hsl(var(--hue-color), 30%, 8%);
+ --title-color: hsl(var(--hue-color), 8%, 95%);
+ --text-color: hsl(var(--hue-color), 8%, 75%);
+ --input-color: hsl(var(--hue-color), 29%, 16%);
+ --body-color: hsl(var(--hue-color), 28%, 12%);
+ --container-color: hsl(var(--hue-color), 29%, 16%);
+ --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
+ --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}
/* Button Dark/Light */
.nav__btns {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.change-theme {
- font-size: 1.25rem;
- color: var(--title-color);
- margin-right: var(--mb-1);
- cursor: pointer;
+ font-size: 1.25rem;
+ color: var(--title-color);
+ margin-right: var(--mb-1);
+ cursor: pointer;
}
.change-theme:hover {
- color: var(--first-color);
+ color: var(--first-color);
}
/* BASE */
* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
}
html {
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
}
body {
- margin: 0 0 var(--header-height) 0;
- font-family: var(--body-font);
- font-size: var(--normal-font-size);
- background-color: var(--body-color);
- color: var(--text-color);
+ margin: 0 0 var(--header-height) 0;
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ background-color: var(--body-color);
+ color: var(--text-color);
}
h1,
h2,
h3,
h4 {
- color: var(--title-color);
- font-weight: var(--font-semi-bold);
+ color: var(--title-color);
+ font-weight: var(--font-semi-bold);
}
ul {
- list-style: none;
+ list-style: none;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
img {
- max-width: 100%;
- height: auto;
+ max-width: 100%;
+ height: auto;
}
/* REUSABLE CSS CLASSES */
.section {
- padding: 2rem 0 4rem;
+ padding: 2rem 0 4rem;
}
.section__title {
- font-size: var(--h1-font-size);
+ font-size: var(--h1-font-size);
}
.section__subtitle {
- display: block;
- font-size: var(--small-font-size);
- margin-bottom: var(--mb-3);
+ display: block;
+ font-size: var(--small-font-size);
+ margin-bottom: var(--mb-3);
}
.section__title,
.section__subtitle {
- text-align: center;
+ text-align: center;
}
/* LAYOUT */
.container {
- max-width: 768px;
- margin-left: var(--mb-1-5);
- margin-right: var(--mb-1-5);
+ max-width: 768px;
+ margin-left: var(--mb-1-5);
+ margin-right: var(--mb-1-5);
}
.grid {
- display: grid;
- gap: 1.5rem;
+ display: grid;
+ gap: 1.5rem;
}
.header {
- width: 100%;
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: var(--z-fixed);
- background-color: var(--body-color);
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: var(--z-fixed);
+ background-color: var(--body-color);
}
/* NAV */
.nav {
- max-width: 968px;
- height: var(--header-height);
- display: flex;
- justify-content: space-between;
- align-items: center;
+ max-width: 968px;
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.nav__logo,
.nav__toggle {
- color: var(--title-color);
- font-weight: var(--font-medium);
+ color: var(--title-color);
+ font-weight: var(--font-medium);
}
.nav__logo:hover {
- color: var(--first-color);
+ color: var(--first-color);
}
.nav__toggle {
- font-size: 1.1rem;
- cursor: pointer;
+ font-size: 1.1rem;
+ cursor: pointer;
}
.nav__toggle:hover {
- color: var(--first-color);
+ color: var(--first-color);
}
@media screen and (max-width: 767px) {
- .nav__menu {
- position: fixed;
- bottom: -100%;
- left: 0;
- width: 100%;
- background-color: var(--body-color);
- padding: 2rem 1.5rem 4rem;
- box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
- border-radius: 1.5rem 1.5rem 0 0;
- transition: .3s;
- }
+ .nav__menu {
+ position: fixed;
+ bottom: -100%;
+ left: 0;
+ width: 100%;
+ background-color: var(--body-color);
+ padding: 2rem 1.5rem 4rem;
+ box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
+ border-radius: 1.5rem 1.5rem 0 0;
+ transition: 0.3s;
+ }
}
.nav__list {
- grid-template-columns: repeat(3, 1fr);
- gap: 2rem;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
}
.nav__link {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: var(--small-font-size);
- color: var(--title-color);
- font-weight: var(--font-medium);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: var(--small-font-size);
+ color: var(--title-color);
+ font-weight: var(--font-medium);
}
.nav__link:hover {
- color: var(--first-color)
+ color: var(--first-color);
}
.nav__icon {
- font-size: 1.2rem;
+ font-size: 1.2rem;
}
.nav__close {
- position: absolute;
- right: 1.3rem;
- bottom: .5rem;
- font-size: 1.5rem;
- cursor: pointer;
- color: var(--first-color);
+ position: absolute;
+ right: 1.3rem;
+ bottom: 0.5rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: var(--first-color);
}
.nav__close:hover {
- color: var(--first-color-alt);
+ color: var(--first-color-alt);
}
/* Show menu */
.show-menu {
- bottom: 0;
+ bottom: 0;
}
/* HOME */
.home__container {
- gap: 1rem;
+ gap: 1rem;
}
.home__content {
- grid-template-columns: .5fr 3fr;
- padding-top: 3.5rem;
- align-items: center;
+ grid-template-columns: 0.5fr 3fr;
+ padding-top: 3.5rem;
+ align-items: center;
}
.home__social {
- display: grid;
- grid-template-columns: max-content;
- row-gap: 1rem;
+ display: grid;
+ grid-template-columns: max-content;
+ row-gap: 1rem;
}
.home__social-icon {
- font-size: 1.25rem;
- color: var(--first-color);
+ font-size: 1.25rem;
+ color: var(--first-color);
}
.home__social-icon:hover {
- color: var(--first-color-alt);
+ color: var(--first-color-alt);
}
.home__blob {
- width: 200px;
- fill: var(--first-color);
+ width: 200px;
+ fill: var(--first-color);
}
.home__blob-img {
- width: 200px;
+ width: 200px;
}
.home__data {
- grid-column: 1/3;
+ grid-column: 1/3;
}
.home__title {
- font-size: var(--big-font-size);
+ font-size: var(--big-font-size);
}
.home__subtitle {
- font-size: var(--h3-font-size);
- color: var(--text-color);
- font-weight: var(--font-medium);
- margin-bottom: var(--mb-0-75);
+ font-size: var(--h3-font-size);
+ color: var(--text-color);
+ font-weight: var(--font-medium);
+ margin-bottom: var(--mb-0-75);
}
.home__description {
- margin-bottom: var(--mb-2);
+ margin-bottom: var(--mb-2);
}
.home__scroll {
- display: none;
+ display: none;
}
.home__scroll-button {
- color: var(--first-color);
- transition: .3s;
+ color: var(--first-color);
+ transition: 0.3s;
}
.home__scroll-button:hover {
- transform: translateY(.25rem);
+ transform: translateY(0.25rem);
}
.home__scroll-mouse {
- font-size: 2rem;
+ font-size: 2rem;
}
.home__scroll-name {
- font-size: var(--small-font-size);
- color: var(--title-color);
- font-weight: var(--font-medium);
- margin-right: var(--mb-0-25);
+ font-size: var(--small-font-size);
+ color: var(--title-color);
+ font-weight: var(--font-medium);
+ margin-right: var(--mb-0-25);
}
.home__scroll-arrow {
- font-size: 1.25rem;
+ font-size: 1.25rem;
}
/* BUTTONS */
.button {
- display: inline-block;
- background-color: var(--first-color);
- color: #FFF;
- padding: 1rem;
- border-radius: .5rem;
- font-weight: var(--font-medium);
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #fff;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ font-weight: var(--font-medium);
}
.button:hover {
- background-color: var(--first-color-alt);
+ background-color: var(--first-color-alt);
}
.button__icon {
- font-size: 1.25rem;
- margin-left: var(--mb-0-5);
- transform: .3s;
+ font-size: 1.25rem;
+ margin-left: var(--mb-0-5);
+ transform: 0.3s;
}
.button--flex {
- display: inline-flex;
- align-items: center;
+ display: inline-flex;
+ align-items: center;
}
.button--small {
- padding: .75rem 1rem;
+ padding: 0.75rem 1rem;
}
.button--link {
- padding: 0;
- background-color: transparent;
- color: var(--first-color);
+ padding: 0;
+ background-color: transparent;
+ color: var(--first-color);
}
.button--link:hover {
- background-color: transparent;
- color: var(--first-color-alt);
+ background-color: transparent;
+ color: var(--first-color-alt);
}
.button--white {
- background-color: #FFF;
- color: var(--first-color);
+ background-color: #fff;
+ color: var(--first-color);
}
.button--white:hover {
- background-color: #FFF;
+ background-color: #fff;
}
/* ABOUT */
.about__img {
- width: 200px;
- border-radius: .5rem;
- justify-self: center;
- align-self: center;
+ width: 200px;
+ border-radius: 0.5rem;
+ justify-self: center;
+ align-self: center;
}
.about__description {
- text-align: center;
- margin-bottom: var(--mb-2-5);
+ text-align: center;
+ margin-bottom: var(--mb-2-5);
}
.about__info {
- display: flex;
- justify-content: space-evenly;
- margin-bottom: var(--mb-2-5);
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: var(--mb-2-5);
}
.about__info-title {
- font-size: var(--h2-font-size);
- font-weight: var(--font-semi-bold);
- color: var(--title-color);
+ font-size: var(--h2-font-size);
+ font-weight: var(--font-semi-bold);
+ color: var(--title-color);
}
.about__info-name {
- font-size: var(--smaller-font-size);
+ font-size: var(--smaller-font-size);
}
.about__info-title,
.about__info-name {
- display: block;
- text-align: center;
+ display: block;
+ text-align: center;
}
.about__buttons {
- display: flex;
- justify-content: center;
+ display: flex;
+ justify-content: center;
}
/* SKILLS */
.skills__container {
- row-gap: 0;
+ row-gap: 0;
}
.skills__header {
- display: flex;
- align-items: center;
- margin-bottom: var(--mb-2-5);
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--mb-2-5);
+ cursor: pointer;
}
.skills__icon,
.skills__arrow {
- font-size: 2rem;
- color: var(--first-color)
+ font-size: 2rem;
+ color: var(--first-color);
}
.skills__icon {
- margin-right: var(--mb-0-75);
+ margin-right: var(--mb-0-75);
}
.skills__title {
- font-size: var(--h3-font-size);
+ font-size: var(--h3-font-size);
}
.skills__subtitle {
- font-size: var(--small-font-size);
- color: var(--text-color-light);
+ font-size: var(--small-font-size);
+ color: var(--text-color-light);
}
.skills__arrow {
- margin-left: auto;
- transition: .4s;
+ margin-left: auto;
+ transition: 0.4s;
}
.skills__list {
- row-gap: 1.5rem;
- padding-left: 2.7rem;
+ row-gap: 1.5rem;
+ padding-left: 2.7rem;
}
.skills__titles {
- display: flex;
- justify-content: space-between;
- margin-bottom: var(--mb-0-5);
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: var(--mb-0-5);
}
.skills__name {
- font-size: var(--normal-font-size);
- font-weight: var(--font-medium);
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage {
- height: 5px;
- border-radius: .25rem;
+ height: 5px;
+ border-radius: 0.25rem;
}
.skills__bar {
- background-color: var(--first-color-lighter);
+ background-color: var(--first-color-lighter);
}
.skills__percentage {
- display: block;
- background-color: var(--first-color);
+ display: block;
+ background-color: var(--first-color);
}
.skills__html {
- width: 90%;
+ width: 95%;
}
.skills__css {
- width: 80%;
+ width: 80%;
}
.skills__js {
- width: 60%;
+ width: 60%;
}
.skills__react {
- width: 85%;
+ width: 40%;
}
-.skills__php {
- width: 10%;
+.skills__java {
+ width: 60%;
}
.skills__node {
- width: 70%;
+ width: 50%;
}
-.skills__firebase {
- width: 90%;
+.skills__typescript {
+ width: 40%;
}
-.skills__java {
- width: 80%;
+.skills__spring {
+ width: 40%;
}
.skills__close .skills__list {
- height: 0;
- overflow: hidden;
+ height: 0;
+ overflow: hidden;
}
.skills__open .skills__list {
- height: max-content;
- margin-bottom: var(--mb-2-5);
+ height: max-content;
+ margin-bottom: var(--mb-2-5);
}
.skills__open .skills__arrow {
- transform: rotate(-180deg);
+ transform: rotate(-180deg);
}
/* QUALIFICATION */
.qualification__tabs {
- display: flex;
- justify-content: space-evenly;
- margin-bottom: var(--mb-2);
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: var(--mb-2);
}
.qualification__button {
- font-size: var(--h3-font-size);
- font-weight: var(--font-medium);
- cursor: pointer;
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
+ cursor: pointer;
}
.qualification__button:hover {
- color: var(--first-color);
+ color: var(--first-color);
}
.qualification__icon {
- font-size: 1.8rem;
- margin-right: var(--mb-0-25);
+ font-size: 1.8rem;
+ margin-right: var(--mb-0-25);
}
.qualification__data {
- display: grid;
- grid-template-columns: 1fr max-content 1fr;
- column-gap: 1rem;
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ column-gap: 1rem;
}
.qualification__title {
- font-size: var(--normal-font-size);
- font-weight: var(--font-medium);
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-medium);
}
.qualification__subtitle {
- display: inline-block;
- font-size: var(--small-font-size);
- margin-bottom: var(--mb-1);
+ display: inline-block;
+ font-size: var(--small-font-size);
+ margin-bottom: var(--mb-1);
}
.qualification__calendar {
- font-size: var(--smaller-font-size);
- color: var(--text-color-light);
+ font-size: var(--smaller-font-size);
+ color: var(--text-color-light);
}
.qualification__rounder {
- display: inline-block;
- width: 13px;
- height: 13px;
- background-color: var(--first-color);
- border-radius: 50%;
+ display: inline-block;
+ width: 13px;
+ height: 13px;
+ background-color: var(--first-color);
+ border-radius: 50%;
}
.qualification__line {
- display: block;
- width: 1px;
- height: 100%;
- background-color: var(--first-color);
- transform: translate(6px, -7px);
+ display: block;
+ width: 1px;
+ height: 100%;
+ background-color: var(--first-color);
+ transform: translate(6px, -7px);
}
.qualification [data-content] {
- display: none;
+ display: none;
}
.qualification__active[data-content] {
- display: block;
+ display: block;
}
.qualification__button.qualification__active {
- color: var(--first-color);
+ color: var(--first-color);
}
/* SERVICES */
.services__container {
- gap: 1.5rem;
- grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ grid-template-columns: repeat(2, 1fr);
}
.services__content {
- position: relative;
- background-color: var(--container-color);
- padding: 3.5rem .5rem 1.25rem 1.5rem;
- border-radius: .25rem;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
- transition: .3s;
+ position: relative;
+ background-color: var(--container-color);
+ padding: 3.5rem 0.5rem 1.25rem 1.5rem;
+ border-radius: 0.25rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ transition: 0.3s;
}
.services__content:hover {
- box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.services__icon {
- display: block;
- font-size: 1.5rem;
- color: var(--first-color);
- margin-bottom: var(--mb-1);
+ display: block;
+ font-size: 1.5rem;
+ color: var(--first-color);
+ margin-bottom: var(--mb-1);
}
.services__title {
- font-size: var(--h3-font-size);
- margin-bottom: var(--mb-1);
- font-weight: var(--font-medium);
+ font-size: var(--h3-font-size);
+ margin-bottom: var(--mb-1);
+ font-weight: var(--font-medium);
}
.services__button {
- cursor: pointer;
- font-size: var(--small-font-size);
+ cursor: pointer;
+ font-size: var(--small-font-size);
}
.services__button:hover .button__icon {
- transform: translateX(.25rem);
+ transform: translateX(0.25rem);
}
.services__modal {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, .5);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 1rem;
- z-index: var(--z-modal);
- padding: 0;
- visibility: hidden;
- transition: .3s;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1rem;
+ z-index: var(--z-modal);
+ padding: 0;
+ visibility: hidden;
+ transition: 0.3s;
}
.services__modal-content {
- position: relative;
- background-color: var(--container-color);
- padding: 1.5rem;
- border-radius: .5rem;
+ position: relative;
+ background-color: var(--container-color);
+ padding: 1.5rem;
+ border-radius: 0.5rem;
}
.services__modal-services {
- row-gap: 1rem;
+ row-gap: 1rem;
}
.services__modal-service {
- display: flex;
+ display: flex;
}
.services__modal-title {
- font-size: var(--h3-font-size);
- font-weight: var(--font-medium);
- margin-bottom: var(--mb-1-5);
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
+ margin-bottom: var(--mb-1-5);
}
.services__modal-close {
- position: absolute;
- top: 1rem;
- right: 1rem;
- font-size: 1.5rem;
- color: var(--first-color);
- cursor: pointer;
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ font-size: 1.5rem;
+ color: var(--first-color);
+ cursor: pointer;
}
.services__modal-icon {
- color: var(--first-color);
- margin-right: var(--mb-0-25);
+ color: var(--first-color);
+ margin-right: var(--mb-0-25);
}
.active-modal {
- opacity: 1;
- visibility: visible;
+ opacity: 1;
+ visibility: visible;
}
/* PORTFOLIO */
.portfolio__container {
- overflow: initial;
+ overflow: initial;
}
.portfolio__content {
- padding: 0 1.5rem;
+ padding: 0 1.5rem;
}
.portfolio__img {
- width: 265px;
- border-radius: .5rem;
- justify-self: center;
+ width: 265px;
+ border-radius: 0.5rem;
+ justify-self: center;
}
.portfolio__title {
- font-size: var(--h3-font-size);
- margin-bottom: var(--mb-0-5);
+ font-size: var(--h3-font-size);
+ margin-bottom: var(--mb-0-5);
}
.portfolio__description {
- margin-bottom: var(--mb-0-75);
+ margin-bottom: var(--mb-0-75);
}
.portfolio__button:hover .button__icon {
- transform: translateX(.25rem);
+ transform: translateX(0.25rem);
}
.swiper-button-prev::after,
.swiper-button-next::after {
- content: '';
+ content: "";
}
.swiper-portfolio-icon {
- font-size: 2rem;
- color: var(--first-color)
+ font-size: 2rem;
+ color: var(--first-color);
}
.swiper-button-prev {
- left: -.5rem;
+ left: -0.5rem;
}
.swiper-button-next {
- right: -.5rem;
+ right: -0.5rem;
}
-.swiper-horizontal>.swiper-pagination-bullets {
- bottom: -2.5rem;
+.swiper-horizontal > .swiper-pagination-bullets {
+ bottom: -2.5rem;
}
.swiper-pagination-bullet-active {
- background-color: var(--first-color);
+ background-color: var(--first-color);
}
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullet {
- outline: none;
+ outline: none;
}
/* PROJECT IN MIND */
.project {
- text-align: center;
+ text-align: center;
}
.project__bg {
- background-color: var(--first-color-second);
- padding-top: 3rem;
+ background-color: var(--first-color-second);
+ padding-top: 3rem;
}
.project__title {
- font-size: var(--h2-font-size);
- margin-bottom: var(--mb-0-75);
+ font-size: var(--h2-font-size);
+ margin-bottom: var(--mb-0-75);
}
.project__description {
- margin-bottom: var(--mb-1-5);
+ margin-bottom: var(--mb-1-5);
}
.project__title,
.project__description {
- color: #FFF;
+ color: #fff;
}
.project__img {
- width: 232px;
- justify-self: center;
+ width: 232px;
+ justify-self: center;
}
/* TESTIMONIAL */
.testimonial__data,
.testimonial__header {
- display: flex;
+ display: flex;
}
.testimonial__data {
- justify-content: space-between;
- margin-bottom: var(--mb-1);
+ justify-content: space-between;
+ margin-bottom: var(--mb-1);
}
.testimonial__img {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- margin-right: var(--mb-0-75);
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ margin-right: var(--mb-0-75);
}
.testimonial__name {
- font-size: var(--h3-font-size);
- font-weight: var(--font-medium);
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
}
.testimonial__client {
- font-size: var(--small-font-size);
- color: var(--text-color-light);
+ font-size: var(--small-font-size);
+ color: var(--text-color-light);
}
.testimonial__description {
- margin-bottom: var(--mb-2-5);
+ margin-bottom: var(--mb-2-5);
}
.testimonial__icon-star {
- color: var(--first-color);
+ color: var(--first-color);
}
.swiper .swiper-pagination-testimonial {
- bottom: 0;
+ bottom: 0;
}
/* CONTACT ME */
.contact__container {
- row-gap: 3rem;
+ row-gap: 3rem;
}
.contact__information {
- display: flex;
- margin-bottom: var(--mb-2);
+ display: flex;
+ margin-bottom: var(--mb-2);
}
.contact__icon {
- font-size: 2rem;
- color: var(--first-color);
- margin-right: var(--mb-0-75);
+ font-size: 2rem;
+ color: var(--first-color);
+ margin-right: var(--mb-0-75);
}
.contact__title {
- font-size: var(--h3-font-size);
- font-weight: var(--font-medium);
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
}
.contact__subtitle {
- font-size: var(--small-font-size);
- color: var(--text-color-light);
+ font-size: var(--small-font-size);
+ color: var(--text-color-light);
}
.contact__content {
- background-color: var(--input-color);
- border-radius: .5rem;
- padding: .75rem 1rem .25rem;
+ background-color: var(--input-color);
+ border-radius: 0.5rem;
+ padding: 0.75rem 1rem 0.25rem;
}
.contact__label {
- font-size: var(--smaller-font-size);
- color: var(--title-color);
+ font-size: var(--smaller-font-size);
+ color: var(--title-color);
}
.contact__input {
- width: 100%;
- background-color: var(--input-color);
- color: var(--text-color);
- font-family: var(--body-font);
- font-size: var(--normal-font-size);
- border: none;
- outline: none;
- padding: .25rem .5rem .5rem 0;
+ width: 100%;
+ background-color: var(--input-color);
+ color: var(--text-color);
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ border: none;
+ outline: none;
+ padding: 0.25rem 0.5rem 0.5rem 0;
}
/* FOOTER */
.footer {
- padding-top: 2rem;
+ padding-top: 2rem;
}
.footer__container {
- row-gap: 3.5rem;
+ row-gap: 3.5rem;
}
.footer__bg {
- background-color: var(--first-color-second);
- padding: 2rem 0 3rem;
+ background-color: var(--first-color-second);
+ padding: 2rem 0 3rem;
}
.footer__title {
- font-size: var(--h1-font-size);
- margin-bottom: var(--mb-0-25);
+ font-size: var(--h1-font-size);
+ margin-bottom: var(--mb-0-25);
}
.footer__subtitle {
- font-size: var(--small-font-size);
+ font-size: var(--small-font-size);
}
.footer__links {
- display: flex;
- flex-direction: column;
- row-gap: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1.5rem;
}
.footer__link:hover {
- color: var(--first-color-lighter);
+ color: var(--first-color-lighter);
}
.footer__social {
- font-size: 1.25rem;
- margin-right: var(--mb-1-5);
+ font-size: 1.25rem;
+ margin-right: var(--mb-1-5);
}
.footer__social:hover {
- color: var(--first-color-lighter);
+ color: var(--first-color-lighter);
}
.footer__copy {
- font-size: var(--smaller-font-size);
- text-align: center;
- color: var(--text-color-light);
- margin-top: var(--mb-3);
+ font-size: var(--smaller-font-size);
+ text-align: center;
+ color: var(--text-color-light);
+ margin-top: var(--mb-3);
}
.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
- color: #FFF;
+ color: #fff;
}
/* Active Link */
.active-link {
- color: var(--first-color);
+ color: var(--first-color);
}
/* Change background header */
.scroll-header {
- box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
+ box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
/* SCROLL UP */
.scrollup {
- position: fixed;
- right: 1rem;
- bottom: -20%;
- background-color: var(--first-color);
- opacity: .8;
- padding: 0 .3rem;
- border-radius: .4rem;
- z-index: var(--z-tooltip);
- transition: .4s;
+ position: fixed;
+ right: 1rem;
+ bottom: -20%;
+ background-color: var(--first-color);
+ opacity: 0.8;
+ padding: 0 0.3rem;
+ border-radius: 0.4rem;
+ z-index: var(--z-tooltip);
+ transition: 0.4s;
}
.scrollup:hover {
- background-color: var(--first-color-alt);
+ background-color: var(--first-color-alt);
}
.scrollup__icon {
- font-size: 1.5rem;
- color: #FFF;
+ font-size: 1.5rem;
+ color: #fff;
}
/* Show Scroll */
.show-scroll {
- bottom: 5rem;
+ bottom: 5rem;
}
/* SCROLL BAR */
::-webkit-scrollbar {
- width: .60rem;
- background-color: var(--scroll-bar-color);
- border-radius: 5rem;
+ width: 0.6rem;
+ background-color: var(--scroll-bar-color);
+ border-radius: 5rem;
}
::-webkit-scrollbar-thumb {
- background-color: var(--scroll-thumb-color);
- border-radius: .5rem;
+ background-color: var(--scroll-thumb-color);
+ border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover {
- background-color: var(--text-color-light);
+ background-color: var(--text-color-light);
}
/* MEDIA QUERIES */
/* For small devices */
@media screen and (max-width: 350px) {
- .container {
- margin-left: var(--mb-1);
- margin-right: var(--mb-1);
- }
+ .container {
+ margin-left: var(--mb-1);
+ margin-right: var(--mb-1);
+ }
- .nav__menu {
- padding: 2rem .25rem 4rem;
- }
+ .nav__menu {
+ padding: 2rem 0.25rem 4rem;
+ }
- .nav__list {
- column-gap: 0;
- }
+ .nav__list {
+ column-gap: 0;
+ }
- .home__content {
- grid-template-columns: .25fr 3fr;
- }
+ .home__content {
+ grid-template-columns: 0.25fr 3fr;
+ }
- .home__blob {
- width: 180px;
- }
+ .home__blob {
+ width: 180px;
+ }
- .skills__title {
- font-size: var(--normal-font-size);
- }
+ .skills__title {
+ font-size: var(--normal-font-size);
+ }
- .qualification__data {
- gap: .5rem;
- }
+ .qualification__data {
+ gap: 0.5rem;
+ }
- .services__container {
- grid-template-columns: max-content;
- justify-content: center;
- }
+ .services__container {
+ grid-template-columns: max-content;
+ justify-content: center;
+ }
- .services__content {
- padding-right: 3.5rem;
- }
+ .services__content {
+ padding-right: 3.5rem;
+ }
- .services__modal {
- padding: 0 .5rem;
- }
+ .services__modal {
+ padding: 0 0.5rem;
+ }
- .project__img {
- width: 200px;
- }
+ .project__img {
+ width: 200px;
+ }
- .testimonial__data,
- .testimonial__header {
- flex-direction: column;
- align-items: center;
- }
+ .testimonial__data,
+ .testimonial__header {
+ flex-direction: column;
+ align-items: center;
+ }
- .testimonial__img {
- margin-right: 0;
- margin-bottom: var(--mb-0-25);
- }
+ .testimonial__img {
+ margin-right: 0;
+ margin-bottom: var(--mb-0-25);
+ }
- .testimonial__data,
- .testimonial__description {
- text-align: center;
- }
+ .testimonial__data,
+ .testimonial__description {
+ text-align: center;
+ }
}
/* For medium devices */
@media screen and (min-width: 568px) {
- .home__content {
- grid-template-columns: max-content 1fr 1fr;
- }
-
- .home__data {
- grid-column: initial;
- }
-
- .home__img {
- order: 1;
- justify-self: center;
- }
-
- .about__container,
- .skills__container,
- .portfolio__content,
- .project__container,
- .contact__container,
- .footer__container {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .qualification__sections {
- display: grid;
- grid-template-columns: .6fr;
- justify-content: center;
- }
+ .home__content {
+ grid-template-columns: max-content 1fr 1fr;
+ }
+
+ .home__data {
+ grid-column: initial;
+ }
+
+ .home__img {
+ order: 1;
+ justify-self: center;
+ }
+
+ .about__container,
+ .skills__container,
+ .portfolio__content,
+ .project__container,
+ .contact__container,
+ .footer__container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .qualification__sections {
+ display: grid;
+ grid-template-columns: 0.6fr;
+ justify-content: center;
+ }
}
@media screen and (min-width: 768px) {
- .container {
- margin-left: auto;
- margin-right: auto;
- }
-
- body {
- margin: 0;
- }
-
- .section {
- padding: 6rem 0 2rem;
- }
-
- .section__subtitle {
- margin-bottom: 4rem;
- }
-
- .header {
- top: 0;
- bottom: initial;
- }
-
- .header,
- .main,
- .footer__container {
- padding: 0 1rem;
- }
-
- .nav {
- height: calc(var(--header-height) + 1.5rem);
- column-gap: 1rem;
- }
-
- .nav__icon,
- .nav__close,
- .nav__toggle {
- display: none;
- }
-
- .nav__list {
- display: flex;
- column-gap: 2rem;
- }
-
- .nav__menu {
- margin-left: auto;
- }
-
- .change-theme {
- margin: 0;
- }
-
- .home__container {
- row-gap: 5rem;
- }
-
- .home__content {
- padding-top: 5.5rem;
- column-gap: 2rem;
- }
-
- .home__blob {
- width: 270px;
- }
-
- .home__scroll {
- display: block;
- }
-
- .home__scroll-button {
- margin-left: 3rem;
- }
-
- .about__container {
- column-gap: 5rem;
- }
-
- .about__img {
- width: 350px;
- }
-
- .about__description {
- text-align: initial;
- }
-
- .about__info {
- justify-content: space-between;
- }
-
- .about__buttons {
- justify-content: initial;
- }
-
- .qualification__tabs {
- justify-content: center;
- }
-
- .qualification__button {
- margin: 0 var(--mb-1);
- }
-
- .qualification__sections {
- grid-template-columns: .5fr;
- }
-
- .services__container {
- grid-template-columns: repeat(3, 218px);
- justify-content: center;
- }
-
- .services__icon {
- font-size: 2rem;
- }
-
- .services__content {
- padding: 6rem 0 2rem 2.5rem;
- }
-
- .services__modal-content {
- width: 450px;
- }
-
- .portfolio__img {
- width: 320px;
- }
-
- .portfolio__container {
- align-items: center;
- }
-
- .project {
- text-align: initial;
- }
-
- .project__bg {
- background: none;
- }
+ .container {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ body {
+ margin: 0;
+ }
+
+ .section {
+ padding: 6rem 0 2rem;
+ }
+
+ .section__subtitle {
+ margin-bottom: 4rem;
+ }
+
+ .header {
+ top: 0;
+ bottom: initial;
+ }
+
+ .header,
+ .main,
+ .footer__container {
+ padding: 0 1rem;
+ }
+
+ .nav {
+ height: calc(var(--header-height) + 1.5rem);
+ column-gap: 1rem;
+ }
+
+ .nav__icon,
+ .nav__close,
+ .nav__toggle {
+ display: none;
+ }
+
+ .nav__list {
+ display: flex;
+ column-gap: 2rem;
+ }
+
+ .nav__menu {
+ margin-left: auto;
+ }
+
+ .change-theme {
+ margin: 0;
+ }
+
+ .home__container {
+ row-gap: 5rem;
+ }
+
+ .home__content {
+ padding-top: 5.5rem;
+ column-gap: 2rem;
+ }
+
+ .home__blob {
+ width: 270px;
+ }
+
+ .home__scroll {
+ display: block;
+ }
+
+ .home__scroll-button {
+ margin-left: 3rem;
+ }
+
+ .about__container {
+ column-gap: 5rem;
+ }
+
+ .about__img {
+ width: 350px;
+ }
+
+ .about__description {
+ text-align: initial;
+ }
+
+ .about__info {
+ justify-content: space-between;
+ }
+
+ .about__buttons {
+ justify-content: initial;
+ }
+
+ .qualification__tabs {
+ justify-content: center;
+ }
+
+ .qualification__button {
+ margin: 0 var(--mb-1);
+ }
+
+ .qualification__sections {
+ grid-template-columns: 0.5fr;
+ }
+
+ .services__container {
+ grid-template-columns: repeat(3, 218px);
+ justify-content: center;
+ }
+
+ .services__icon {
+ font-size: 2rem;
+ }
+
+ .services__content {
+ padding: 6rem 0 2rem 2.5rem;
+ }
+
+ .services__modal-content {
+ width: 450px;
+ }
+
+ .portfolio__img {
+ width: 320px;
+ }
+
+ .portfolio__container {
+ align-items: center;
+ }
+
+ .project {
+ text-align: initial;
+ }
+
+ .project__bg {
+ background: none;
+ }
- .project__container {
- background-color: var(--first-color-second);
- border-radius: 1rem;
- padding: 3rem 2.5rem 0;
- grid-template-columns: 1fr max-content;
- column-gap: 3rem;
- }
+ .project__container {
+ background-color: var(--first-color-second);
+ border-radius: 1rem;
+ padding: 3rem 2.5rem 0;
+ grid-template-columns: 1fr max-content;
+ column-gap: 3rem;
+ }
- .project__data {
- padding-top: .8rem;
- }
+ .project__data {
+ padding-top: 0.8rem;
+ }
- .footer__container {
- grid-template-columns: repeat(3, 1fr);
- }
+ .footer__container {
+ grid-template-columns: repeat(3, 1fr);
+ }
- .footer__bg {
- padding: 3rem 0 3.5rem;
- }
+ .footer__bg {
+ padding: 3rem 0 3.5rem;
+ }
- .footer__links {
- flex-direction: row;
- column-gap: 2rem;
- }
+ .footer__links {
+ flex-direction: row;
+ column-gap: 2rem;
+ }
- .footer__socials {
- justify-self: flex-end;
- }
+ .footer__socials {
+ justify-self: flex-end;
+ }
- .footer__copy {
- margin-top: 4.5rem;
- }
+ .footer__copy {
+ margin-top: 4.5rem;
+ }
}
/* For large devices */
@media screen and (min-width: 1024px) {
- .header,
- .main,
- .footer__container {
- padding: 0;
- }
-
- .home__blob {
- width: 320px;
- }
-
- .home__social {
- transform: translateX(-6rem);
- }
-
- .services__container {
- grid-template-columns: repeat(3, 238px);
- }
-
- .portfolio__content {
- column-gap: 5rem;
- }
-
- .swiper-portfolio-icon {
- font-size: 3.5rem;
- }
-
- .swiper-button-prev {
- left: -3.5rem;
- }
-
- .swiper-button-next {
- right: -3.5rem;
- }
-
- .swiper-horizontal > .swiper-pagination-bullets {
- bottom: -4.5rem;
- }
-
- .contact__form {
- width: 460px;
- }
-
- .contact__inputs {
- grid-template-columns: repeat(2, 1fr);
- }
-}
\ No newline at end of file
+ .header,
+ .main,
+ .footer__container {
+ padding: 0;
+ }
+
+ .home__blob {
+ width: 320px;
+ }
+
+ .home__social {
+ transform: translateX(-6rem);
+ }
+
+ .services__container {
+ grid-template-columns: repeat(3, 238px);
+ }
+
+ .portfolio__content {
+ column-gap: 5rem;
+ }
+
+ .swiper-portfolio-icon {
+ font-size: 3.5rem;
+ }
+
+ .swiper-button-prev {
+ left: -3.5rem;
+ }
+
+ .swiper-button-next {
+ right: -3.5rem;
+ }
+
+ .swiper-horizontal > .swiper-pagination-bullets {
+ bottom: -4.5rem;
+ }
+
+ .contact__form {
+ width: 460px;
+ }
+
+ .contact__inputs {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
diff --git a/index.html b/index.html
index 459bf0a..1435c2a 100644
--- a/index.html
+++ b/index.html
@@ -1,812 +1,931 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Filipe Falco - Portfolio
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Filipe Falco - Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
-
-
-
-
-
-
-
Hi, I'am Filipe
-
Software Engineer
-
High level experience in software developer, producing quality
- work.
-
- Contact Me
-
-
-
-
-
-
-
-
-
-
- About Me
- My introduction
-
-
-
-
-
-
- Software Engineer, with extensive knowledge and years of experience, working in web
- technologies, delivering quality work.
-
-
-
-
-
- 08+
-
- Years experience
-
-
-
- 20+
-
- Complete projects
-
-
-
- 05+
-
- Companies worked
-
-
-
-
-
-
-
-
-
-
- Skills
- My technical level
-
-
-
-
-
-
-
-
-
-
-
-
-
-
JavaScript
- 60%
-
-
-
-
-
-
-
-
-
React
- 85%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Node Js
- 70%
-
-
-
-
-
-
-
-
-
Firebase
- 90%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Qualification
-
-
- My personal journey
-
-
-
-
-
- Education
-
-
-
- Work
-
-
-
-
-
-
-
-
-
Software Engineer
-
Brasil - UFMS
-
-
- 2018 - 2023
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Service Desk Employee
-
Unisys
-
-
- 2019 - 2020
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
FullStack Developer
-
Imprial Cutelaria
-
-
- 2020 - 2021
-
-
-
-
-
-
-
-
Intern Software Developer
-
Grupo Card
-
-
- 2021 - 2022
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Software Developer
-
Grupo Card
-
-
- 2023 -
-
-
-
-
-
-
-
-
-
-
- Services
- What i offer
-
-
-
-
-
-
-
Ui/Ux Designer
-
-
- View More
-
-
-
-
-
-
UI/Ux Designer
-
-
-
-
-
- I develop the user interface.
-
-
-
- Web page development.
-
-
-
- I create ux element interactions.
-
-
-
- I position your company brand.
-
-
-
-
-
-
-
-
-
-
-
-
Frontend Developer
-
-
- View More
-
-
-
-
-
-
Frontend Developer
-
-
-
-
-
- I develop the user interface.
-
-
-
- Web page development.
-
-
-
- I create ux element interactions.
-
-
-
- I position your company brand.
-
-
-
-
-
-
-
-
-
-
-
-
Branding Designer
-
-
- View More
-
-
-
-
-
-
Branding Designer
-
-
-
-
-
- I develop the user interface.
-
-
-
- Web page development.
-
-
-
- I create ux element interactions.
-
-
-
- I position your company brand.
-
-
-
-
-
-
-
-
-
-
-
- Portfolio
- Most recent work
-
-
-
-
-
-
-
-
-
Modern Website
-
Website adaptable to all devices, with ui components and
- animated interactions.
-
- Demo
-
-
-
-
-
-
-
-
-
-
-
Brand Design
-
Website adaptable to all devices, with ui components and
- animated interactions.
-
- Demo
-
-
-
-
-
-
-
-
-
-
-
Online Store
-
Website adaptable to all devices, with ui components and
- animated interactions.
-
- Demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
You have a new project
-
Contact me now and get a 30% discount on your new project.
-
- Contact Me
-
-
-
-
-
-
-
-
-
-
-
- Testimonial
- My client saying
-
-
-
-
-
-
-
-
I get a good imperssion, I carry put my project with all the
- possible quality and attention and support 24 hours a day.
-
-
-
-
-
-
-
-
-
I get a good imperssion, I carry put my project with all the
- possible quality and attention and support 24 hours a day.
-
-
-
-
-
-
-
-
-
I get a good imperssion, I carry put my project with all the
- possible quality and attention and support 24 hours a day.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+ -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"
+ />
+
+
+
+
+
+
+
Hi, I'am Filipe
+
Software Engineer
+
+ High level experience in software developer, producing quality
+ work.
+
+
+ Contact Me
+
+
+
+
+
+
+
+
+
+
+ About Me
+ My introduction
+
+
+
+
+
+
+ I'm a Software Engineer specialized in backend development,
+ dedicated to delivering high quality products. With years of
+ experience and a creative mind, I constantly seek to innovate and
+ exceed expectations.
+
+
+
+
+ 03+
+ Years
+ experience
+
+
+ 05+
+ Complete
+ projects
+
+
+ 03+
+ Companies
+ worked
+
+
+
+
+
+
+
+
+
+
+ Skills
+ My technical level
+
+
+
+
+
+
+
+
+
+
+
+
Node Js
+ 50%
+
+
+
+
+
+
+
+
+
Typescript
+ 40%
+
+
+
+
+
+
+
+
+
SpringBoot
+ 40%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
JavaScript
+ 60%
+
+
+
+
+
+
+
+
+
React
+ 40%
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Qualification
+ My personal journey
+
+
+
+
+
+ Education
+
+
+
+ Work
+
+
+
+
+
+
+
+
+
Software Engineer
+
Brasil - UFMS
+
+
+ 2018 - 2023
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Service Desk
+
Unisys
+
+
+ 2019 - 2020
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
FullStack Developer
+
Imprial Cutelaria
+
+
+ 2020 - 2021
+
+
+
+
+
+
+
+
+ Intern Software Developer
+
+
Grupo Card
+
+
+ 2021 - 2022
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Software Developer
+
Grupo Card
+
+
+ 2023 -
+
+
+
+
+
+
+
+
+
+
+ Services
+ What i offer
+
+
+
+
+
+
+
+ Backend
+ Developer
+
+
+
+ View More
+
+
+
+
+
+
+ Backend
+ Developer
+
+
+
+
+
+
+ I develop the user interface.
+
+
+
+ Web page development.
+
+
+
+ I create ux element interactions.
+
+
+
+ I position your company brand.
+
+
+
+
+
+
+
+
+
+
+
+
+ Software
+ Architect
+
+
+
+ View More
+
+
+
+
+
+
+ Software
+ Architect
+
+
+
+
+
+
+ I develop the user interface.
+
+
+
+ Web page development.
+
+
+
+ I create ux element interactions.
+
+
+
+ I position your company brand.
+
+
+
+
+
+
+
+
+
+
+
+
+ Frontend
+ Developer
+
+
+
+ View More
+
+
+
+
+
+
+ Frontend
+ Developer
+
+
+
+
+
+
+ I develop the user interface.
+
+
+
+ Web page development.
+
+
+
+ I create ux element interactions.
+
+
+
+ I position your company brand.
+
+
+
+
+
+
+
+
+
+
+
+ Portfolio
+ Most recent work
+
+
+
+
+
+
+
+
+
Modern Website
+
+ Website adaptable to all devices, with ui components and
+ animated interactions.
+
+
+ Demo
+
+
+
+
+
+
+
+
+
+
+
Brand Design
+
+ Website adaptable to all devices, with ui components and
+ animated interactions.
+
+
+ Demo
+
+
+
+
+
+
+
+
+
+
+
Online Store
+
+ Website adaptable to all devices, with ui components and
+ animated interactions.
+
+
+ Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
You have a new project
+
+ Contact me now and get a 30% discount on your new project.
+
+
+ Contact Me
+
+
+
+
+
+
+
+
+
+
+
+ Testimonial
+ My client saying
+
+
+
+
+
+
+
+
+ I get a good imperssion, I carry put my project with all the
+ possible quality and attention and support 24 hours a day.
+
+
+
+
+
+
+
+
+ I get a good imperssion, I carry put my project with all the
+ possible quality and attention and support 24 hours a day.
+
+
+
+
+
+
+
+
+ I get a good imperssion, I carry put my project with all the
+ possible quality and attention and support 24 hours a day.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+