Add header and picture

index.html

@@ -18,8 +18,15 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!</p>
+                    <div class="header">
-
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
+                    <div class="card-content">
+                        <div id="card-content-container">
+                            <img id="card-content-image" src="./public/profile.jpg"/>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

public/close.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

public/next.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 471.2 471.2" xml:space="preserve" stroke="#ffffff">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

styles.css

@@ -5,10 +5,18 @@
     --background-color: #1b1b1b;
     --text-color: #fff;
     --label-height: 60px;
+    --header-height: 50px;
+    --base-border-radius: 7px;
+    --base-box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
+    --base-blur: blur(3px);
+    --base-content-background-color: #ffffff20;
+    --content-wrap-padding: 16px;
+    --header-margin-bottom: 20px;
 
     font-family: "BBH Sans Bogle", sans-serif;
     font-weight: 400;
     font-style: normal;
+    color: #fff;
 }
 
 html, body {
@@ -32,6 +40,10 @@ html, body {
     filter: grayscale(100%) brightness(80%);
     transform: translateY(0);
     transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    
 }
 
 .card {
@@ -41,6 +53,7 @@ html, body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
 }
 
 .card-wrapper {
@@ -50,6 +63,7 @@ html, body {
     justify-content: center;
     align-items: center;
     width: 100%;
+    height: 100%;
     cursor: pointer;
     transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
@@ -100,21 +114,83 @@ html, body {
     display: block;
     position: relative;
     max-width: 100%;
+    width: 100%;
     height: calc(100dvh - (2 * var(--card-gap)));
     top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height));
+    overflow: auto;
 }
 
 .content-wrapper {
-    display: block;
+    display: flex;
     opacity: 0;
-    transition: opacity 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: opacity 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-    margin: 10px;
+    height: calc(100% - 16px);
-    padding: 0;
+    margin: var(--content-wrap-padding) var(--content-wrap-padding) 0px var(--content-wrap-padding);
 }
 
 .visible {
     display: block !important;
     opacity: 1 !important;
     transition-delay: 0.5s !important;
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 48px;
+    margin-bottom: var(--header-margin-bottom);
+    height: var(--header-height);
+}
+
+.brand {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    padding: 10px;
+    background-color: var(--base-content-background-color);
+    box-shadow: var(--base-box-shadow);
+    color: #ffffff;
+    backdrop-filter: var(--base-blur);
+    border-radius: var(--base-border-radius);
+    
+}
+
+.close {
+    cursor: pointer;
+    width: 48px;
+    background-color: var(--base-content-background-color);
+    backdrop-filter: var(--base-blur);
+    box-shadow: var(--base-box-shadow);
+    border-radius: var(--base-border-radius);
+    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.close:hover {
+    transform: scale(1.1);
+}
+
+.card-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: calc(100% - var(--header-height) - var(--header-margin-bottom) - var(--content-wrap-padding));
+}
+
+#card-content-container {
+    display: flex;
+}
+
+#card-content-image {
+    border-radius: var(--base-border-radius);
+    background-color: var(--base-content-background-color);
+    backdrop-filter: var(--base-blur);
+    box-shadow: var(--base-box-shadow);
+    padding: 10px;
+    width: 300px;
+    height: 300px;
+    
 }