From c7af1be97b9d37a39752ab1711f0a93a436ab609 Mon Sep 17 00:00:00 2001 From: Roman <151454298+DraftRoman@users.noreply.github.com> Date: Thu, 31 Jul 2025 16:03:21 +0200 Subject: [PATCH 1/3] Update site.html --- site.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/site.html b/site.html index 6e35fce..565621b 100644 --- a/site.html +++ b/site.html @@ -8,7 +8,7 @@
-
From 9f5b471500822c1e67136273c15dee62ee43e839 Mon Sep 17 00:00:00 2001
From: Roman <151454298+DraftRoman@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:03:44 +0200
Subject: [PATCH 2/3] Update styles.css
---
styles.css | 70 +++++++++++++++++++++++++++++++++++-------------------
1 file changed, 46 insertions(+), 24 deletions(-)
diff --git a/styles.css b/styles.css
index a82a2a5..771f90a 100644
--- a/styles.css
+++ b/styles.css
@@ -3,9 +3,10 @@
position: fixed;
top: 0;
width: 100%; /* Full width to cover the top of the page */
+ z-index: 100;
}
-.header-container {
+.contact-container{
display: flex; /* Makes the container a flex container for columns */
gap: 40px; /* Spacing between the left (photo+contacts) and right (About Me) columns */
align-items: flex-start; /* Aligns items to the top */
@@ -30,17 +31,42 @@
/* Ensure there is no padding-top here that might shift content */
padding: 0; /* Reset potential extra padding */
}
-
/* Styles for the profile photo (rectangular, NOT circular) */
.profile-pic {
- width: 100%; /* Photo will take the full width of the left-sidebar */
- height: auto; /* Height will automatically adjust to the photo's aspect ratio */
- max-height: 450px; /* Maximum height for the photo to prevent it from being too large */
- border-radius: 8px; /* Slightly rounded corners, as in the mockup */
- overflow: hidden; /* Clips content if the image extends beyond the bounds */
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
- border: none; /* Remove border if not needed */
+ position: relative; /* Necessary for positioning the images inside */
+ width: 100%;
+ height: auto; /* Height will be determined by the aspect ratio */
+ max-width: 450px; /* A max-width is good for responsiveness */
+ aspect-ratio: 6 / 9; /* Maintains a 6:9 aspect ratio */
+ border-radius: 8px;
+ overflow: hidden; /* Ensures images stay within the rounded corners */
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+
+}
+.profile-pic img {
+ position: absolute; /* Allows for absolute positioning within the container */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover; /* Prevents image distortion */
+ transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
}
+
+/* By default, the hover image is hidden */
+.profile-pic .image-hover {
+ opacity: 0;
+}
+
+/* When you hover over the .profile-pic container... */
+.profile-pic:hover .image-hover {
+ opacity: 1; /* ...make the hover image visible */
+ }
+.profile-pic:hover .image-default {
+ opacity: 0; /* ...and hide the default image */
+}
+
+
/* Styles for the CV button */
.CV-button {
padding: 10px 50px; /* Padding for the button */
@@ -51,15 +77,16 @@
text-decoration: none; /* No underline */
}
.logo {
- height: 35px; /* Adjust the height of your logo to fit the navbar */
+ height: 30px; /* Adjust the height of your logo to fit the navbar */
width: auto; /* Maintain aspect ratio */
+
}
.logo_footer {
- width: 30px; /* Logo size for footer */
- height: 30px; /* Logo size for footer */
- vertical-align: middle; /* Aligns the logo vertically with text */
- margin-right: 10px; /* Spacing to the right of the logo */
+ width: 30px; /* Logo size for footer */
+ height: 30px; /* Logo size for footer */
+ vertical-align: middle; /* Aligns the logo vertically with text */
+ margin-right: 10px; /* Spacing to the right of the logo */
}
.profile-pic img {
width: 100%;
@@ -67,19 +94,13 @@
object-fit: cover; /* Crops the image to fill the container while maintaining aspect ratio */
display: block; /* Removes extra space below the image */
}
-.nav-list {
- list-style: none; /* Removes default list styling */
- padding: 0; /* Resets padding */
- margin: 0; /* Resets margin */
- display: flex; /* Makes the list a flex container */
- gap: 20px; /* Spacing between navigation items */
-}
-
.nav-list {
list-style-type: none; /* Removes the bullet points */
margin: 0;
padding: 0;
overflow: hidden; /* Ensures the background contains the floating items */
+ display: flex; /* Makes the list a flex container */
+ gap: 6 0px; /* Spacing between navigation items */
background-color: #f8f9fa; /* Dark background for the navbar */
font-family: Arial, Helvetica, sans-serif; /* Sets a clean font */
}
@@ -106,7 +127,7 @@
/* Remove padding from the logo's link to prevent extra space */
.nav-item:first-child .nav-link {
- padding: 9px 20px; /* Adjust padding to vertically center the logo */
+ padding: 7px 50px; /* Adjust padding to vertically center the logo */
}
@@ -185,6 +206,7 @@
/* Important: if there is padding here, it might affect the total width,
make sure box-sizing: border-box; is applied */
box-sizing: border-box;
+ z-index: 1; /* Ensures it appears above other content */
}
.header-content .name {
@@ -458,4 +480,4 @@
.rightimg {
float: right;
margin: 7px 0 7px 7px;
-}
\ No newline at end of file
+}
From 004fd8e6916fabe3720ad42cb3d3a507159b79d4 Mon Sep 17 00:00:00 2001
From: Roman <151454298+DraftRoman@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:28:56 +0200
Subject: [PATCH 3/3] /> changes
---
site.html | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/site.html b/site.html
index 565621b..3dfe81d 100644
--- a/site.html
+++ b/site.html
@@ -1,8 +1,9 @@
-
-
+
+
+