styles.css

/* All */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body{
    font-family: 'Poppins', sans-serif;
}

/* Header */
header{
    background-color: #F4F7FF;
    box-shadow: 3px 3px 15px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    padding: 15px 4%;
    position: fixed;
    top: 0;
    width:100%;
    z-index: 1;
}
header nav ul{
    display: flex; 
    list-style: none;
}
header nav ul li a{
    color: black;
    text-decoration: none; 
    padding: 10px 15px;
}
header nav ul li a:hover{
    color: #4070F4;
    border-bottom: 3px solid #4070F4;
}

.active {
    color: #4070F4;
    border-bottom: 3px solid #4070F4;
}


/* Home */
#home{
    border-width: 10px;
    padding: 50px 20px 0px;
    text-align: center;  
}
#home img{
    /* border: 5px solid black; */
    border-radius: 200px;
    height: 300px;
    width: 300px;
    margin-top: 40px;
}
#home p{
    font-size: 50px;
    font-weight: 500;
    padding: 5px;
}
.home_buttons{
    margin-top: 30px;
}
#git_button{
    text-decoration: none;
    color: black;
    padding-left: 20px;
}
#git_button i{
    padding: 0 5px 0 0;
    font-size: 40px;
    color: black;
    vertical-align: middle;
}
#git_button b{
    vertical-align: middle;
}
#git_button:hover i, #git_button:hover b{
    color: grey;
}


/* Button */
button{
    background-color: #4070F4;
    border: none;
    border-radius: 30px;
    cursor:pointer;
    display: inline-block;
    font-size: 15px;
    outline: none;  
    padding: 10px 30px;
}
button:hover{
    box-shadow: inset 200px 0 0 0 grey;
}
button a{
    color: white;
    text-decoration: none;
}


/* About */
#about{
    text-align: center; 
    padding-top: 60px;
}
#about h3{
    display: block;
    font-size: 30px;
    color: #4070F4;
    border-bottom: 3px solid #4070F4;
    margin: 10px auto;
    width: 180px;
}
#about p{
    padding: 10px 25%;
}


/* Profile */
.skills{
    display: flex;
    padding: 50px 15% 0;
}
.column{
    flex: 50%;
}
.info-list{
    list-style: none;
    margin-top: 10px;
}
.info-list li{
    padding: 18px 0;
}
li a{
    text-decoration: none;
    color:  #4070F4;
}
li a:hover{
    color:  grey;
}
.skills-button{
    text-align: center;
}


/*
 * Skillbars - (Reference: https://github.com/bonn0062/anne_bonner/blob/master/css/main.css)
 */
.skill-bars{
    list-style: none;
    padding: 50px 0 0;
}
.skill-bars li {
    position: relative;
    background: lightgrey;
	height: 6px;
	width: 100%;
    margin-bottom: 54px;
}
.skill-bars li strong {
    position: absolute;
    color: black;
    top: -30px;
    left: 40px;
}
.skill-bars li i{   
    position: absolute;
    color: black;
    top: -36px;
    font-size: 35px;
}
.skill-bars li .progress {
    position: relative;
	background: black;
	height: 100%;
}
/* Chat bubbles */
.skill-bars li .progress span {
    position: absolute;
    /* text-align: center;
    width: 100px; */
	right: -17px;
	top: -40px;
	color: white;
	background: black;
	padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}
.skill-bars li .progress span::after {
	position: absolute;
	left: 50%;
	bottom: -5px;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-top: 5px solid #313131;
	content: "";
}
.skill-bars li .percent80  { width: 91%; }
.skill-bars li .percent85  { width: 93%; }
.skill-bars li .percent90  { width: 95%; }
.skill-bars li .percent95  { width: 97%; }


/* Work section*/
#work{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 2% 0;
}
#work h3{
    text-align: center;
    font-size: 30px;
    color: #4070F4;
    border-bottom: 3px solid #4070F4;
    margin: 0 auto 20px;
    width: 160px;
}
.w-container{
	width: 90%;
	height: 480px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap: 30px;
}


/* Portfolio section*/
#project{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 2%;
}
#project h3{
    text-align: center;
    font-size: 30px;
    color: #4070F4;
    border-bottom: 3px solid #4070F4;
    margin: 0 auto 20px;
    width: 160px;
}
.container{
	width: 90%;
	height: 780px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap: 30px;
}
.box, .box2{
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 3px 3px 15px rgba(0,0,0,0.3);
}
.box img, .box2 img{
    width: 100%;
	height: 100%;
	object-fit: cover;
}
.box:hover .overlay-text, .box2:hover .overlay-text{
    display: flex;
    cursor: pointer;
}
/* .box2{
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 3px 3px 15px rgba(0,0,0,0.3);
} */
/* .box2 img{
    width: 100%;
	height: 100%;
	object-fit: cover;
} */
/* .box2:hover .overlay-text{
    display: flex;
    cursor: pointer;
} */
.overlay-text{
    color: white;
	position: absolute;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: rgba(64,112,244,0.90);
    display:none;
    font-size: 1.5vw;
}


/********************* Popup Menues *********************/
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
  
