destan.dev

by Destan Sarpkaya

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Destan Sarpkaya</title>
    <meta name="yandex-verification" content="73a9575930d44dd4" />
    <meta name="description" content="Destan Sarpkaya's personal web page">
    <meta name="author" content="Destan Sarpkaya">

    <meta property="og:title" content="Destan Sarpkaya">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://destan.dev">
    <meta property="og:description" content="Destan Sarpkaya's personal web page">
    <meta property="og:image" content="DestanSarpkaya.jpg">

    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles.css?v=1.0">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0KJ5Z3CV3H"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'G-0KJ5Z3CV3H');

    </script>
  </head>

  <body>
    <section id="about">
      <div id="nameContainer">
        <h1>
          Destan Sarpkaya
        </h1>
        <h2>
          A passionate software developer
        </h2>
      </div>
    </section>
    <section id="details">
      <div class="tabs">
        <div class="tab">
          <input type="checkbox" id="pro">
          <label class="tab-label" for="pro">
            <span>
              Currently (2022) developing <a href="https://grispi.com"...

CSS

input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.row {
	display: flex;
}

.row .col {
	flex: 1;
}

.row .col:last-child {
	margin-left: 1em;
}

.tabs {
	overflow: hidden;
}

.tab {
	width: 100%;
	color: white;
	overflow: hidden;
}

.tab-label {
	display: flex;
	justify-content: left;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	cursor: pointer;
  font-size: 1.3rem;
}

.tab-label:hover {
	background: #4c5e77;
}

.tab-label::before {
	content: "⌄";
	width: 2em;
	height: 1em;
	text-align: center;
	transition: all 0.35s;
}

.tab-content {
	max-height: 0;
	padding: 0 1em;
	color: white;
	transition: all 0.35s;
}

.tab-close {
	display: flex;
	justify-content: flex-end;
	padding: 1em;
	font-size: 0.75em;
	background: blue;
	cursor: pointer;
}

.tab-close:hover {
	background: yellow;
}

input:checked + .tab-label {
	background: #4c5e77;
}

input:checked + .tab-label::before {
	transform: rotate(-90deg);
}

input:checked ~ .tab-content {
	max-height: 100vh;
	padding: 1em;
}

/* ====================================================== */

body {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

a:hover {
  filter: brightness(80%);
}

a,
a:active,
a:visited {
  text-decoration: none;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 3em;
}

#about {
  background-image: url(https://destan.dev/images/DestanSarpkaya.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(100px);
  height: 100vh;
}

#nameContainer {
  color: white;
}

#details {
  background: #556985;
  color: white;
  padding: 50px 0;
  text-align: center;
}

#details>div {
  max-width: 950px;
  margin: auto;
  text-align: left;
}

#details a,
#details a:active,
#details a:hover,
#details a:visited {
  color: blanchedalmond;
}

#details li {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

#lifeTimeline {
  background: #D8F0FE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px...