Fully Responsive Portfolio Using HTML CSS And Javascript
HTML CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- UNICONS -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Add favicon -->
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
<title>Portfolio Website</title>
</head>
<body>
<div class="container">
<!-- --------------- HEADER --------------- -->
<nav id="header">
<div class="nav-logo">
<p class="nav-name">Codewithshobhit</p>
<span>.</span>
</div>
<div class="nav-menu" id="myNavMenu">
<ul class="nav_menu_list">
<li class="nav_list">
<a href="#home" class="nav-link active-link">Home</a>
<div class="circle"></div>
</li>
<li class="nav_list">
<a href="#about" class="nav-link">About</a>
<div class="circle"></div>
</li>
<li class="nav_list">
<a href="#projects" class="nav-link">Projects</a>
<div class="circle"></div>
</li>
<li class="nav_list">
<a href="#contact" class="nav-link">Contact</a>
<div class="circle"></div>
</li>
</ul>
</div>
<div class="nav-button">
<button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
</div>
<div class="nav-menu-btn">
<i class="uil uil-bars" onclick="myMenuFunction()"></i>
</div>
</nav>
<!-- -------------- MAIN ---------------- -->
<main class="wrapper">
<!-- -------------- FEATURED BOX ---------------- -->
<section class="featured-box" id="home">
<div class="featured-text">
<div class="featured-text-card">
<span>Codewithshobhit</span>
</div>
<div class="featured-name">
<p>I'm <span class="typedText"></span></p>
</div>
<div class="featured-text-info">
<p>CodeWithShobhit is a blog dedicated to coding and web development. I share my knowledge and experience on a variety of topics, including Python, JavaScript, HTML, CSS, and more. Whether you're a beginner or an experienced developer, I hope you'll find something of value on my blog.
I'm passionate about teaching others how to code, and I believe that everyone can learn to code if they're given the right tools and resources.
</p>
</div>
<div class="featured-text-btn">
<button class="btn blue-btn">Hire Me</button>
<button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
</div>
<div class="social_icons">
<div class="icon"><i class="uil uil-instagram"></i></div>
<div class="icon"><i class="uil uil-linkedin-alt"></i></div>
<div class="icon"><i class="uil uil-twitter"></i></div>
<div class="icon"><i class="uil uil-github-alt"></i></div>
</div>
</div>
<div class="featured-image">
<div class="image">
<img src="https://i.pinimg.com/originals/0c/c9/87/0cc987042668b6d5276ae0757069474f.png" alt="avatar">
</div>
</div>
<div class="scroll-icon-box">
<a href="#about" class="scroll-btn">
<i class="uil uil-mouse-alt"></i>
<p>Scroll Down</p>
</a>
</div>
</section>
<!-- -------------- ABOUT BOX ---------------- -->
<section class="section" id="about">
<div class="top-header">
<h1>About Me</h1>
</div>
<div class="row">
<div class="col">
<div class="about-info">
<h3>My introduction</h3>
<p>I am well-versed in HTML, CSS and JavaScript , and other cutting edge
frameworks and libraries,which allows me to implement interactive features.
Additionally, I have experirence working with content management systems (CMS) like
WordPress.
</p>
<div class="about-btn">
<button class="btn">Download CV <i class="uil uil-import"></i></button>
</div>
</div>
</div>
<div class="col">
<div class="skills-box">
<div class="skills-header">
<h3>Frontend</h3>
</div>
<div class="skills-list">
<span>HTML</span>
<span>CSS</span>
<span>Bootstrap</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Angular</span>
</div>
</div>
<div class="skills-box">
<div class="skills-header">
<h3>Backend</h3>
</div>
<div class="skills-list">
<span>PHP</span>
<span>JAVA</span>
<span>Python</span>
<span>C++</span>
</div>
</div>
<div class="skills-box">
<div class="skills-header">
<h3>Database</h3>
</div>
<div class="skills-list">
<span>MySQL</span>
<span>PostgreSQL</span>
<span>MongoDB</span>
</div>
</div>
</div>
</div>
</section>
<!-- -------------- PROJECT BOX ---------------- -->
<section class="section" id="projects">
<div class="top-header">
<h1>Projects</h1>
</div>
<div class="project-container">
<div class="project-box">
<i class="uil uil-briefcase-alt"></i>
<h3>Completed</h3>
<label>15+ Finished Projects</label>
</div>
<div class="project-box">
<i class="uil uil-users-alt"></i>
<h3>Clients</h3>
<label>25+ Happy Clients</label>
</div>
<div class="project-box">
<i class="uil uil-award"></i>
<h3>Experience</h3>
<label>7+ Years in the field</label>
</div>
</div>
</section>
<!-- -------------- CONTACT BOX ---------------- -->
<section class="section" id="contact">
<div class="top-header">
<h1>Get in touch</h1>
<span>Do you have a project in your mind, contact me here</span>
</div>
<div class="row">
<div class="col">
<div class="contact-info">
<h2>Find Me <i class="uil uil-corner-right-down"></i></h2>
<p><i class="uil uil-envelope"></i> Email: codewithshobhit.com</p>
<p><i class="uil uil-phone"></i> +91 143 143 143</p>
</div>
</div>
<div class="col">
<div class="form-control">
<div class="form-inputs">
<input type="text" class="input-field" placeholder="Name">
<input type="text" class="input-field" placeholder="Email">
</div>
<div class="text-area">
<textarea placeholder="Message"></textarea>
</div>
<div class="form-button">
<button class="btn">Send <i class="uil uil-message"></i></button>
</div>
</div>
</div>
</div>
</section>
</main><br><br><br><br><br>
<!-- --------------- FOOTER --------------- -->
<footer>
<center>
<div class="top-footer">
<p>Copyright © <a href="#home" style="text-decoration: none;">Codewithshobhit</a> - All rights reserved
</p>
</div>
</center>
<div class="wave wave1"></div>
<div class="wave wave2"></div> <div class="wave wave3"></div>
<div class="wave wave4"></div>
</footer>
</div>
<!-- ----- TYPING JS Link ----- -->
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<!-- ----- SCROLL REVEAL JS Link----- -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- ----- MAIN JS ----- -->
<script src="script.js"></script>
</body>
</html>
CSS CODE
CSS
/* ----- POPPINS FONT Link ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ----- VARIABLES ----- */
:root{
--body-color: radial-gradient(circle, rgba(70,239,252,1) 0%, rgba(208,61,183,1) 49%, rgba(51,133,163,1) 100%);;
--color-white: rgb(255, 255, 255);
--text-color-second: #1189ff;
--text-color-third: rgb(30, 159, 171);
--first-color: white;
--first-color-hover: rgb(40, 91, 212);
--second-color: rgb(110, 87, 224);
--third-color: rgb(192, 166, 49);
--first-shadow-color: rgba(0, 0, 0, 0.1);
}
/* ----- BASE ----- */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* ----- SMOOTH SCROLL ----- */
html{
scroll-behavior: smooth;
}
/* ----- CHANGE THE SCROLL BAR DESIGN ----- */
::-webkit-scrollbar{
width: 10px;
border-radius: 25px;
}
::-webkit-scrollbar-track{
background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background: #ccc;
border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
background: #bbb;
}
/* ---##-- REUSABLE CSS --##--- */
/* ----- GLOBAL BUTTON DESIGN ----- */
.btn{
font-weight: 500;
padding: 12px 20px;
background: #efefef;
border: none;
border-radius: 10px;
cursor: pointer;
transition: .4s;
}
.btn>i{
margin-left: 10px;
}
.btn:hover{
background: yellow;
color: var(--color-white);
}
/* ----- GLOBAL ICONS DESIGN ----- */
i{
font-size: 16px;
}
/* ------- BASE -------- */
body{
background: var(--body-color);
}
.container{
width: 100%;
position: relative;
overflow-x: hidden; /* not mandatory */
}
/* ----- NAVIGATION BAR ----- */
nav{
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
height: 90px;
line-height: 90px;
background: var(--body-color);
padding-inline: 9vw;
transition: .3s;
z-index: 100;
}
.nav-logo{
position: relative;
}
.nav-name{
font-size: 30px;
font-weight: 600;
color: #2d4e77;
}
.nav-logo span{
position: absolute;
top: -15px;
right: -20px;
font-size: 5em;
color: var(--text-color-second);
}
.nav-menu, .nav_menu_list{
display: flex;
}
.nav-menu .nav_list{
list-style: none;
position: relative;
}
.nav-link{
text-decoration: none;
font-weight: 500;
padding-inline: 15px;
margin-inline: 20px;
}
.nav-menu-btn{
display: none;
}
.nav-menu-btn i{
font-size: 28px;
cursor: pointer;
}
.active-link{
position: relative;
color: var(--first-color);
transition: .3;
}
.active-link::after{
content: '';
position: absolute;
left: 50%;
bottom: -15px;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background: var(--first-color);
border-radius: 50%;
}
/* ----- WRAPPER DESIGN ----- */
.wrapper{
padding-inline: 10vw;
}
/* ----- FEATURED BOX ----- */
.featured-box{
position: relative;
display: flex;
height: 100vh;
min-height: 700px;
}
/* ----- FEATURED TEXT BOX ----- */
.featured-text{
position: relative;
display: flex;
justify-content: center;
align-content: center;
min-height: 80vh;
flex-direction: column;
width: 50%;
padding-left: 20px;
}
.featured-text-card span{
background: var(--third-color);
color: var(--color-white);
padding: 3px 8px;
font-size: 12px;
border-radius: 5px;
}
.featured-name{
font-size: 50px;
font-weight: 600;
color: var(--text-color-second);
margin-block: 20px;
}
.typedText{
text-transform: capitalize;
color: yellow;
}
.featured-text-info{
font-size: 15px;
margin-bottom: 30px;
color: #4c19a7;
}
.featured-text-btn{
display: flex;
gap: 20px;
}
.featured-text-btn>.blue-btn{
background: #362a70;
color: var(--color-white);
}
.featured-text-btn>.blue-btn:hover{
background: var(--first-color-hover);
}
.social_icons{
display: flex;
margin-top: 5em;
gap: 30px;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.icon:hover{
color: var(--first-color);
}
/* ----- FEATURED IMAGE BOX ----- */
.featured-image{
display: flex;
justify-content: right;
align-content: center;
min-height: 80vh;
width: 60%;
drop-shadow(16px 16px 20px black);
}
.image{
margin: auto 0;
width: 480px;
height: 480px;
animation: imgFloat 7s ease-in-out infinite;
filter: drop-shadow(10px 10px 10px rgb(167, 7, 148));;
}
.image img{
width: 480px;
height: 480px;
object-fit: contain;
}
@keyframes imgFloat {
50%{
transform: translateY(10px);
}
}
.scroll-btn{
position: absolute;
bottom: 0;
left: 50%;
translate: -50%;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 50px;
gap: 5px;
text-decoration: none;
color: var(--text-color-second);
background: var(--color-white);
border-radius: 30px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.scroll-btn i{
font-size: 20px;
}
/* ----- MAIN BOX ----- */
.section{
padding-block: 5em;
}
.row{
display: flex;
justify-content: space-between;
width: 100%;
gap: 50px;
}
.col{
display: flex;
width: 50%;
}
/* -- ## --- RESUABLE CSS -- ## -- */
.top-header{
text-align: center;
margin-bottom: 5em;
}
.top-header h1{
font-weight: 600;
color: var(--text-color-second);
margin-bottom: 10px;
}
.top-header span{
color: #1f2f54;
}
h3{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 15px;
}
/* ----- ABOUT INFO ----- */
.about-info{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding-block: 30px 70px;
padding-inline: 20px;
width: 100%;
background: var(--color-white);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border-radius: 20px;
}
.about-info p{
text-align: center;
font-size: 15px;
color: #777;
}
.about-btn button{
position: absolute;
right: 20px;
bottom: 20px;
background: var(--first-color);
color: var(--color-white);
border-radius: 30px;
}
.about-btn button:hover{
background: var(--first-color-hover);
}
/* ----- ABOUT / SKILLS BOX ----- */
.skills-box{
margin: 10px;
}
.skills-header{
margin-bottom: 30px;
}
.skills-list{
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.skills-list span{
font-size: 14px;
background: #362a70;
color: var(--color-white);
padding: 2px 10px;
border-radius: 5px;
}
/* ----- PROJECTS BOX ----- */
.project-container{
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.project-box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 30%;
height: 250px;
background: var(--color-white);
border-radius: 20px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
overflow: hidden;
}
.project-box>i{
font-size: 50px;
color: #00B5E7;
margin-bottom: 25px;
}
.project-box label{
font-size: 15px;
color: #777;
}
.project-box::after, .contact-info::after{
content: "";
position: absolute;
bottom: -100%;
background: blue;
width: 100%;
height: 100%;
transition: .4s;
z-index: 1;
}
.project-box:hover.project-box::after,
.contact-info:hover.contact-info::after{
bottom: 0;
}
.project-box:hover.project-box i,
.project-box:hover.project-box>h3,
.project-box:hover.project-box>label{
color: var(--color-white);
z-index: 2;
}
/* ----- CONTACT BOX ----- */
.contact-info{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 30px;
width: 100%;
height: 315px;
background: var(--second-color);
border-radius: 10px;
box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
overflow: hidden;
}
.contact-info>h2{
color: var(--color-white);
margin-bottom: 20px;
}
.contact-info>p{
display: flex;
align-items: center;
gap: 10px;
color: var(--color-white);
margin-block: 5px;
}
.contact-info p>i{
font-size: 18px;
}
.contact-info::after{
background: var(--color-white);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
color: #777;
z-index: 2;
}
/* ----- CONTACT FORM ----- */
.form-control{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.form-inputs{
display: flex;
gap: 10px;
width: 100%;
}
.input-field{
width: 50%;
height: 55px;
background: transparent;
border: 2px solid #AAA;
border-radius: 10px;
padding-inline: 20px;
outline: none;
}
textarea{
width: 100%;
height: 250px;
background: transparent;
border: 2px solid #AAA;
border-radius: 10px;
padding: 15px 20px;
outline: none;
resize: none;
}
.form-button>.btn{
display: flex;
align-items: center;
justify-content: center;
background: var(--second-color);
color: var(--color-white);
}
.form-button>.btn:hover{
background: #00B5E7;
}
font-size: 18px;
rotate: -45deg;
}
/* ----- FOOTER BOX ----- */
footer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 30px;
background: #3385a3;
padding-block: 40px 60px;
}
.top-footer p{
font-size: 25px;
font-weight: 600;
}
.middle-footer .footer-menu{
display: flex;
}
.footer_menu_list{
list-style: none;
}
.footer_menu_list a{
text-decoration: none;
color: var(--text-color-second);
font-weight: 500;
margin-inline: 20px;
}
.footer-social-icons{
display: flex;
gap: 30px;
}
.bottom-footer{
font-size: 14px;
margin-top: 10px;
}
/* ----- MEDIA QUERY == 1024px / RESPONSIVE ----- */
@media only screen and (max-width: 1024px){
.featured-text{
padding: 0;
}
.image, .image img{
width: 420px;
height: 420px;
}
}
/* ----- MEDIA QUERY == 900px / RESPONSIVE ----- */
@media only screen and (max-width: 900px) {
.nav-button{
display: none;
}
.nav-menu.responsive{
left: 0;
}
.nav-menu{
position: fixed;
top: 80px;
left: -100%;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
width: 100%;
min-height: 450px;
height: 90vh;
transition: .3s;
}
.nav_menu_list{
flex-direction: column;
}
.nav-menu-btn{
display: flex;
align-items: center;
justify-content: center;
}
.featured-box{
flex-direction: column;
justify-content: center;
height: 100vh;
}
.featured-text{
width: 100%;
order: 2;
justify-content: center;
align-content: flex-start;
min-height: 60vh;
}
.social_icons{
margin-top: 2em;
}
.featured-image{
order: 1;
justify-content: center;
min-height: 150px;
width: 100%;
margin-top: 65px;
}
.image, .image img{
width: 150px;
height: 150px;
}
.row{
display: flex;
flex-direction: column;
justify-content: center;
gap: 50px;
}
.col{
display: flex;
justify-content: center;
width: 100%;
}
.about-info, .contact-info{
width: 100%;
}
.project-container{
justify-content: center;
}
.project-box{
width: 80%;
}
}
/* ----- MEDIA QUERY == 540px / RESPONSIVE ----- */
@media only screen and (max-width: 540px){
.featured-name{
font-size: 40px;
}
.project-box{
width: 100%;
}
.form-inputs{
flex-direction: column;
}
.input-field{
width: 100%;
}
}
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.wave{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 108px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg");
background-size: 1600px 198;
}
.wave1{
animation: animate-wave-1 10s linear infinite;
z-index: 1000;
opacity: 1;
animation-delay: 0s;
bottom: 0;
}
.wave2{
animation: animate-wave-2 5s linear infinite;
z-index: 999;
opacity: 0.5;
animation-delay: -5s;
bottom: 10px;
}
.wave3{
animation: animate-wave-3 10s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -2s;
bottom: 15px;
}
.wave4{
animation: animate-wave-4 2s linear infinite;
z-index: 997;
opacity: 0.7;
animation-delay: -5s;
bottom: 20px;
}
@keyframes animate-wave-1{0% {background-position-x: 0;}
100% {background-position-x: 1600px;}
}
@keyframes animate-wave-2{0% {background-position-x: 0;}
100% {background-position-x: -1600px;}
}
@keyframes animate-wave-3{0% {background-position-x: 0;}
100% {background-position-x: 1600px;}
}
@keyframes animate-wave-4{0% {background-position-x: 0;}
100% {background-position-x: -1600px;}
}
JS CODE
JS
/* ----- NAVIGATION BAR FUNCTION ----- */
function myMenuFunction(){
let menuBtn = document.getElementById("myNavMenu");
if(menuBtn.className === "nav-menu"){
menuBtn.className += " responsive";
} else {
menuBtn.className = "nav-menu";
}
}
/* ----- ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING ----- */
window.onscroll = function() {headerShadow()};
function headerShadow() {
const navHeader =document.getElementById("header");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
navHeader.style.height = "70px";
navHeader.style.lineHeight = "70px";
} else {
navHeader.style.boxShadow = "none";
navHeader.style.height = "90px";
navHeader.style.lineHeight = "90px";
}
}
/* ----- TYPING EFFECT ----- */
let typingEffect = new Typed(".typedText",{
strings : ["Designer","Youtuber","Developer"],
loop : true,
typeSpeed : 100,
backSpeed : 80,
backDelay : 2000
})
/* ----- ## -- SCROLL REVEAL ANIMATION -- ## ----- */
const sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
})
/* -- HOME -- */
sr.reveal('.featured-text-card',{})
sr.reveal('.featured-name',{delay: 100})
sr.reveal('.featured-text-info',{delay: 200})
sr.reveal('.featured-text-btn',{delay: 200})
sr.reveal('.social_icons',{delay: 200})
sr.reveal('.featured-image',{delay: 300})
/* -- PROJECT BOX -- */
sr.reveal('.project-box',{interval: 200})
/* -- HEADINGS -- */
sr.reveal('.top-header',{})
/* ----- ## -- SCROLL REVEAL LEFT_RIGHT ANIMATION -- ## ----- */
/* -- ABOUT INFO & CONTACT INFO -- */
const srLeft = ScrollReveal({
origin: 'left',
distance: '80px',
duration: 2000,
reset: true
})
srLeft.reveal('.about-info',{delay: 100})
srLeft.reveal('.contact-info',{delay: 100})
/* -- ABOUT SKILLS & FORM BOX -- */
const srRight = ScrollReveal({
origin: 'right',
distance: '80px',
duration: 2000,
reset: true
})
srRight.reveal('.skills-box',{delay: 100})
srRight.reveal('.form-control',{delay: 100})
/* ----- CHANGE ACTIVE LINK ----- */
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
const scrollY = window.scrollY;
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 50,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
} else {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)
Live preview Of Responsive Portfolio
See the Pen Fully responsive Portfolio by Codewithshobhit (@Codewithshobhit) on CodePen.
No comments:
Post a Comment