style.css

body{
	margin: 0;
}

a{
	color: inherit;
	text-decoration: none;
	margin: 0;
	padding: 0;
}


.main{
	min-height: 100vh;
	background: linear-gradient(to left top, #fcba03, #65dfc9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.glass{
	min-height: 87vh;
	min-width: 84%;
	background: linear-gradient(
	to left bottom, 
	rgba(255, 255, 255, 0.6),
	rgba(255,255,255, 0.3)
	);
	display: flex;
	backdrop-filter: blur(1rem);
	border-radius: 2rem;
	overflow: hidden;
	z-index: 2;
}

/* dashboard section */
.dashboard{
	display: flex;
	flex: 1;
	background: linear-gradient(
	to left bottom, 
	rgba(255, 255, 255, 0.6),
	rgba(255,255,255, 0.3)
	);
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
}

.user{
	display:flex;
	flex-direction: column;
	align-items: center;
}
.user img{
	border-radius: 1.2rem;
	width: 130px;
}

.social{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.social img{
	width: 32px;
	padding: 0.5rem;
}
.social h2{
	width: 100px;
}

/* information section */
.infoboard{
	display: flex;
	flex: 2.8; 
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.info-wrapper{
	width:90%;
}
.projects{
	display: grid;
	grid-template-columns: auto auto auto ;
	border-radius: 1.2rem;
	background: linear-gradient(
	to left bottom, 
	rgba(255, 255, 255, 0.6),
	rgba(255,255,255, 0.3)
	);

}

@media only screen and (min-width:1000px){
	.projects{
		grid-template-columns: 135px 135px 135px 135px;
	}
}

@media only screen and (min-width:1200px){
	.projects{
		grid-template-columns: 135px 135px 135px 135px 13px;
	}
}

@media only screen and (min-width:1300px){
	.projects{
		grid-template-columns: 135px 135px 135px 135px 135px;
	}
}

@media only screen and (min-width:1441px){
	.projects{
		grid-template-columns: 135px 135px 135px 135px 135px 135px;
	}
}

@media only screen and (min-width:1451px){
	.projects{
		grid-template-columns: auto auto auto auto auto auto;
	}
}

.programming-language{
	display: grid;
	grid-template-columns: auto auto auto auto;
	border-radius: 1.2rem;
	background: linear-gradient(
	to left bottom, 
	rgba(255, 255, 255, 0.6),
	rgba(255,255,255, 0.3)
	);
}

.technologies{
	display: grid;
	grid-template-columns: auto auto auto auto;
	border-radius: 1.2rem;
	background: linear-gradient(
	to left bottom, 
	rgba(255, 255, 255, 0.6),
	rgba(255,255,255, 0.3)
	);
}

.app{
	width: 110px;
	height: 110px;
	border-radius: 1.2rem;
	margin: 10px;
	background: rgba(255,153,0,0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.app h3{
	text-align: center;
	margin: 0;
	padding: 0;
	width: 75%;
}

.language{
	width: auto;
	height: 60px;
	border-radius: 1.2rem;
	margin:10px;	
	background: linear-gradient(
	to left bottom,
	rgba(255,153,0,0.5),
	rgba(200, 152, 0, 0.2)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.language h3{
	font-size: 20px;
	margin: 0;
	padding: 0;
	width: 80%;
}

.framework{
	width: auto;
	height: 60px;
	border-radius: 1.2rem;
	margin:10px;	
	background: linear-gradient(
	to left bottom,
	rgba(255,153,0,0.5),
	rgba(200, 152, 0, 0.2)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.framework h3{
	font-size: 20px;
	margin: 0;
	padding: 0;
	width: 80%;
}


/* background object section*/
.object1, .object2, .object3{
	background: linear-gradient(
	to right top,
       	rgba(255,255,255, 0.4),
       	rgba(255,255,255, 0.1)
	);	
	position: absolute;
	height: 20rem;
	width: 20rem;
	border-radius: 50%;

}

.object1{
	top: 2%;
	left: 5%;
	border-radius: 1.3rem;
	transform: rotate(20deg);
	background: linear-gradient(
	to right top,
       	rgba(25,245,2, 0.4),
       	rgba(215,25,205, 0.1)
	);	
}

.object2{
	bottom: 3%;
	right: 30%;
}

.object3{
	background: linear-gradient(
	to right top,
       	rgba(25,255,255, 0.4),
       	rgba(255,25,255, 0.1)
	);	
	top: 10%;
	right: 4%;
}

/* Color for component*/
.color1{
	background: linear-gradient(
	to left bottom,
	rgba(255, 153, 0, 0.5), rgba(200, 152, 0, 0.2)
	);
}

.color2{
	background: linear-gradient(
	to left bottom,
	rgba(255, 0, 68, 0.5), rgba(247, 104, 142, 0.2)
	);
}

.color3{
	background: linear-gradient(
	to left bottom,
	rgba(25, 113, 45, 0.5), rgba(20, 12, 10, 0.2)
	);
}

.color4{
	background: linear-gradient(
	to left bottom,
	rgba(227, 224, 30, 0.5), rgba(117, 115, 0, 0.2)
	);
}

.color5{
	background: linear-gradient(
	to left bottom,
	rgba(13, 74, 181, 0.5), rgba(76, 97, 135, 0.2)
	);
}
.color6{
	background: linear-gradient(
	to left bottom,
	rgba(76, 135, 93, 0.5), rgba(64, 227, 110, 0.2)
	);
}
.color7{
	background: linear-gradient(
	to left bottom,
	rgba(227, 64, 64, 0.5), rgba(214, 17, 17, 0.2)
	);
}
.color8{
	background: linear-gradient(
	to left bottom,
	rgba(17, 217, 198, 0.5), rgba(40, 71, 69, 0.2)
	);
}
.color9{
	background: linear-gradient(
	to left bottom,
	rgba(2, 1, 0, 0.5), rgba(20, 235, 90, 0.2)
	);
}