simple web portfolio

Web fortfolio created by phseeeker
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>portfolio </title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

@import
 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

*{
  padding:0;
  margin:0;
  font-family: 'Josefin Sans', sans-serif;
  box-sizing:border-box;
  }
body,html{
background-image:linear-gradient(#3378ff,#9442fe);
background-repeat: no-repeat;
height:120em;
margin:0;
}
img{

width:200px;
height:200px;
margin-top:5em;
margin-bottom:2em;
border-radius:100%;
border:1px solid silver;
}

/*typing effect*/
.wrapper {
  height: 10px;
   position: relative;
}

.typing-demo {
  width: 210px;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 20px;
  color: white;
}

@keyframes typing {
  from {
    width: 0;
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
/*end of typing effects*/
h1{
color:white;
transform: rotate(-10deg);
margin-left:10px;
font-size:25px;
}
h2{
color:white;
margin-left:10px;
margin-top:10em;
font-size:30px;
}


/*/* From uiverse.io by @adamgiebl */
.cssbuttons-io {
 position: relative;
 font-family: inherit;
 font-weight: 500;
 font-size: 18px;
 letter-spacing: 0.05em;
 border-radius: 0.8em;
 border: none;
 background: linear-gradient(to right, #8e2de2, #4a00e0);
 color: ghostwhite;
 overflow: hidden;
 top:10em;
 outline:none;
 margin-left:10px;
}

.cssbuttons-io svg {
 width: 1.2em;
 height: 1.2em;
 margin-right: 0.5em;
}

.cssbuttons-io span {
 position: relative;
 z-index: 10;
 transition: color 0.4s;
 display: inline-flex;
 align-items: center;
 padding: 0.8em 1.2em 0.8em 1.05em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}

.cssbuttons-io::before {
 content: "";
 background: #3386ff;
 width: 120%;
 left: -10%;
 transform: skew(30deg);
 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
 transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
 transform: scale(0.95);
}
/*card*/
#card{
background:white;
width:80%;
height:13em;
border-radius :20px;
margin-top:3em;
}

</style>
</head>
<body>
<h1>
Phseeker
</h1>
<center>
<img src="me.jpg"/>
<div class="wrapper">
      <strong><span style="color: white;"> HELLO I AM</span>
       <br>
       <div class="typing-demo">
      <strong> JOSHUA <span style="color:white;">DALIVA</span></strong>
 </div>
 </div>
 </strong>
</center> 
 <button class="cssbuttons-io">
 <span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z" fill="currentColor"></path></svg> Download cv</span>
 </button>
 <br>
 <br>
 <br><br><br>
<h2>soon projects
</h2>
 <center>
 <div id="card">
 </div>
 <div id="card">
 </div>
 <div id="card">
 </div>
 
</center>
</body>
</html>
Editor is loading...