diff --git a/Jason-Spratt-Resume.pdf b/Jason-Spratt-Resume.pdf new file mode 100644 index 0000000..e328885 Binary files /dev/null and b/Jason-Spratt-Resume.pdf differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..897dd53 --- /dev/null +++ b/app.js @@ -0,0 +1,45 @@ +const sections = document.querySelectorAll('.section'); +const sectBtns = document.querySelectorAll('.controls'); +const sectBtn = document.querySelectorAll('.control'); +const allSections = document.querySelector('.main-content'); + + +function PageTransitions(){ + //Button click active class + for(let i = 0; i < sectBtn.length; i++){ + sectBtn[i].addEventListener('click', function(){ + let currentBtn = document.querySelectorAll('.active-btn'); + currentBtn[0].className = currentBtn[0].className.replace('active-btn', ''); + this.className += ' active-btn'; + }) + } + + //Sections Active Class + allSections.addEventListener('click', (e) =>{ + const id = e.target.dataset.id; + if(id){ + //Remove selected from the other buttons + sectBtns.forEach((btn) =>{ + btn.classList.remove('active') + }) + e.target.classList.add('active') + + //Hide other sections + sections.forEach((section) =>{ + section.classList.remove('active') + }) + + const element = document.getElementById(id); + element.classList.add('active'); + } + }) + + // Toggle theme + const themeBtn = document.querySelector('.theme-btn'); + themeBtn.addEventListener('click', () =>{ + let element = document.body; + element.classList.toggle('light-mode'); + }) +} + +PageTransitions(); \ No newline at end of file diff --git a/img/blog1.jpg b/img/blog1.jpg new file mode 100644 index 0000000..dbd8e23 Binary files /dev/null and b/img/blog1.jpg differ diff --git a/img/blog2.jpg b/img/blog2.jpg new file mode 100644 index 0000000..dbd8e23 Binary files /dev/null and b/img/blog2.jpg differ diff --git a/img/blog3.jpg b/img/blog3.jpg new file mode 100644 index 0000000..dbd8e23 Binary files /dev/null and b/img/blog3.jpg differ diff --git a/img/me-pic.JPG b/img/me-pic.JPG new file mode 100644 index 0000000..a2d60e0 Binary files /dev/null and b/img/me-pic.JPG differ diff --git a/img/port1.jpg b/img/port1.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port1.jpg differ diff --git a/img/port2.jpg b/img/port2.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port2.jpg differ diff --git a/img/port3.jpg b/img/port3.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port3.jpg differ diff --git a/img/port4.jpg b/img/port4.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port4.jpg differ diff --git a/img/port5.jpg b/img/port5.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port5.jpg differ diff --git a/img/port6.jpg b/img/port6.jpg new file mode 100644 index 0000000..3ae583b Binary files /dev/null and b/img/port6.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6e50315 --- /dev/null +++ b/index.html @@ -0,0 +1,430 @@ + + + + + + + Portfolio + + + + + + + +
+
+
+
+
+ +
+
+
+

+ Hi, I'm Jason Spratt. + A Computer Science student. +

+

+ I am a Computer Science student at the University of South Carolina. + I am minoring in Cybersecurity Operations and have a passion for front-end and graphic design. +

+
+ + Download Resume + + +
+
+
+
+
+
+
+

About memy stats

+
+
+
+

Information About me

+

+ I am a Computer Science student at the University of South Carolina. + I am minoring in Cybersecurity Operations and have a passion for front-end and graphic design. + +

+
+ + Download Resume + + +
+
+
+
+
+

10+

+

Open Source
Contributions

+
+
+
+
+

560+

+

Projects
Completed

+
+
+
+
+

560+

+

Projects
Completed

+
+
+
+
+

560+

+

Projects
Completed

+
+
+
+
+
+

My Skills

+
+
+

C++

+
+

75%

+
+ +
+
+
+
+

Java

+
+

90%

+
+ +
+
+
+
+

html5

+
+

60%

+
+ +
+
+
+
+

css3

+
+

50%

+
+ +
+
+
+
+
+

My Timeline

+
+
+
+ +
+

2022 - present

+
Student - University of South Carolina
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+ +
+

2023 - present

+
Retail Worker - Nike
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+ +
+

2023 - present

+
Sports Recreation Leader - University of South Carolina
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+ +
+

2021 - 2022

+
Shift Leader - Subway
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+ +
+

2021

+
Produce Clerk - Giant Eagle
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+ +
+

2020 - 2021

+
Cashier - Giant Eagle
+

+ lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+
+
+

My PortfolioMy Work

+
+

+ Here is some of my work that I've done in various programming languages. +

+
+
+
+ +
+
+

Project Source

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

Project Source

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

Project Source

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

Project Source

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

Project Source

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

Project Source

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

My BlogsMy Blogs

+
+
+
+ +
+

+ How to create your own website +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetu. +

+
+
+
+ +
+

+ How to create your own website +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetu. +

+
+
+
+ +
+

+ How to create your own website +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetu. +

+
+
+
+
+
+
+
+
+

Contact MeGet in Touch

+
+
+
+

Contact me here

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetu. +

+
+
+
+ + Email +
+

+ : sprattsj@gmail.com +

+
+
+
+ + Location +
+

+ : Bluffton, SC +

+
+
+
+ + Mobile Number +
+

+ : 702-994-0967 +

+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + +
+
+ +
+
+ +
+
+ + Send Message + + +
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/styles/_media.scss b/styles/_media.scss new file mode 100644 index 0000000..f6309d9 --- /dev/null +++ b/styles/_media.scss @@ -0,0 +1,171 @@ +.about-container{ + grid-template-columns: 1fr; + .right-about{ + grid-template-columns: 1fr; + padding-top: 2.5rem; + } + .left-about{ + padding-right: 0; + p{ + padding-left: 0; + } + } +} + +.timeline{ + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.portfolios{ + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.blogs{ + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.section{ + padding: 2rem 2.5rem; +} + +.main-title{ + h2{ + font-size: 2rem; + span{ + font-size: 2.5rem; + } + .bg-text{ + font-size: 3rem; + } + } +} + + + +@media screen and (max-width: 1432px){ +header{ + padding: 0 !important; +} +.section{ + padding: 7rem 11rem; +} +.contact-content-con{ + flex-direction: column; + .right-contact{ + margin-left: 0; + margin-top: 2.5rem; + } +} + +.contact-content-con .right-contact .i-c-2{ + flex-direction: column; +} +.contact-content-con .right-contact .i-c-2 :last-child{ + margin-left: 0; + margin-top: 1.5rem; +} +} + +@media screen and (max-width: 1070px){ + .about-container{ + grid-template-columns: 1fr; + .right-about{ + padding-top: 2.5rem; + } + } + + .portfolios{ + grid-template-columns: 1fr 1fr; + } + .blogs{ + grid-template-columns: 1fr 1fr; + } + .main-title{ + h2{ + font-size: 4rem; + span{ + font-size: 4rem; + } + .bg-text{ + font-size: 4.5rem; + } + } + } +} + +@media screen and (max-width: 970px){ + .section{ + padding: 7rem 6rem; + } + header{ + padding: 0; + } + header .right-header{ + padding: 0 !important; + } + + .theme-btn{ + width: 50px; + height: 50px; + } + + .header-content{ + grid-template-columns: 1fr; + padding-bottom: 6rem; + } + .left-header{ + .h-shape{ + display: none; + } + } + .right-header{ + grid-row: 1; + width: 90%; + margin: 0 auto; + .name{ + font-size: 2.5rem !important; + } + } + .header-content .left-header .image{ + margin: 0 auto; + width: 90%; + } + .controls{ + top: auto; + bottom: 0; + flex-direction: row; + justify-content: center; + left: 50%; + transform: translateX(-50%); + width: 100%; + background-color: var(--color-gray-5); + .control{ + margin: .6rem 2rem !important; + } + } +} + +@media screen and (max-width: 700px){ + .section{ + padding: 7rem 3rem; + } + .about-stats{ + .progress-bars{ + grid-template-columns: 1fr; + } + } + .main-title{ + h2{ + font-size: 3rem; + span{ + font-size: 3rem; + } + .bg-text{ + font-size: 4rem; + } + } + } +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..fff15ed --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,862 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; +} + +:root { + --color-primary: #191d2b; + --color-secondary: #27AE60; + --color-white: #FFFFFF; + --color-black: #000; + --color-gray0: #f8f8f8; + --color-gray-1: #dbe1e8; + --color-gray-2: #b2becd; + --color-gray-3: #6c7983; + --color-gray-4: #454e56; + --color-gray-5: #2a2e35; + --color-gray-6: #12181b; + --br-sm-2: 14px; + --box-shadow-1: 0 3px 15px rgba(0,0,0,.3); +} + +.light-mode { + --color-primary: #FFFFFF; + --color-secondary: #F56692; + --color-white: #454E56; + --color-black: #000; + --color-gray0: #f8f8f8; + --color-gray-1: #6c7983; + --color-gray-2: #6c7983; + --color-gray-3: #6c7983; + --color-gray-4: #454e56; + --color-gray-5: #f8f8f8; + --color-gray-6: #12181b; +} + +body { + background-color: var(--color-primary); + font-family: "Poppins", sans-serif; + font-size: 1.1rem; + color: var(--color-white); + transition: all 0.4s ease-in-out; +} + +a { + display: inline-block; + text-decoration: none; + color: inherit; + font-family: inherit; +} + +header { + min-height: 100vh; + color: var(--color-white); + overflow: hidden; +} + +section { + min-height: 100vh; + width: 100%; + position: absolute; + left: 0; + top: 0; + padding: 3rem 10rem; +} + +.section { + transform: translateY(-100%) scale(0); + transition: all 0.4s ease-in-out; + background-color: var(--color-primary); +} + +.sec1 { + display: none; + transform: translateY(0) scale(1); +} + +.sec2 { + display: none; + transform: translateY(0) scale(1); +} + +.sec3 { + display: none; + transform: translateY(0) scale(1); +} + +.sec4 { + display: none; + transform: translateY(0) scale(1); +} + +.sec5 { + display: none; + transform: translateY(0) scale(1); +} + +.active { + display: block; + animation: scaleAnim 1s ease-in-out; +} +@keyframes scaleAnim { + 0% { + transform: translateY(-100%) scaleY(0); + } + 100% { + transform: translateY(0) scaleY(1); + } +} + +.controls { + position: fixed; + z-index: 10; + top: 50%; + right: 3%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translateY(-50%); +} +.controls .active-btn { + background-color: var(--color-secondary) !important; + transition: all 0.4s ease-in-out; +} +.controls .active-btn i { + color: var(--color-white) !important; +} +.controls .control { + padding: 1rem; + cursor: pointer; + background-color: var(--color-gray-4); + width: 55px; + height: 55px; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + margin: 0.7rem 0; + box-shadow: var(--box-shadow-1); +} +.controls .control i { + font-size: 1.2rem; + color: var(--color-gray-2); + pointer-events: none; +} + +.theme-btn { + top: 5%; + right: 3%; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: var(--color-gray-4); + cursor: pointer; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); + transition: all 0.1s ease-in-out; +} +.theme-btn:active { + transform: translateY(-5px); +} +.theme-btn i { + font-size: 1.4rem; + color: var(--color-gray-2); + pointer-events: none; +} + +.header-content { + display: grid; + grid-template-columns: repeat(2, 1fr); + min-height: 100vh; +} +.header-content .left-header { + display: flex; + align-items: center; + position: relative; +} +.header-content .left-header .h-shape { + transition: all 0.4s ease-in-out; + width: 65%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + z-index: -1; + -webkit-clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); + clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); +} +.header-content .left-header .image { + border-radius: var(--br-sm-2); + height: 90%; + width: 68%; + margin-left: 4rem; + background-color: var(--color-black); + transition: all 0.4s ease-in-out; +} +.header-content .left-header .image img { + border-radius: var(--br-sm-2); + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + transition: all 0.4s ease-in-out; + filter: grayscale(100%); +} +.header-content .left-header .image img:hover { + filter: grayscale(0%); +} +.header-content .right-header { + display: flex; + flex-direction: column; + justify-content: center; + padding-right: 11rem; +} +.header-content .right-header .name { + font-size: 3rem; +} +.header-content .right-header .name span { + color: var(--color-secondary); +} +.header-content .right-header p { + margin: 1.5rem 0; + line-height: 2rem; +} + +.about-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 3.5rem; + padding-bottom: 5rem; +} +.about-container .right-about { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; +} +.about-container .right-about .about-item { + border: 1px solid var(--color-gray-5); + border-radius: 5px; + transition: all 0.4s ease-in-out; + box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); +} +.about-container .right-about .about-item:hover { + cursor: default; + transform: translateY(-5px); + border: 1px solid var(--color-secondary); + box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); +} +.about-container .right-about .about-item .abt-text { + padding: 1.5rem; + display: flex; + flex-direction: column; +} +.about-container .right-about .about-item .abt-text .large-text { + font-size: 3rem; + font-weight: 700; + color: var(--color-secondary); +} +.about-container .right-about .about-item .abt-text .small-text { + padding-left: 3rem; + position: relative; + text-transform: uppercase; + font-size: 1.2rem; + color: var(--color-gray-1); + letter-spacing: 2px; +} +.about-container .right-about .about-item .abt-text .small-text::before { + content: ""; + position: absolute; + left: 0; + top: 15px; + width: 2rem; + height: 2px; + background-color: var(--color-gray-5); +} +.about-container .left-about { + padding-right: 5rem; +} +.about-container .left-about p { + line-height: 2rem; + padding: 1rem; + color: var(--color-gray-1); +} +.about-container .left-about h4 { + font-size: 2rem; + text-transform: uppercase; +} + +.about-stats { + padding-bottom: 4rem; +} +.about-stats .progress-bars { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; +} +.about-stats .progress-bars .progress-bar { + display: flex; + flex-direction: column; +} +.about-stats .progress-bars .progress-bar .prog-title { + text-transform: uppercase; + font-weight: 500; +} +.about-stats .progress-bars .progress-bar .progress-con { + display: flex; + align-items: center; +} +.about-stats .progress-bars .progress-bar .progress-con .prog-text { + color: var(--color-gray-2); +} +.about-stats .progress-bars .progress-bar .progress-con .progress { + width: 100%; + height: 0.45rem; + background-color: var(--color-gray-4); + margin-left: 1rem; + position: relative; +} +.about-stats .progress-bars .progress-bar .progress-con .progress span { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-secondary); + transition: all 0.4s ease-in-out; + width: 60%; +} +.about-stats .progress-bars .progress-bar .progress-con .progress .html { + width: 60%; +} +.about-stats .progress-bars .progress-bar .progress-con .progress .cpp { + width: 75%; +} +.about-stats .progress-bars .progress-bar .progress-con .progress .Java { + width: 90%; +} +.about-stats .progress-bars .progress-bar .progress-con .progress .css { + width: 50%; +} + +.stat-title { + text-transform: uppercase; + font-size: 1.4rem; + text-align: center; + padding: 3.5rem 0; + position: relative; +} +.stat-title::before { + content: ""; + position: absolute; + left: 50%; + top: 0; + width: 40%; + height: 1px; + background-color: var(--color-gray-5); + transform: translateX(-50%); +} + +.timeline { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + padding-bottom: 3rem; +} +.timeline .timeline-item { + position: relative; + padding-left: 3rem; + border-left: 1px solid var(--color-gray-5); +} +.timeline .timeline-item .tl-icon { + position: absolute; + left: -27px; + top: 0; + background-color: var(--color-secondary); + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.timeline .timeline-item .tl-icon i { + font-size: 1.3rem; +} +.timeline .timeline-item .tl-duration { + padding: 0.2rem 0.6rem; + background-color: var(--color-gray-5); + border-radius: 15px; + display: inline-block; + font-size: 0.8rem; + text-transform: uppercase; + font-weight: 500; +} +.timeline .timeline-item h5 { + padding: 1rem 0; + text-transform: uppercase; + font-size: 1.3rem; + font-weight: 600; +} +.timeline .timeline-item h5 span { + color: var(--color-gray-2); + font-weight: 500; + font-size: 1.2rem; +} +.timeline .timeline-item p { + color: var(--color-gray-2); +} + +.port-text { + padding: 2rem 0; + text-align: center; +} + +.portfolios { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; +} +.portfolios .portfolio-item { + position: relative; + border-radius: 15px; +} +.portfolios .portfolio-item img { + width: 100%; + height: 300px; + -o-object-fit: cover; + object-fit: cover; + border-radius: 15px; +} +.portfolios .portfolio-item .hover-items { + width: 100%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + opacity: 0; + transform: scale(0); + transition: all 0.4s ease-in-out; +} +.portfolios .portfolio-item .hover-items h3 { + font-size: 1.5rem; + color: var(--color-white); + margin-bottom: 1.5rem; +} +.portfolios .portfolio-item .hover-items .icons { + display: flex; + justify-content: center; + align-items: center; +} +.portfolios .portfolio-item .hover-items .icons .icon { + background-color: var(--color-primary); + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 1rem; + cursor: pointer; + transition: all 0.4s ease-in-out; +} +.portfolios .portfolio-item .hover-items .icons .icon i { + font-size: 1.7rem; + color: var(--color-white); + margin: 0 1rem; +} +.portfolios .portfolio-item .hover-items .icons .icon:hover { + background-color: var(--color-white); +} +.portfolios .portfolio-item .hover-items .icons .icon:hover i { + color: var(--color-primary); +} + +.portfolio-item:hover .hover-items { + opacity: 1; + transform: scale(1); +} + +.blogs { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; +} +.blogs .blog { + position: relative; + background-color: var(--color-gray-5); + border-radius: 5px; + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1); + transition: all 0.4s ease-in-out; +} +.blogs .blog:hover { + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3); + transform: translateY(-5px); + transition: all 0.4s ease-in-out; +} +.blogs .blog:hover img { + filter: grayscale(0); + transform: scale(1.1); + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8); +} +.blogs .blog img { + width: 100%; + height: 300px; + -o-object-fit: cover; + object-fit: cover; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + filter: grayscale(100%); + transition: all 0.4s ease-in-out; +} +.blogs .blog .blog-text { + margin-top: -7px; + padding: 1.1rem; + border-top: 8px solid var(--color-secondary); +} +.blogs .blog .blog-text h4 { + font-size: 1.5rem; + margin-bottom: 0.7rem; + transition: all 0.4s ease-in-out; + cursor: pointer; +} +.blogs .blog .blog-text h4:hover { + color: var(--color-secondary); +} +.blogs .blog .blog-text p { + color: var(--color-gray-2); + line-height: 2rem; + padding-bottom: 1rem; +} + +.contact-content-con { + display: flex; + padding-top: 3.5rem; +} +.contact-content-con .left-contact { + flex: 2; +} +.contact-content-con .left-contact h4 { + margin-top: 1rem; + font-size: 2rem; + text-transform: uppercase; +} +.contact-content-con .left-contact p { + margin: 1rem 0; + line-height: 2rem; +} +.contact-content-con .left-contact .contact-info .contact-item { + display: flex; + align-items: center; + justify-content: space-between; +} +.contact-content-con .left-contact .contact-info .contact-item p { + margin: 0.3rem 0 !important; + padding: 0 !important; +} +.contact-content-con .left-contact .contact-info .contact-item .icon { + display: grid; + grid-template-columns: 40px 1fr; +} +.contact-content-con .left-contact .contact-info .contact-item .icon i { + display: flex; + align-items: center; + font-size: 1.3rem; +} +.contact-content-con .left-contact .contact-icon { + display: flex; + margin-top: 2rem; +} +.contact-content-con .left-contact .contact-icon a { + display: flex; + align-items: center; + color: var(--color-white); + background-color: var(--color-gray-5); + cursor: pointer; + justify-content: center; + width: 50px; + height: 50px; + border-radius: 50%; + margin: 0 0.4rem; + transition: all 0.4s ease-in-out; +} +.contact-content-con .left-contact .contact-icon a:hover { + background-color: var(--color-secondary); +} +.contact-content-con .left-contact .contact-icon a:hover i { + color: var(--color-primary); +} +.contact-content-con .left-contact .contact-icon a i { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; +} +.contact-content-con .right-contact { + flex: 3; + margin-left: 3rem; +} +.contact-content-con .right-contact .input-control { + margin: 1.5rem 0; +} +.contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea { + border-radius: 30px; + font-weight: inherit; + font-size: inherit; + font-family: inherit; + padding: 0.8rem 1.1rem; + outline: none; + border: none; + background-color: var(--color-gray-5); + width: 100%; + color: var(--color-white); + resize: none; +} +.contact-content-con .right-contact .i-c-2 { + display: flex; +} +.contact-content-con .right-contact .i-c-2 :last-child { + margin-left: 1.5rem; +} +.contact-content-con .right-contact .submit-btn { + display: flex; + justify-content: flex-start; +} + +.btn-con { + display: flex; + align-self: flex-start; +} + +.main-btn { + border-radius: 30px; + color: inherit; + font-weight: 600; + position: relative; + border: 1px solid var(--color-secondary); + display: flex; + align-self: flex-start; + display: flex; + align-items: center; + overflow: hidden; +} +.main-btn .btn-text { + padding: 0 2rem; +} +.main-btn .btn-icon { + background-color: var(--color-secondary); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + padding: 1rem; +} +.main-btn::before { + content: ""; + position: absolute; + top: 0; + right: 0; + transform: translateX(100%); + transition: all 0.4s ease-out; + z-index: -1; +} +.main-btn:hover { + transition: all 0.4s ease-out; +} +.main-btn:hover::before { + width: 100%; + height: 100%; + background-color: var(--color-secondary); + transform: translateX(0); + transition: all 0.4s ease-out; +} + +.main-title { + text-align: center; +} +.main-title h2 { + position: relative; + text-transform: uppercase; + font-size: 4rem; + font-weight: 700; +} +.main-title h2 span { + color: var(--color-secondary); +} +.main-title h2 .bg-text { + position: absolute; + top: 50%; + left: 50%; + color: var(--color-gray-5); + transition: all 0.4s ease-in-out; + z-index: -1; + transform: translate(-50%, -50%); + font-weight: 800; + font-size: 6.3rem; +} + +.about-container { + grid-template-columns: 1fr; +} +.about-container .right-about { + grid-template-columns: 1fr; + padding-top: 2.5rem; +} +.about-container .left-about { + padding-right: 0; +} +.about-container .left-about p { + padding-left: 0; +} + +.timeline { + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.portfolios { + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.blogs { + grid-template-columns: 1fr; + padding-bottom: 6rem; +} + +.section { + padding: 2rem 2.5rem; +} + +.main-title h2 { + font-size: 2rem; +} +.main-title h2 span { + font-size: 2.5rem; +} +.main-title h2 .bg-text { + font-size: 3rem; +} + +@media screen and (max-width: 1432px) { + header { + padding: 0 !important; + } + .section { + padding: 7rem 11rem; + } + .contact-content-con { + flex-direction: column; + } + .contact-content-con .right-contact { + margin-left: 0; + margin-top: 2.5rem; + } + .contact-content-con .right-contact .i-c-2 { + flex-direction: column; + } + .contact-content-con .right-contact .i-c-2 :last-child { + margin-left: 0; + margin-top: 1.5rem; + } +} +@media screen and (max-width: 1070px) { + .about-container { + grid-template-columns: 1fr; + } + .about-container .right-about { + padding-top: 2.5rem; + } + .portfolios { + grid-template-columns: 1fr 1fr; + } + .blogs { + grid-template-columns: 1fr 1fr; + } + .main-title h2 { + font-size: 4rem; + } + .main-title h2 span { + font-size: 4rem; + } + .main-title h2 .bg-text { + font-size: 4.5rem; + } +} +@media screen and (max-width: 970px) { + .section { + padding: 7rem 6rem; + } + header { + padding: 0; + } + header .right-header { + padding: 0 !important; + } + .theme-btn { + width: 50px; + height: 50px; + } + .header-content { + grid-template-columns: 1fr; + padding-bottom: 6rem; + } + .left-header .h-shape { + display: none; + } + .right-header { + grid-row: 1; + width: 90%; + margin: 0 auto; + } + .right-header .name { + font-size: 2.5rem !important; + } + .header-content .left-header .image { + margin: 0 auto; + width: 90%; + } + .controls { + top: auto; + bottom: 0; + flex-direction: row; + justify-content: center; + left: 50%; + transform: translateX(-50%); + width: 100%; + background-color: var(--color-gray-5); + } + .controls .control { + margin: 0.6rem 2rem !important; + } +} +@media screen and (max-width: 700px) { + .section { + padding: 7rem 3rem; + } + .about-stats .progress-bars { + grid-template-columns: 1fr; + } + .main-title h2 { + font-size: 3rem; + } + .main-title h2 span { + font-size: 3rem; + } + .main-title h2 .bg-text { + font-size: 4rem; + } +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/styles/styles.css.map b/styles/styles.css.map new file mode 100644 index 0000000..6d165ec --- /dev/null +++ b/styles/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.scss","styles.css","_media.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss new file mode 100644 index 0000000..8295792 --- /dev/null +++ b/styles/styles.scss @@ -0,0 +1,725 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; +} + +:root{ + --color-primary: #191d2b; + --color-secondary: #27AE60; + --color-white: #FFFFFF; + --color-black: #000; + --color-gray0: #f8f8f8; + --color-gray-1: #dbe1e8; + --color-gray-2: #b2becd; + --color-gray-3: #6c7983; + --color-gray-4: #454e56; + --color-gray-5: #2a2e35; + --color-gray-6: #12181b; + --br-sm-2: 14px; + --box-shadow-1: 0 3px 15px rgba(0,0,0,.3); +} + +.light-mode{ + --color-primary: #FFFFFF; + --color-secondary: #F56692; + --color-white: #454E56; + --color-black: #000; + --color-gray0: #f8f8f8; + --color-gray-1: #6c7983; + --color-gray-2: #6c7983; + --color-gray-3: #6c7983; + --color-gray-4: #454e56; + --color-gray-5: #f8f8f8; + --color-gray-6: #12181b; +} + +body{ + + background-color: var(--color-primary); + font-family: 'Poppins', sans-serif; + font-size: 1.1rem; + color: var(--color-white); + transition: all .4s ease-in-out; +} +a{ + display: inline-block; + text-decoration: none; + color: inherit; + font-family: inherit; +} + +header{ + min-height: 100vh; + color: var(--color-white); + overflow: hidden; +} + +section{ + min-height: 100vh; + width: 100%; + position: absolute; + left: 0; + top: 0; + padding: 3rem 10rem; +} +.section{ + transform: translateY(-100%) scale(0); + transition: all .4s ease-in-out; + background-color: var(--color-primary); +} +.sec1{ + display: none; + transform: translateY(0) scale(1); +} + +.sec2{ + display: none; + transform: translateY(0) scale(1); +} + +.sec3{ + display: none; + transform: translateY(0) scale(1); +} + +.sec4{ + display: none; + transform: translateY(0) scale(1); +} + +.sec5{ + display: none; + transform: translateY(0) scale(1); +} + +.active{ + display: block; + animation: scaleAnim 1s ease-in-out; + @keyframes scaleAnim { + 0%{ + transform: translateY(-100%) scaleY(0); + } + + 100%{ + transform: translateY(0) scaleY(1); + } + } +} + +//Controls +.controls{ + position: fixed; + z-index: 10; + top: 50%; + right: 3%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translateY(-50%); + .active-btn{ + background-color: var(--color-secondary) !important; + transition: all .4s ease-in-out; + i{ + color: var(--color-white) !important; + } + } + .control{ + padding: 1rem; + cursor: pointer; + background-color: var(--color-gray-4); + width: 55px; + height: 55px; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + margin: .7rem 0; + box-shadow: var(--box-shadow-1); + i{ + font-size: 1.2rem; + color: var(--color-gray-2); + pointer-events: none; + } + } +} + +.theme-btn{ + top: 5%; + right: 3%; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: var(--color-gray-4); + cursor: pointer; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 3px 15px rgba(0,0,0,.3); + transition: all .1s ease-in-out; + &:active{ + transform: translateY(-5px); + } + i{ + font-size: 1.4rem; + color: var(--color-gray-2); + pointer-events: none; + } +} + +// Header Content +.header-content{ + display: grid; + grid-template-columns: repeat(2, 1fr); + min-height: 100vh; + .left-header{ + display: flex; + align-items: center; + position: relative; + .h-shape{ + transition: all .4s ease-in-out; + width: 65%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + z-index: -1; + clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); + } + .image{ + border-radius: var(--br-sm-2); + height: 90%; + width: 68%; + margin-left: 4rem; + background-color: var(--color-black); + transition: all .4s ease-in-out; + img{ + border-radius: var(--br-sm-2); + width: 100%; + height: 100%; + object-fit: cover; + transition: all .4s ease-in-out; + filter: grayscale(100%); + &:hover{ + filter: grayscale(0%); + } + } + } + } + + .right-header{ + display: flex; + flex-direction: column; + justify-content: center; + padding-right: 11rem; + .name{ + font-size: 3rem; + span{ + color: var(--color-secondary); + } + } + p{ + margin: 1.5rem 0; + line-height: 2rem; + } + } +} + +// About +.about-container{ + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 3.5rem; + padding-bottom: 5rem; + .right-about{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + .about-item{ + border: 1px solid var(--color-gray-5); + border-radius: 5px; + transition: all .4s ease-in-out; + box-shadow: 1px 2px 15px rgba(0,0,0,.1); + &:hover{ + cursor: default; + transform: translateY(-5px); + border: 1px solid var(--color-secondary); + box-shadow: 1px 4px 15px rgba(0,0,0,.32); + } + .abt-text{ + padding: 1.5rem; + display: flex; + flex-direction: column; + .large-text{ + font-size: 3rem; + font-weight: 700; + color: var(--color-secondary); + } + .small-text{ + padding-left: 3rem; + position: relative; + text-transform: uppercase; + font-size: 1.2rem; + color: var(--color-gray-1); + letter-spacing: 2px; + &::before{ + content:''; + position: absolute; + left: 0; + top: 15px; + width: 2rem; + height: 2px; + background-color: var(--color-gray-5); + } + } + } + } + } + + .left-about{ + padding-right: 5rem; + p{ + line-height: 2rem; + padding: 1rem; + color: var(--color-gray-1); + } + h4{ + font-size: 2rem; + text-transform: uppercase; + } + } +} + +.about-stats{ + padding-bottom: 4rem; + .progress-bars{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + .progress-bar{ + display: flex; + flex-direction: column; + .prog-title{ + text-transform: uppercase; + font-weight: 500; + } + .progress-con{ + display: flex; + align-items: center; + .prog-text{ + color: var(--color-gray-2); + } + .progress{ + width: 100%; + height: .45rem; + background-color: var(--color-gray-4); + margin-left: 1rem; + position: relative; + span{ + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-secondary); + transition: all .4s ease-in-out; + width: 60%; + } + + .html{ + width: 60%; + } + .cpp{ + width: 75%; + } + .Java{ + width: 90%; + } + .css{ + width: 50%; + } + } + } + } + } +} +.stat-title{ + text-transform: uppercase; + font-size: 1.4rem; + text-align: center; + padding: 3.5rem 0; + position: relative; + &::before{ + content: ''; + position: absolute; + left: 50%; + top: 0; + width: 40%; + height: 1px; + background-color: var(--color-gray-5); + transform: translateX(-50%); + } +} + +// Timeline +.timeline{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + padding-bottom: 3rem; + .timeline-item{ + position: relative; + padding-left: 3rem; + border-left: 1px solid var(--color-gray-5); + .tl-icon{ + position: absolute; + left: -27px; + top: 0; + background-color: var(--color-secondary); + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + i{ + font-size: 1.3rem; + } + } + .tl-duration{ + padding: .2rem .6rem; + background-color: var(--color-gray-5); + border-radius: 15px; + display: inline-block; + font-size: .8rem; + text-transform: uppercase; + font-weight: 500; + } + h5{ + padding: 1rem 0; + text-transform: uppercase; + font-size: 1.3rem; + font-weight: 600; + span{ + color: var(--color-gray-2); + font-weight: 500; + font-size: 1.2rem; + } + } + p{ + color: var(--color-gray-2); + } + } +} + +// Portfolios +.port-text{ + padding: 2rem 0; + text-align: center; +} + +.portfolios{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; + .portfolio-item{ + position: relative; + border-radius: 15px; + img{ + width: 100%; + height: 300px; + object-fit: cover; + border-radius: 15px; + } + .hover-items{ + width: 100%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + opacity: 0; + transform: scale(0); + transition: all .4s ease-in-out; + h3{ + font-size: 1.5rem; + color: var(--color-white); + margin-bottom: 1.5rem; + } + .icons{ + display: flex; + justify-content: center; + align-items: center; + .icon{ + background-color: var(--color-primary); + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 1rem; + cursor: pointer; + transition: all .4s ease-in-out; + i{ + font-size: 1.7rem; + color: var(--color-white); + margin: 0 1rem; + } + + &:hover{ + background-color: var(--color-white); + i{ + color: var(--color-primary); + } + } + } + } + } + } +} + +.portfolio-item:hover .hover-items{ + opacity: 1; + transform: scale(1); +} + +// Blogs +.blogs{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; + .blog{ + position: relative; + background-color: var(--color-gray-5); + border-radius: 5px; + box-shadow: 1px 1px 20px rgba(0,0,0,.1); + transition: all .4s ease-in-out; + &:hover{ + box-shadow: 1px 1px 20px rgba(0,0,0,.3); + transform: translateY(-5px); + transition: all .4s ease-in-out; + img{ + filter: grayscale(0); + transform: scale(1.1); + box-shadow: 0px 4px 15px rgba(0,0,0,.8); + } + } + img{ + width: 100%; + height: 300px; + object-fit: cover; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + filter: grayscale(100%); + transition: all .4s ease-in-out; + } + .blog-text{ + margin-top: -7px; + padding: 1.1rem; + border-top: 8px solid var(--color-secondary); + h4{ + font-size: 1.5rem; + margin-bottom: .7rem; + transition: all .4s ease-in-out; + cursor: pointer; + &:hover{ + color: var(--color-secondary); + } + } + p{ + color: var(--color-gray-2); + line-height: 2rem; + padding-bottom: 1rem; + } + } + } +} + +// Contacts +.contact-content-con{ + display: flex; + padding-top: 3.5rem; + .left-contact{ + flex: 2; + h4{ + margin-top: 1rem; + font-size: 2rem; + text-transform: uppercase; + } + p{ + margin: 1rem 0; + line-height: 2rem; + } + + .contact-info{ + .contact-item{ + display: flex; + align-items: center; + justify-content: space-between; + p{ + margin: .3rem 0 !important; + padding: 0 !important; + } + .icon{ + display: grid; + grid-template-columns: 40px 1fr; + i{ + display: flex; + align-items: center; + font-size: 1.3rem; + } + } + } + } + + .contact-icon{ + display: flex; + margin-top: 2rem; + a{ + display: flex; + align-items: center; + color: var(--color-white); + background-color: var(--color-gray-5); + cursor: pointer; + justify-content: center; + width: 50px; + height: 50px; + border-radius: 50%; + margin: 0 .4rem; + transition: all .4s ease-in-out; + &:hover{ + background-color: var(--color-secondary); + i{ + color: var(--color-primary); + } + } + i{ + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; + } + } + } + } + + .right-contact{ + flex: 3; + margin-left: 3rem; + .input-control{ + margin: 1.5rem 0; + input, textarea{ + border-radius: 30px; + font-weight: inherit; + font-size: inherit; + font-family: inherit; + padding: .8rem 1.1rem; + outline: none; + border: none; + background-color: var(--color-gray-5); + width: 100%; + color: var(--color-white); + resize: none; + } + } + .i-c-2{ + display: flex; + :last-child{ + margin-left: 1.5rem; + } + } + .submit-btn{ + display: flex; + justify-content: flex-start; + } + } +} + + + + +// Independent components +.btn-con{ + display: flex; + align-self: flex-start; +} +.main-btn{ + border-radius: 30px; + color: inherit; + font-weight: 600; + position: relative; + border: 1px solid var(--color-secondary); + display: flex; + align-self: flex-start; + display: flex; + align-items: center; + overflow: hidden; + .btn-text{ + padding: 0 2rem; + } + .btn-icon{ + background-color: var(--color-secondary); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + padding: 1rem; + } + &::before{ + content: ''; + position: absolute; + top: 0; + right: 0; + transform: translateX(100%); + transition: all .4s ease-out; + z-index: -1; + } + &:hover{ + transition: all .4s ease-out; + &::before{ + width: 100%; + height: 100%; + background-color: var(--color-secondary); + transform: translateX(0); + transition: all .4s ease-out; + } + } +} + +.main-title{ + text-align: center; + h2{ + position: relative; + text-transform: uppercase; + font-size: 4rem; + font-weight: 700; + span{ + color: var(--color-secondary); + } + .bg-text{ + position: absolute; + top: 50%; + left: 50%; + color: var(--color-gray-5); + transition: all .4s ease-in-out; + z-index: -1; + transform: translate(-50%, -50%); + font-weight: 800; + font-size: 6.3rem; + } + } +} + + +@import './media'; \ No newline at end of file