Skip to content

Fix branch #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DraftRoman wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix branch #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7af1be
Update site.html
DraftRoman Jul 31, 2025
9f5b471
Update styles.css
DraftRoman Jul 31, 2025
004fd8e
/> changes
DraftRoman Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions site.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Roman Pavlenko CV</title>
<!-- Load external CSS styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header" id ="home">
<header class="header">
<nav class="navbar">
<ul class ="nav-list" >
<li class="nav-item"><a href="#home" class="nav-link"><img src="assets/images/logo.png"target="_self" alt="logo" class="logo" /></a></li>
Expand All @@ -23,11 +24,13 @@
</nav>
</header>
</body>
<div class="container header-container">
<div class="container contact-container" id ="home">
<div class="left-sidebar">
<div class="profile-pic">
<img src="assets/images/profile.jpg" alt="Profile photo" />
<div class="profile-pic">
<img src="assets/images/image-default.jpg" alt="Profile photo Default" class="image-default" />
<img src="assets/images/image-hover.jpg" alt="Profile photo Hover" class="image-hover" />
</div>

<a href="https://www.canva.com/design/DAGXNK8RVR8/2ONYfHsFoHblRXcnl_bKCw/edit" target="_blank" class="CV-button">My CV in Canva</a>

<ul class="contact-info">
Expand Down Expand Up @@ -69,7 +72,7 @@ <h2 class="section-title">About Me</h2>
<li>I have led and contributed to projects centered on the creation and launch of new products. As the owner of a small company, I successfully managed international supplier collaborations to modernize and automate production processes, ensuring they aligned with evolving market demands.</li>
<li>My hands-on experience gives me a well-rounded perspective on business processes, project tracking, risk management, and delivering results on time and within budget. I'm known for my resourceful problem-solving, structured thinking, and clear, effective communication.</li>
<li>Consistency in delivering uninterrupted increments to clients, maintaining team well-being to enable sustainable growth, and using data to drive continuous performance improvements are my top priorities. I thrive in projects that involve continuous learning and development.</li>
<li>Currently, I'm especially focused on web developer and am highly interested in projects involving cloud-based technologies. To support my integration in Spain, I completed a course offered by AWS, I got a Certificación AWS Cloud Practitioner(CLF-C02). Through this training, I gained skills relevant to the local job market and refreshed my knowledge in software development and implementation.The program, which lasted for 6 months, 20 hours a week, included hands-on experience with Python programming, Linux operating systems, cloud architecture, process automation, security, and networking.</li>
<li>Currently, I'm especially focused on web development and am highly interested in projects involving cloud-based technologies. To support my integration in Spain, I completed a course offered by AWS, I got a Certificación AWS Cloud Practitioner(CLF-C02). Through this training, I gained skills relevant to the local job market and refreshed my knowledge in software development and implementation.The program, which lasted for 6 months, 20 hours a week, included hands-on experience with Python programming, Linux operating systems, cloud architecture, process automation, security, and networking.</li>
</ul>
</div>
</section>
Expand Down Expand Up @@ -178,7 +181,7 @@ <h3>Founder, entrepreneur</h3>
<li>Collaborated closely with the development team, providing timely support and resolving queries to ensure project progression.</li>
</ul>
<p><em>Established partnerships that increased the visibility of Ukrainian designers globally driving the increase in foreign collaborations.
In Poland more than 25% and Germany more than 10%.</em></p>
In Poland, more than 25% and in Germany, more than 10%</em></p>
</div>
<div class="experience-item">
<a href="https://zabantuy.com.ua/ua/" target="_blank"><img src="assets/images/zabantuy_logo2_1.png"target="_self" alt="Zabantuy" class="leftimg" /></a>
Expand Down
70 changes: 46 additions & 24 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 */
Expand All @@ -51,35 +77,30 @@
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%;
height: 100%; /* Photo will take the full height of its container */
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 */
}
Expand All @@ -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 */
}


Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -458,4 +480,4 @@
.rightimg {
float: right;
margin: 7px 0 7px 7px;
}
}