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 @@ -
+
-
+
Zabantuy 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 @@ - - + + + Roman Pavlenko CV