diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..e03a515
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,530 @@
+/*===== GOOGLE FONTS =====*/
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+/*===== VARIABLES CSS =====*/
+:root {
+ --header-height: 3rem;
+ --font-semi: 600;
+ /*===== Colores =====*/
+ /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
+ /* HSL color mode */
+ --hue-color: 224;
+ --first-color: hsl(var(--hue-color), 89%, 60%);
+ --second-color: hsl(var(--hue-color), 56%, 12%);
+ /*===== Fuente y tipografia =====*/
+ --body-font: 'Poppins', sans-serif;
+ --big-font-size: 2rem;
+ --h2-font-size: 1.25rem;
+ --normal-font-size: .938rem;
+ --smaller-font-size: .75rem;
+ /*===== Margenes =====*/
+ --mb-2: 1rem;
+ --mb-4: 2rem;
+ --mb-5: 2.5rem;
+ --mb-6: 3rem;
+ /*===== z index =====*/
+ --z-back: -10;
+ --z-fixed: 100;
+}
+
+@media screen and (min-width: 968px) {
+ :root {
+ --big-font-size: 3.5rem;
+ --h2-font-size: 2rem;
+ --normal-font-size: 1rem;
+ --smaller-font-size: .875rem;
+ }
+}
+
+/*===== BASE =====*/
+*, ::before, ::after {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: var(--header-height) 0 0 0;
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ color: var(--second-color);
+}
+
+h1, h2, p {
+ margin: 0;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+/*===== CLASS CSS ===== */
+.section-title {
+ position: relative;
+ font-size: var(--h2-font-size);
+ color: var(--first-color);
+ margin-top: var(--mb-2);
+ margin-bottom: var(--mb-4);
+ text-align: center;
+}
+
+.section-title::after {
+ position: absolute;
+ content: '';
+ width: 64px;
+ height: 0.18rem;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: 2rem;
+ background-color: var(--first-color);
+}
+
+.section {
+ padding-top: 3rem;
+ padding-bottom: 2rem;
+}
+
+/*===== LAYOUT =====*/
+.bd-grid {
+ max-width: 1024px;
+ display: grid;
+ margin-left: var(--mb-2);
+ margin-right: var(--mb-2);
+}
+
+.l-header {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-fixed);
+ background-color: #fff;
+ box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
+}
+
+/*===== NAV =====*/
+.nav {
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: var(--font-semi);
+}
+
+@media screen and (max-width: 767px) {
+ .nav__menu {
+ position: fixed;
+ top: var(--header-height);
+ right: -100%;
+ width: 80%;
+ height: 100%;
+ padding: 2rem;
+ background-color: var(--second-color);
+ transition: .5s;
+ }
+}
+
+.nav__item {
+ margin-bottom: var(--mb-4);
+}
+
+.nav__link {
+ position: relative;
+ color: #fff;
+}
+
+.nav__link:hover {
+ position: relative;
+}
+
+.nav__link:hover::after {
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 0.18rem;
+ left: 0;
+ top: 2rem;
+ background-color: var(--first-color);
+}
+
+.nav__logo {
+ color: var(--second-color);
+}
+
+.nav__toggle {
+ color: var(--second-color);
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+/*Active menu*/
+.active::after {
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 0.18rem;
+ left: 0;
+ top: 2rem;
+ background-color: var(--first-color);
+}
+
+/*=== Show menu ===*/
+.show {
+ right: 0;
+}
+
+/*===== HOME =====*/
+.home {
+ position: relative;
+ row-gap: 5rem;
+ padding: 4rem 0 5rem;
+}
+
+.home__data {
+ align-self: center;
+}
+
+.home__title {
+ font-size: var(--big-font-size);
+ margin-bottom: var(--mb-5);
+}
+
+.home__title-color {
+ color: var(--first-color);
+}
+
+.home__social {
+ display: flex;
+ flex-direction: column;
+}
+
+.home__social-icon {
+ width: max-content;
+ margin-bottom: var(--mb-2);
+ font-size: 1.5rem;
+ color: var(--second-color);
+}
+
+.home__social-icon:hover {
+ color: var(--first-color);
+}
+
+.home__img {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 260px;
+}
+
+.home__blob {
+ fill: var(--first-color);
+}
+
+.home__blob-img {
+ width: 360px;
+}
+
+/*BUTTONS*/
+.button {
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #fff;
+ padding: .75rem 2.5rem;
+ font-weight: var(--font-semi);
+ border-radius: .5rem;
+ transition: .3s;
+}
+
+.button:hover {
+ box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
+}
+
+/* ===== ABOUT =====*/
+.about__container {
+ row-gap: 2rem;
+ text-align: center;
+}
+
+.about__subtitle {
+ margin-bottom: var(--mb-2);
+}
+
+.about__img {
+ justify-self: center;
+}
+
+.about__img img {
+ width: 200px;
+ border-radius: .5rem;
+}
+
+/* ===== SKILLS =====*/
+.skills__container {
+ row-gap: 2rem;
+ text-align: center;
+}
+
+.skills__subtitle {
+ margin-bottom: var(--mb-2);
+}
+
+.skills__text {
+ margin-bottom: var(--mb-4);
+}
+
+.skills__data {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ font-weight: var(--font-semi);
+ padding: .5rem 1rem;
+ margin-bottom: var(--mb-4);
+ border-radius: .5rem;
+ box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+}
+
+.skills__icon {
+ font-size: 2rem;
+ margin-right: var(--mb-2);
+ color: var(--first-color);
+}
+
+.skills__names {
+ display: flex;
+ align-items: center;
+}
+
+.skills__bar {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: var(--first-color);
+ height: .25rem;
+ border-radius: .5rem;
+ z-index: var(--z-back);
+}
+
+.skills__html {
+ width: 95%;
+}
+
+.skills__css {
+ width: 85%;
+}
+
+.skills__js {
+ width: 65%;
+}
+
+.skills__ux {
+ width: 85%;
+}
+
+.skills__img {
+ border-radius: .5rem;
+}
+
+/* ===== WORK =====*/
+.work__container {
+ row-gap: 2rem;
+}
+
+.work__img {
+ box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+ border-radius: .5rem;
+ overflow: hidden;
+}
+
+.work__img img {
+ transition: 1s;
+}
+
+.work__img img:hover {
+ transform: scale(1.1);
+}
+
+/* ===== CONTACT =====*/
+.contact__input {
+ width: 100%;
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-semi);
+ padding: 1rem;
+ border-radius: .5rem;
+ border: 1.5px solid var(--second-color);
+ outline: none;
+ margin-bottom: var(--mb-4);
+}
+
+.contact__button {
+ display: block;
+ border: none;
+ outline: none;
+ font-size: var(--normal-font-size);
+ cursor: pointer;
+ margin-left: auto;
+}
+
+/* ===== FOOTER =====*/
+.footer {
+ background-color: var(--second-color);
+ color: #fff;
+ text-align: center;
+ font-weight: var(--font-semi);
+ padding: 2rem 0;
+}
+
+.footer__title {
+ font-size: 2rem;
+ margin-bottom: var(--mb-4);
+}
+
+.footer__social {
+ margin-bottom: var(--mb-4);
+}
+
+.footer__icon {
+ font-size: 1.5rem;
+ color: #fff;
+ margin: 0 var(--mb-2);
+}
+
+.footer__copy {
+ font-size: var(--smaller-font-size);
+}
+
+/* ===== MEDIA QUERIES=====*/
+@media screen and (max-width: 320px) {
+ .home {
+ row-gap: 2rem;
+ }
+ .home__img {
+ width: 200px;
+ }
+}
+
+@media screen and (min-width: 576px) {
+ .home {
+ padding: 4rem 0 2rem;
+ }
+ .home__social {
+ padding-top: 0;
+ padding-bottom: 2.5rem;
+ flex-direction: row;
+ align-self: flex-end;
+ }
+ .home__social-icon {
+ margin-bottom: 0;
+ margin-right: var(--mb-4);
+ }
+ .home__img {
+ width: 300px;
+ bottom: 25%;
+ }
+ .about__container {
+ grid-template-columns: repeat(2, 1fr);
+ align-items: center;
+ text-align: initial;
+ }
+ .skills__container {
+ grid-template-columns: .7fr;
+ justify-content: center;
+ column-gap: 1rem;
+ }
+ .work__container {
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 2rem;
+ padding-top: 2rem;
+ }
+ .contact__form {
+ width: 360px;
+ padding-top: 2rem;
+ }
+ .contact__container {
+ justify-items: center;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ body {
+ margin: 0;
+ }
+ .section {
+ padding-top: 4rem;
+ padding-bottom: 3rem;
+ }
+ .section-title {
+ margin-bottom: var(--mb-6);
+ }
+ .section-title::after {
+ width: 80px;
+ top: 3rem;
+ }
+ .nav {
+ height: calc(var(--header-height) + 1.5rem);
+ }
+ .nav__list {
+ display: flex;
+ padding-top: 0;
+ }
+ .nav__item {
+ margin-left: var(--mb-6);
+ margin-bottom: 0;
+ }
+ .nav__toggle {
+ display: none;
+ }
+ .nav__link {
+ color: var(--second-color);
+ }
+ .home {
+ padding: 8rem 0 2rem;
+ }
+ .home__img {
+ width: 400px;
+ bottom: 10%;
+ }
+ .about__container {
+ padding-top: 2rem;
+ }
+ .about__img img {
+ width: 300px;
+ }
+ .skills__container {
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 2rem;
+ align-items: center;
+ text-align: initial;
+ }
+ .work__container {
+ grid-template-columns: repeat(3, 1fr);
+ column-gap: 2rem;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .bd-grid {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .home {
+ padding: 10rem 0 2rem;
+ }
+ .home__img {
+ width: 450px;
+ }
+}
diff --git a/assets/img/img2-removebg.png b/assets/img/img2-removebg.png
new file mode 100644
index 0000000..3245f1e
Binary files /dev/null and b/assets/img/img2-removebg.png differ
diff --git a/assets/img/img3.jpg b/assets/img/img3.jpg
new file mode 100644
index 0000000..b2433f0
Binary files /dev/null and b/assets/img/img3.jpg differ
diff --git a/assets/img/work1.jpg b/assets/img/work1.jpg
new file mode 100644
index 0000000..3fb9026
Binary files /dev/null and b/assets/img/work1.jpg differ
diff --git a/assets/img/work2.jpg b/assets/img/work2.jpg
new file mode 100644
index 0000000..0b08f51
Binary files /dev/null and b/assets/img/work2.jpg differ
diff --git a/assets/img/work3.jpg b/assets/img/work3.jpg
new file mode 100644
index 0000000..04d80f3
Binary files /dev/null and b/assets/img/work3.jpg differ
diff --git a/assets/img/work4.jpg b/assets/img/work4.jpg
new file mode 100644
index 0000000..8be1dec
Binary files /dev/null and b/assets/img/work4.jpg differ
diff --git a/assets/img/work5.jpg b/assets/img/work5.jpg
new file mode 100644
index 0000000..ba69a78
Binary files /dev/null and b/assets/img/work5.jpg differ
diff --git a/assets/img/work6.jpg b/assets/img/work6.jpg
new file mode 100644
index 0000000..b394745
Binary files /dev/null and b/assets/img/work6.jpg differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..33923ea
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,56 @@
+/*===== MENU SHOW =====*/
+const showMenu = (toggleId, navId) =>{
+ const toggle = document.getElementById(toggleId),
+ nav = document.getElementById(navId)
+
+ if(toggle && nav){
+ toggle.addEventListener('click', ()=>{
+ nav.classList.toggle('show')
+ })
+ }
+}
+showMenu('nav-toggle','nav-menu')
+
+/*==================== REMOVE MENU MOBILE ====================*/
+const navLink = document.querySelectorAll('.nav__link')
+
+function linkAction(){
+ const navMenu = document.getElementById('nav-menu')
+ // When we click on each nav__link, we remove the show-menu class
+ navMenu.classList.remove('show')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
+const sections = document.querySelectorAll('section[id]')
+
+function scrollActive(){
+ const scrollY = window.pageYOffset
+
+ sections.forEach(current =>{
+ const sectionHeight = current.offsetHeight
+ const sectionTop = current.offsetTop - 50;
+ sectionId = current.getAttribute('id')
+
+ if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
+ document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')
+ }else{
+ document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')
+ }
+ })
+}
+window.addEventListener('scroll', scrollActive)
+
+/*===== SCROLL REVEAL ANIMATION =====*/
+const sr = ScrollReveal({
+ origin: 'top',
+ distance: '60px',
+ duration: 2000,
+ delay: 200,
+// reset: true
+});
+
+sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{});
+sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400});
+sr.reveal('.home__social-icon',{ interval: 200});
+sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200});
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
new file mode 100644
index 0000000..2880116
--- /dev/null
+++ b/assets/scss/styles.scss
@@ -0,0 +1,523 @@
+/*===== GOOGLE FONTS =====*/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+
+/*===== VARIABLES CSS =====*/
+--header-height: 3rem;
+ --font-semi: 600;
+
+ /*===== Colores =====*/
+ /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
+ /* HSL color mode */
+ --hue-color: 224;
+ --first-color: hsl(var(--hue-color), 89%, 60%);
+ --second-color: hsl(var(--hue-color), 56%, 12%);
+
+ /*===== Fuente y tipografia =====*/
+ --body-font: 'Poppins', sans-serif;
+
+ --big-font-size: 2rem;
+ --h2-font-size: 1.25rem;
+ --normal-font-size: .938rem;
+ --smaller-font-size: .75rem;
+
+ /*===== Margenes =====*/
+ --mb-2: 1rem;
+ --mb-4: 2rem;
+ --mb-5: 2.5rem;
+ --mb-6: 3rem;
+
+ /*===== z index =====*/
+ --z-back: -10;
+ --z-fixed: 100;
+
+ @media screen and (min-width: 968px){
+ --big-font-size: 3.5rem;
+ --h2-font-size: 2rem;
+ --normal-font-size: 1rem;
+ --smaller-font-size: .875rem;
+}
+
+/*===== BASE =====*/
+*,::before,::after{
+ box-sizing: border-box;
+}
+html{
+ scroll-behavior: smooth;
+}
+body{
+ margin: var(--header-height) 0 0 0;
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ color: var(--second-color);
+}
+h1,h2,p{
+ margin: 0;
+}
+ul{
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+a{
+ text-decoration: none;
+}
+img{
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+/*===== CLASS CSS ===== */
+.section-title{
+ position: relative;
+ font-size: var(--h2-font-size);
+ color: var(--first-color);
+ margin-top: var(--mb-2);
+ margin-bottom: var(--mb-4);
+ text-align: center;
+
+ &::after{
+ position: absolute;
+ content: '';
+ width: 64px;
+ height: 0.18rem;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: 2rem;
+ background-color: var(--first-color);
+ }
+}
+.section{
+ padding-top: 3rem;
+ padding-bottom: 2rem;
+}
+
+/*===== LAYOUT =====*/
+.bd-grid{
+ max-width: 1024px;
+ display: grid;
+ margin-left: var(--mb-2);
+ margin-right: var(--mb-2);
+}
+.l-header{
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-fixed);
+ background-color: #fff;
+ box-shadow: 0 1px 4px rgba(146,161,176,.15);
+}
+
+/*===== NAV =====*/
+.nav{
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: var(--font-semi);
+
+ &__menu{
+ @media screen and (max-width: 767px){
+ position: fixed;
+ top: var(--header-height);
+ right: -100%;
+ width: 80%;
+ height: 100%;
+ padding: 2rem;
+ background-color: var(--second-color);
+ transition: .5s;
+ }
+ }
+ &__item{
+ margin-bottom: var(--mb-4);
+ }
+ &__link{
+ position: relative;
+ color: #fff;
+
+ &:hover{
+ position: relative;
+
+ &::after{
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 0.18rem;
+ left: 0;
+ top: 2rem;
+ background-color: var(--first-color);
+ }
+ }
+ }
+ &__logo{
+ color: var(--second-color);
+ }
+ &__toggle{
+ color: var(--second-color);
+ font-size: 1.5rem;
+ cursor: pointer;
+ }
+}
+/*Active menu*/
+.active::after{
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 0.18rem;
+ left: 0;
+ top: 2rem;
+ background-color: var(--first-color);
+}
+
+/*=== Show menu ===*/
+.show{
+ right: 0;
+}
+
+/*===== HOME =====*/
+.home{
+ position: relative;
+ row-gap: 5rem;
+ padding: 4rem 0 5rem;
+
+ &__data{
+ align-self: center;
+ }
+ &__title{
+ font-size: var(--big-font-size);
+ margin-bottom: var(--mb-5);
+
+ &-color{
+ color: var(--first-color);
+ }
+ }
+ &__social{
+ display: flex;
+ flex-direction: column;
+ &-icon{
+ width: max-content;
+ margin-bottom: var(--mb-2);
+ font-size: 1.5rem;
+ color: var(--second-color);
+
+ &:hover{
+ color: var(--first-color);
+ }
+ }
+ }
+
+ &__img{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 260px;
+ }
+ &__blob{
+ fill: var(--first-color);
+
+ &-img{
+ width: 360px;
+ }
+ }
+}
+
+/*BUTTONS*/
+.button{
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #fff;
+ padding: .75rem 2.5rem;
+ font-weight: var(--font-semi);
+ border-radius: .5rem;
+ transition: .3s;
+
+ &:hover{
+ box-shadow: 0px 10px 36px rgba(0,0,0,.15);
+ }
+}
+
+/* ===== ABOUT =====*/
+.about{
+ &__container{
+ row-gap: 2rem;
+ text-align: center;
+ }
+ &__subtitle{
+ margin-bottom: var(--mb-2);
+ }
+
+ &__img{
+ justify-self: center;
+
+ & img{
+ width: 200px;
+ border-radius: .5rem;
+ }
+ }
+}
+
+/* ===== SKILLS =====*/
+.skills{
+ &__container{
+ row-gap: 2rem;
+ text-align: center;
+ }
+ &__subtitle{
+ margin-bottom: var(--mb-2);
+ }
+ &__text{
+ margin-bottom: var(--mb-4);
+ }
+ &__data{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ font-weight: var(--font-semi);
+ padding: .5rem 1rem;
+ margin-bottom: var(--mb-4);
+ border-radius: .5rem;
+ box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+ }
+ &__icon{
+ font-size: 2rem;
+ margin-right: var(--mb-2);
+ color: var(--first-color);
+ }
+ &__names{
+ display: flex;
+ align-items: center;
+ }
+ &__bar{
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: var(--first-color);
+ height: .25rem;
+ border-radius: .5rem;
+ z-index: var(--z-back);
+ }
+ &__html{
+ width: 95%;
+ }
+ &__css{
+ width: 85%;
+ }
+ &__js{
+ width: 65%;
+ }
+ &__ux{
+ width: 85%;
+ }
+ &__img{
+ border-radius: .5rem;
+ }
+}
+/* ===== WORK =====*/
+.work{
+ &__container{
+ row-gap: 2rem;
+ }
+ &__img{
+ box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+ border-radius: .5rem;
+ overflow: hidden;
+
+ & img{
+ transition: 1s;
+
+ &:hover{
+ transform: scale(1.1);
+ }
+ }
+ }
+}
+
+/* ===== CONTACT =====*/
+.contact{
+ &__input{
+ width: 100%;
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-semi);
+ padding: 1rem;
+ border-radius: .5rem;
+ border: 1.5px solid var(--second-color);
+ outline: none;
+ margin-bottom: var(--mb-4);
+ }
+ &__button{
+ display: block;
+ border: none;
+ outline: none;
+ font-size: var(--normal-font-size);
+ cursor: pointer;
+ margin-left: auto;
+ }
+}
+
+/* ===== FOOTER =====*/
+.footer{
+ background-color: var(--second-color);
+ color: #fff;
+ text-align: center;
+ font-weight: var(--font-semi);
+ padding: 2rem 0;
+
+ &__title{
+ font-size: 2rem;
+ margin-bottom: var(--mb-4);
+ }
+ &__social{
+ margin-bottom: var(--mb-4);
+ }
+ &__icon{
+ font-size: 1.5rem;
+ color: #fff;
+ margin: 0 var(--mb-2);
+ }
+ &__copy{
+ font-size: var(--smaller-font-size);
+ }
+}
+
+/* ===== MEDIA QUERIES=====*/
+@media screen and (max-width: 320px){
+ .home{
+ row-gap: 2rem;
+
+ &__img{
+ width: 200px;
+ }
+ }
+}
+
+@media screen and (min-width: 576px){
+ .home{
+ padding: 4rem 0 2rem;
+ &__social{
+ padding-top: 0;
+ padding-bottom: 2.5rem;
+ flex-direction: row;
+ align-self: flex-end;
+
+ &-icon{
+ margin-bottom: 0;
+ margin-right: var(--mb-4);
+ }
+ }
+ &__img{
+ width: 300px;
+ bottom: 25%;
+ }
+ }
+
+ .about__container{
+ grid-template-columns: repeat(2,1fr);
+ align-items: center;
+ text-align: initial;
+ }
+
+ .skills__container{
+ grid-template-columns: .7fr;
+ justify-content: center;
+ column-gap: 1rem;
+ }
+
+ .work__container{
+ grid-template-columns: repeat(2,1fr);
+ column-gap: 2rem;
+ padding-top: 2rem;
+ }
+
+ .contact{
+ &__form{
+ width: 360px;
+ padding-top: 2rem ;
+ }
+ &__container{
+ justify-items: center;
+ }
+ }
+}
+
+@media screen and(min-width: 768px){
+ body{
+ margin: 0;
+ }
+ .section{
+ padding-top: 4rem;
+ padding-bottom: 3rem;
+ }
+
+ .section-title{
+ margin-bottom: var(--mb-6);
+
+ &::after{
+ width: 80px;
+ top: 3rem;
+ }
+ }
+
+ .nav{
+ height: calc(var(--header-height) + 1.5rem);
+ &__list{
+ display: flex;
+ padding-top: 0;
+ }
+ &__item{
+ margin-left: var(--mb-6);
+ margin-bottom: 0;
+ }
+ &__toggle{
+ display: none;
+ }
+ &__link{
+ color: var(--second-color);
+ }
+ }
+ .home{
+ padding: 8rem 0 2rem;
+
+ &__img{
+ width: 400px;
+ bottom: 10%;
+ }
+ }
+
+ .about{
+ &__container{
+ padding-top: 2rem;
+ }
+ &__img{
+ & img{
+ width: 300px;
+ }
+ }
+ }
+ .skills__container{
+ grid-template-columns: repeat(2,1fr);
+ column-gap: 2rem;
+ align-items: center;
+ text-align: initial;
+ }
+ .work__container{
+ grid-template-columns: repeat(3,1fr);
+ column-gap: 2rem;
+ }
+}
+
+@media screen and (min-width: 992px){
+ .bd-grid{
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .home{
+ padding: 10rem 0 2rem;
+
+ &__img{
+ width: 450px;
+ }
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c266f27
--- /dev/null
+++ b/index.html
@@ -0,0 +1,214 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+
+
+
+
+
+
+ About
+
+
+
+
+
+
+
+
I'am Tanu
+
+ Hello, my name is Tanu Soni, and I am thrilled to present my portfolio to you. I am a Computer Science Student with a passion for development and coding. Throughout my learning, I have dedicated myself to honing my skills and delivering exceptional results. In this portfolio, I aim to showcase my expertise and the value I can bring to any project.
+
+
+
+
+
+
+
+ Skills
+
+
+
+
Technical Skills
+
These are my Technical Skills :
+
+
+
+ JAVA
+
+
+
+
+
+ 95%
+
+
+
+
+
+ JDBC
+
+
+
+
+
+ 85%
+
+
+
+
+
+ JAVASCRIPT
+
+
+
+
+
+ 65%
+
+
+
+
+
+ MYSQL
+
+
+
+
+
+ 85%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+