.popup {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: 5% auto;
    padding: 40px;
    background: #fff;
    width: 80%;
    border-radius: 20px;
}
.popup .close {
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.popup .close:hover {
    color: red;
}
.content h2 {
    padding-bottom: 10px;
}
.content{
    max-height: 100%;
    overflow: auto;
}
.content li{
    padding: 0 20px 20px 20px;  
}
.content b{
    font-size: 20px;
}
.content p{
    padding-bottom: 10px;
}
/* images and youtube Videos in popups*/
.content img{
    text-align: center;
    padding: 0px 40px;
}
.content iframe{
    text-align: center;
    padding: 0px 40px;
}

/* Technology Table for Popup menu */
table{
    margin: 20px 2%;
    background-color: white;
    width: 96%;
    height: auto;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
table th{
    background-color: #F4F7FF;
    color: black;
    height: 40px;
    font-size: 20px;
    padding-top: 5px;
}
#table_item{
    display: inline-block;
    text-align: center;
    align-items: center;
    margin: 10px;
}
#table_item img{
    padding: 20px;
    height: 100px;
    width: 100px;
}


/* Footer section*/
footer{
    background: black;
    color: white;
    text-align: center;
    padding: 20px;
    
}
footer a{
    color: white;
    font-size: 25px;
    padding: 15px;
    text-decoration: none; 
}
footer a:hover{
    color: #4070F4;
}
.footer-links{
    padding: 10px;
}
#designed-by{
    font-size: medium;
}

#designed-by::after{
	content: "© 2021 All Rights Reserved";
}
#designed-by:hover::after{
	content: "Built with 💙 by Jeff Wang";
}


/* Scrollbar Effects */
/* width */
::-webkit-scrollbar {
    width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: darkgrey;
} 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: grey;
}

/* Smaller project/ work grids */
@media only screen and (max-width : 1400px){
    .w-container{
        height: 360px;
        grid-template-columns:1fr 1fr 1fr;
    }
    .container{
        height: 540px;
        grid-template-columns:1fr 1fr 1fr;
    }
}

/* Remove Chat bubbles*/
@media only screen and (max-width : 1038px){
    .skill-bars li .progress span {
        color: transparent;
        background: transparent;
    }
    .skill-bars li .progress span::after {
        border: none;
    }

}

/* Shift Skill list down & Shift work/Projects to 2 columns & expand about text  */
@media only screen and (max-width : 815px){
    .skills{
        display: block;
        padding: 30px 15% 0;
    }
    .column{
        margin-top: 40px;
    }

    .w-container{
        height: 300px;
        grid-template-columns:1fr 1fr;
        grid-gap: 20px;
    }
    .container{
        height: 630px;
        grid-template-columns:1fr 1fr;
        grid-gap: 20px;
    }
    .overlay-text{
        font-size: 2vw;
    }

    #about p{
        padding: 10px 10%;
    }

    /* Chat bubbles */
    .skill-bars li .progress span {
        color: white;
        background: black;
    }
    .skill-bars li .progress span::after {
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 5px solid #313131;
    }
}


/* Shift Navbar & Shift work/Projects to 1 columns*/
@media only screen and (max-width : 590px){
    header{
        text-align: center;
        display: block;
        padding: 10px 0;
        position: fixed;
    }
    header nav ul{
        display: inline-flex;
        list-style: none;
    }
    header nav ul li{
        padding: 0;
    }
    header nav ul li a{
        padding: 10px;
    }
    header nav ul li a:hover{
        border-bottom: 0px solid transparent;
    }

    #home img{
        border-radius: 50%;
        height: 200px;
        width: 200px;
        margin-top: 30px;
    }
    #home p{
        font-size: 50px;
        font-weight: 500;
        padding: 5px;
    }

    .w-container{
        height: 600px;
        grid-template-columns:1fr;
    }
    .container{
        height: 1200px;
        grid-template-columns:1fr;
    }
    .overlay-text{
        font-size: 4.5vw;
    }

    /********************* Resize Popup Menu *********************/    
    .popup {
        margin: auto;
        padding: 40px 20px 20px;
        width: 100%;
        border-radius: 0px;
    }
    .popup .close {
        top: 0px;
        right: 10px;
    }
    .content li{
        padding: 0 10px 20px;  
    }
    
    .overlay #git_button{
        padding-left: 3px;
    }
    .overlay #git_button i{
        padding: 0 3px 0 0;
        font-size: 30px;
    }

    /* images and youtube Videos in popups*/
    .content img{
        text-align: center;
        padding: 0px 5px;
    }
    .content iframe{
        text-align: center;
        padding: 0px 5px;
    }

    /* Technology Table for Popup menu */
    #table_item{
        display: inline-block;
        text-align: center;
        align-items: center;
        margin: 10px;
    }
    #table_item img{
        padding: 10px;
        height: 60px;
        width: 60px;
    }

}

/* Remove Chat bubbles*/
@media only screen and (max-width : 520px){
    .skill-bars li .progress span {
        color: transparent;
        background: transparent;
    }
    .skill-bars li .progress span::after {
        border: none;
    }

}

/* Remove skill text */
@media only screen and (max-width : 385px){
    header{
        position: relative;
    }
    header nav ul{
        display: block;
        list-style: none;
    }
    header nav ul li{
        padding: 5px;
    }

    #home{
        padding-top: 0;
    }

    /* .skill-bars li strong {
        color: transparent;
    } */
    .skill-bars li strong {
        top: -28px;
        font-size: 13px;
    }
}