erik/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add header and picture

Browse Source
This commit is contained in:
Erik Fehér
2025-10-22 21:14:17 +02:00
parent 794a18484b
commit fae8a80a2e
5 changed files with 105 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -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>

7
public/close.svg Normal file
View File

@@ -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"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

7
public/next.svg Normal file
View File

@@ -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"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 KiB

86
styles.css
View File

@@ -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);
margin: 10px;
padding: 0;
transition: opacity 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
height: calc(100% - 16px);
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;
}