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 + + + +
+ +
+ +
+ +
+
+

Hi,
I'am Tanu
Java Developer

+ + Download CV +
+ + + +
+ + + + + + + + + +
+
+ + +
+

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% +
+
+
+ +
+ +
+
+
+ + +
+

Projects

+ +
+ + +

Tech Blog

+ + + +

Budget Tracker App

+ + +

Student Management App

+ + + +

Car Manufacturing

+ + + +

Stock Market Analysis

+ + + +

Tic Tac Toe

+ +
+
+ + +
+

Contact

+ +
+
+ + + + +
+
+
+
+ + + + + + + + + + + +