Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
  • Loading branch information
@DoublEffe
DoublEffe committed Mar 20, 2024
1 parent c6f3f2d commit 8792702
Show file tree
Hide file tree
Showing 11 changed files with 428 additions and 353 deletions.
24 changes: 22 additions & 2 deletions about-me.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,32 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/CSS/desktop.css">
<link rel="stylesheet" href="assets/CSS/mobile.css" media="screen and (max-width:425px)">
<link rel="stylesheet" href="assets/CSS/desktop.css" media="screen and (min-width:1024px)">
<link rel="stylesheet" href="assets/CSS/common.css">
<link rel="stylesheet" href="assets/CSS/adjunct.css">
<link rel="stylesheet" href="assets/CSS/mobile.css" media="screen and (max-width:1023px)">
<link rel="stylesheet" href="assets/CSS/fonts.css">
<link rel="icon" href="assets/images/icon.ico">
<title>Document</title>
</head>
<body>
<nav class="nav">
<div class="nav-item">
<a href="#projects" class="noselect">
My project
</a>
</div>
<div class="nav-item">
<a href="about-me.html" class="noselect">
About Me
</a>
</div>
<div class="logo">
<a href="index.html">
<img src="assets/images/icon.svg">
</a>
</div>
</nav>
<section class="lower" id="about-me">
<h1>About Me.</h1>
<div class="desc">
Expand Down
2 changes: 1 addition & 1 deletion assets/CSS/adjunct.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

355 changes: 355 additions & 0 deletions assets/CSS/common.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

h1 {
font-size: 4em;
color: white;
}

h3 {
font-size: 1.5em;
color: white;
}

.upper {
height: 100vh;
width: 100%;
display: flex;
justify-content: space-between;
background-color: #223;
z-index: -1;
}

.circle {
width: 100%;
height: 100vh;
position: absolute;
background: repeating-radial-gradient(circle at bottom, #e4cb58 0.5px, #223 5px, #223 117px);
z-index: 0;
}

.nav {
display: flex;
height: 10vh;
width: 100%;
position: sticky;
box-shadow: 0px 0px 15px black;
z-index: 10;
background-color: #223;
top: 0px;
}

.nav-item {
margin: 5px;
width: 10vw;
height: 5vh;
border: 1px solid white;
font-family: 'Cinzel', serif;
font-size: 1em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
transition: 1s;
background-color: #223;
}

.logo {
height: 100%;
width: 8%;
position: relative;
left: 35vw;
display: flex;
}
.logo a img {
height: 80%;
width: 80%;
}



.title {
display: flex;
flex-direction: column;
position: relative;
height: 20vh;
top: 20vh;
left: 10vw;
z-index: 1;
background-color: #223;
}



.title h3 {
font-size: 1.5em;
}

.social {
display: flex;
flex-direction: row;
}

.social a {
position: relative;
margin: 0 1vw 0 1vw;
background-color:none;
border: 2px solid #e4cb58;
transition: 0.25s;
width: 4vw;
height: 4vh;
}

.social a:first-child {
margin-left: 0;
}

.social a svg {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}

.social a svg path {
fill: #e4cb58 ;
}

.up {
width: 100px;
height: 50px;
color: #e4cb58;
transition: 0.25s;
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
}
/*
@media only screen and (min-width: 426px) {
.up:hover {
border: 0px;
box-shadow: inset 0 -3.25em 0 0 #e4cb58;
filter: hue-rotate(45deg);
color: #fff;
z-index: 10;
}
}
*/
.self {
display: flex;
width: 25vw;
height: 100%;
background-color: rgba(90, 74, 199, 1);
position: relative;
z-index: 2;

}

.self::before {
content: "";
width:0;
border-bottom: 100vh solid rgba(90, 74, 199, 1);
border-left: 30vw solid transparent;
height:0px;
position: absolute;
top: 0;
left: -30vw;
}

.rounded-circle {
width: 30vw;
height: 50vh;
border-radius: 5%;
z-index: 1;
position: absolute;
top: 30vh;
right: 10vw;
}

.separator {
height: 2vh;
background-color: rgba(90, 77, 180, 1);
z-index: 1;
position: relative;
}

.projects-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: #223;
align-items: center;
}

.wrapper {
width: 38%;
height: 30vh;
display: flex;
justify-content: center;
align-items: center;

}

.container {
height: 25vh;
display: flex;
flex-wrap: nowrap;
justify-content: start;
}

input {
display: none;
}

input:checked + label {
width: 300px;
}

input:checked + label .description {
opacity: 1 !important;
transform: rotateY(0) !important;
display: flex;
}

.card {
width: 80px;
border-radius: .75rem;
background-size: 2rem;
margin: 0 10px;
display: flex;
align-items: flex-end;
transition: .6s cubic-bezier(.28, -0.03, 0, .99);
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
}

.row {
color: white;
display: flex;
flex-wrap: nowrap;
}

.icon {
background-color: rgba(119, 109, 185, .8);
color: white;
border-radius: 50%;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px;
}

.icon svg {
width: 70%;
height: 70%;
}

.description {
display: none;
justify-content: center;
flex-direction: column;
overflow: hidden;
width: 70%;
height: 80px;
opacity: 0;
transform: translateY(20px);
transition-delay: .3s;
transition: all .3s ease;
}

.description a {
text-decoration: none;
color: white;
}

.description h4 {
text-transform: uppercase;
}

.description p {
color: #131350;
padding-top: 5px;
}

.card[for="c1"], .card[for="c2"] {
background-image: url("../images/phone.jpg");
background-repeat: no-repeat;
background-size: 300px 25vh;
}

.card[for="c4"], .card[for="c5"] {
background-image: url("../images/web.jpg");
background-repeat: no-repeat;
background-size: 300px 25vh;
}

.lower {
background-color: #223;
height: 100vh;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow-x: scroll;
}

.lower h1 {
text-align: center;
}

.desc {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 20px 0 20px 0;
}

.self-desc {
max-width: 60vw;
color: white;
}

.skill-icons {
display: flex;
justify-content: space-evenly;
}



.skill-exp{
display: none;
width: 10vw;
height: 25vh;
border: 2px solid white;
border-radius: .5rem;
box-shadow: 5px 5px white;
justify-content: center;
align-items: center;
position: relative;
top: 5vh;
}

.skill-exp p {
color: white;
text-align: center;
}



.skill-icon svg:hover + div{
display: flex;
}

Loading

0 comments on commit 8792702

Please sign in to comment.