davidshare/index.css

## index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
}

a {
  color: #fff;
}

body {
  font-family: "Poppins", sans-serif;
  color: #fff;
  background: hsl(252, 30%, 10%);;
  overflow-x: hidden;
}

.main {
  height: 85vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  grid-template-columns: 30vw auto 30vw;
}

.main .profile-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .profile-image .outer-ring {
  width: 40rem;
  height: 40rem;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 1rem;
  position: relative;
}

.main .profile-image .outer-ring .inner-ring {
  width: 30rem;
  height: 30rem;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  background: url('./images/david-essien.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}

.main .profile-image .outer-ring .circle{
  width: 2rem;
  height: 2rem;
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.circle-1{
  top: -1rem;
}

.circle-2{
  bottom: 12rem;
  right: 0.2rem;
}

.circle-3{
  bottom: 12rem;
  left: 0.2rem;
}

.main .intro,
.main .skills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main .intro {
  text-align: right;
  padding-left: 5rem;
}

.main .intro h1 {
  font-size: 6rem;
}

.main h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

nav{
  display: flex;
  justify-content: center;
  font-size: 2rem;
}

nav a{
  padding: 0 1rem;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
  <title>David Essien</title>
</head>
<body>
  <main class="main">
    <div class="intro">
      <h1 class="greeting">Hello</h1>
      <h2><span>I am</span> David Essien</h2>
      <p class="short-intro">A Christian, Husband, Father, DevOps Engineer, Lover of music, and advocate for entrepreneural philantrophy.</p>
    </div>
    <div class="profile-image">
      <span class="outer-ring">
        <span class="circle circle-1"></span>
        <span class="circle circle-2"></span>
        <span class="circle circle-3"></span>
        <span class="inner-ring">
        <!-- <img src="./images/david-essien.png" alt="Profile picture"/> -->
        </span>
      </span>
    </div>
    <div class="skills">
      <h2>Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Kubernetes</li>
        <li>Terraform</li>
        <li>AWS</li>
        <li>GCP</li>
        <li>Digitalocean</li>
      </ul>
    </div>
  </main>
  <nav class="nav">
    <a href="https://github.com/davidshare"><i class="uil uil-github"></i></a>
    <a href="https://facebook.com/davidshare2"><i class="uil uil-facebook"></i></a>
    <a href="https://www.linkedin.com/in/david-essien-share/"><i class="uil uil-linkedin"></i></a>
    <a href="https://twitter.com/davidshare_"><i class="uil uil-twitter"></i></a>
  </nav>
</body>
</html>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
	*,
	*::before,
	*::after {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	border: none;
	}

	a {
	color: #fff;
	}

	body {
	font-family: "Poppins", sans-serif;
	color: #fff;
	background: hsl(252, 30%, 10%);;
	overflow-x: hidden;
	}

	.main {
	height: 85vh;
	width: 100vw;
	overflow: hidden;
	display: grid;
	grid-template-columns: 30vw auto 30vw;
	}

	.main .profile-image {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.main .profile-image .outer-ring {
	width: 40rem;
	height: 40rem;
	border: 1px solid #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto 1rem;
	position: relative;
	}

	.main .profile-image .outer-ring .inner-ring {
	width: 30rem;
	height: 30rem;
	border: 2px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	background: url('./images/david-essien.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #fff;
	}

	.main .profile-image .outer-ring .circle{
	width: 2rem;
	height: 2rem;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	}

	.circle-1{
	top: -1rem;
	}

	.circle-2{
	bottom: 12rem;
	right: 0.2rem;
	}

	.circle-3{
	bottom: 12rem;
	left: 0.2rem;
	}

	.main .intro,
	.main .skills {
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.main .intro {
	text-align: right;
	padding-left: 5rem;
	}

	.main .intro h1 {
	font-size: 6rem;
	}

	.main h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	}

	nav{
	display: flex;
	justify-content: center;
	font-size: 2rem;
	}

	nav a{
	padding: 0 1rem;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./index.css">
	<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
	<title>David Essien</title>
	</head>
	<body>
	<main class="main">
	<div class="intro">
	<h1 class="greeting">Hello</h1>
	<h2><span>I am</span> David Essien</h2>
	<p class="short-intro">A Christian, Husband, Father, DevOps Engineer, Lover of music, and advocate for entrepreneural philantrophy.</p>
	</div>
	<div class="profile-image">
	<span class="outer-ring">
	<span class="circle circle-1"></span>
	<span class="circle circle-2"></span>
	<span class="circle circle-3"></span>
	<span class="inner-ring">
	<!-- <img src="./images/david-essien.png" alt="Profile picture"/> -->
	</span>
	</span>
	</div>
	<div class="skills">
	<h2>Skills</h2>
	<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>Kubernetes</li>
	<li>Terraform</li>
	<li>AWS</li>
	<li>GCP</li>
	<li>Digitalocean</li>
	</ul>
	</div>
	</main>
	<nav class="nav">
	<a href="https://github.com/davidshare"><i class="uil uil-github"></i></a>
	<a href="https://facebook.com/davidshare2"><i class="uil uil-facebook"></i></a>
	<a href="https://www.linkedin.com/in/david-essien-share/"><i class="uil uil-linkedin"></i></a>
	<a href="https://twitter.com/davidshare_"><i class="uil uil-twitter"></i></a>
	</nav>
	</body>
	</html>