Skip to content
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

Add Hero Section with Resume Building Options to "Build Resume" Page #913

Merged
merged 3 commits into from
Oct 29, 2024
Merged

Add Hero Section with Resume Building Options to "Build Resume" Page #913

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8142edc
added hero section
Mohitranag18 Oct 28, 2024
1b7918a
Merge branch 'main' into charlim
Mohitranag18 Oct 28, 2024
692babf
Merge branch 'main' into charlim
GarimaSingh0109 Oct 29, 2024
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
115 changes: 111 additions & 4 deletions Resume.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,117 @@ body {
margin: 0;
padding: 20px;
}

/* hero section */
.herosection{
height: 100vh;
width: 100%;
background-image: url(images/hero.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 5rem;
position: relative;
}
Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
.herocontent{
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
gap: 2rem;
}
.herocontent h1{
width: 60%;
font-size: 5rem;
font-weight: 800;
color: white;
}
.herocontent p{
width: 60%;
font-size: 2rem;
font-weight: 400;
color: white;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Use relative units for better responsiveness.

The font sizes are using fixed rem units which might not scale well across different screen sizes.

Apply these changes:

 .herocontent h1 {
     width: 60%;
-    font-size: 5rem;
+    font-size: clamp(2.5rem, 5vw, 5rem);
     font-weight: 800;
     color: white;
 }
 
 .herocontent p {
     width: 60%;
-    font-size: 2rem;
+    font-size: clamp(1rem, 2vw, 2rem);
     font-weight: 400;
     color: white;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.herocontent h1{
width: 60%;
font-size: 5rem;
font-weight: 800;
color: white;
}
.herocontent p{
width: 60%;
font-size: 2rem;
font-weight: 400;
color: white;
}
.herocontent h1{
width: 60%;
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: 800;
color: white;
}
.herocontent p{
width: 60%;
font-size: clamp(1rem, 2vw, 2rem);
font-weight: 400;
color: white;
}

.herostep{
height: 10%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.heros{
background-color: #5cb85c;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2rem;
padding: 1.5rem 1.5rem;
}
.herostep h2{
font-size: 2rem;
font-weight: 500;
color: white;
line-height: 2rem;
margin: 0;
line-height: 2.5rem;
}
Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
.herostep i{
font-size: 3rem;
margin-right: 1rem;
color: white;
}
.herobtn{
display: flex;
height: 40%;
justify-content: center;
align-items: center;
gap: 2.5rem;
text-align: center;
}
.herobtn .button{
background-color: blue;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3rem;
padding: 1.5rem;
color: white;
border: 2px solid white;
cursor: pointer;
}
.herobtn .button:hover{
scale: 105%;
}
.herobtn #manulbtn{
background-color: rgb(74, 74, 74);
}
Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
.panel1{
position: relative;
}
.panel2{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 3rem;
}
.panel2 h1{
font-size: 4rem;
}
.panel2 p{
font-size: 2rem;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Improve panel responsiveness for mobile devices.

The panel2 section uses a fixed viewport height which might cause issues on mobile devices. Additionally, there are no media queries for responsive design.

Add these responsive styles:

 .panel2 {
-    height: 100vh;
+    min-height: 100vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 3rem;
+    padding: 2rem 1rem;
 }

+@media (max-width: 768px) {
+    .panel2 h1 {
+        font-size: clamp(2rem, 4vw, 4rem);
+        text-align: center;
+    }
+    .panel2 p {
+        font-size: clamp(1rem, 2vw, 2rem);
+        text-align: center;
+    }
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.panel2{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 3rem;
}
.panel2 h1{
font-size: 4rem;
}
.panel2 p{
font-size: 2rem;
}
.panel2{
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 3rem;
padding: 2rem 1rem;
}
.panel2 h1{
font-size: 4rem;
}
.panel2 p{
font-size: 2rem;
}
@media (max-width: 768px) {
.panel2 h1 {
font-size: clamp(2rem, 4vw, 4rem);
text-align: center;
}
.panel2 p {
font-size: clamp(1rem, 2vw, 2rem);
text-align: center;
}
}

/* progress bar section css */
.progressSec{
height: 15rem;
width: 100%;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 5rem;
background-color: rgba(137, 137, 137, 0.25);
Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
}
.progress-bar {
width: 70%;
Expand Down Expand Up @@ -101,7 +204,7 @@ body {
.education-entry{
width: 40%;
}
#skills-input{
#skillsinput{
width: 40%;
}
.experience-entry{
Expand All @@ -122,9 +225,14 @@ body {
}
.achive{
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.achive-entry{
display: flex;
justify-content: space-between;
}
Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
.achiveLeft{
width: 40%;
}
Expand Down Expand Up @@ -360,5 +468,4 @@ button {
#download-resume {
background-color: #5cb85c; /* Bootstrap success color */
color: white;
}

}
Loading