Skip to content

Update resume link and modernize About/Skills/Projects/Contact styles #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
Sumit063 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update resume link and modernize About/Skills/Projects/Contact styles #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ const About = () => {
<motion.div className='resume-download' ref = {ref} style={{transform: isInView ? "none" : "translateX(20px)",
opacity: isInView ? 1 : 0,
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 1.5s"}}>
<a href='https://drive.google.com/file/d/1RPALCzJSeWLuSZPpwTMJAfQXKgunzf3n/view?usp=sharing' target='_blank'><DownloadBtn btntext='My Resume'/></a>
<a href='https://drive.google.com/file/d/1YcsJOX81On0bdDs0hBMFG2ZVza980Mba/view?usp=drive_link' target='_blank'><DownloadBtn btntext='My Resume'/></a>
</motion.div>
</div>
)
}

export default About
export default About
34 changes: 22 additions & 12 deletions src/styles/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
.about-container {
padding: 60px 0;
background-color: #0D012C;
padding: 80px 0;
background: radial-gradient(circle at top, rgba(89, 195, 120, 0.08), transparent 45%),
linear-gradient(160deg, #0b0826 0%, #0d0b2b 60%, #0f0d32 100%);
display: flex;
justify-content: space-evenly;
align-items: center;
row-gap: 30px;
column-gap: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}


Expand All @@ -13,19 +16,20 @@
font-size: 15px;
background-blend-mode: multiply;
/* background: #14143A bottom right url('../components/man.png') no-repeat; */
background: #14143A;
background: linear-gradient(145deg, rgba(20, 20, 58, 0.95), rgba(14, 12, 40, 0.95));
background-size: 40%;
/* background-attachment: fixed; */
mix-blend-mode: lighten;
z-index: 2;
padding: 20px;
width: 30%;
padding: 28px;
width: 32%;
/* display: flex; */
text-align: center;
justify-content: center;
box-sizing: border-box;
box-shadow: 1px 1px 1px 1px 4px black;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(3, 6, 23, 0.45);
border-radius: 16px;
border: 1px solid rgba(89, 195, 120, 0.18);
min-width: 300px;
}

Expand All @@ -36,18 +40,24 @@
gap: 20px;
color: white;
font-family: 'Poppins', sans-serif;
line-height: 1.6;
}

h3{
color: #59C378;
.about-container h3{
color: #7dffb1;
letter-spacing: 0.2em;
font-size: 12px;
text-transform: uppercase;
}

h4 {
font-size: 30px;
.about-container h4 {
font-size: 32px;
font-weight: 600;
color: #f1f5ff;
}

@media only screen and (max-width: 900px) {
.about-container {
flex-direction: column;
}
}
}
44 changes: 37 additions & 7 deletions src/styles/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
.contact-section {
padding: 40px;
background-color: #0D012C;
padding: 60px 40px 80px;
background: linear-gradient(180deg, #0d0b2b 0%, #0f0d32 100%);
}

.contact-wrapper {
background-color: #0C0122;
border-radius: 20px;
padding: 40px 35px;
background: linear-gradient(145deg, rgba(15, 14, 40, 0.98), rgba(10, 9, 28, 0.98));
border-radius: 24px;
padding: 48px 40px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
color: white;
gap: 40px;
border: 1px solid rgba(89, 195, 120, 0.18);
box-shadow: 0 20px 50px rgba(4, 6, 24, 0.55);
}

#contact-txt2 {
color: #CCCCCC;
color: #c9d2ea;
}

.contact-wrapper h4 {
Expand All @@ -25,15 +28,22 @@
.contact-me h3 {
padding-bottom: 23px;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #7dffb1;
}
.newsletter h3 {
padding-bottom: 23px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #7dffb1;
}

.newsletter-inputs {
margin: 25px 0 10px 0;
display: flex;
justify-content: space-between;
gap: 24px;
}

.subscribe-btn {
Expand All @@ -49,6 +59,26 @@
opacity: 1;
}

.newsletter .MuiInputBase-root {
color: #f2f4ff;
}

.newsletter .MuiInputLabel-root {
color: #9aa7c2;
}

.newsletter .MuiInput-underline:before {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.newsletter .MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 1px solid rgba(125, 255, 177, 0.6);
}

.newsletter .MuiInput-underline:after {
border-bottom: 2px solid #7dffb1;
}

@media only screen and (max-width: 1100px) {
.contact-wrapper {
flex-direction: column;
Expand All @@ -62,4 +92,4 @@
flex-direction: column;
gap: 20px;
}
}
}
59 changes: 34 additions & 25 deletions src/styles/project.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.project-section, .project-cards-container {
font-family: 'Poppins', sans-serif;
background-color: #0D012C;
padding: 60px 0px;
background: linear-gradient(180deg, #0c0a2a 0%, #0d0b2b 55%, #0f0d32 100%);
padding: 80px 0px;
text-align: center;

}
Expand All @@ -14,47 +14,57 @@
.project-card-container {
width: 400px;
height: 400px;
border-radius: 12px;
background-color: #14143A;
padding: 20px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(20, 20, 58, 0.95), rgba(12, 12, 36, 0.95));
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
color: white;
box-sizing: border-box;
cursor: pointer;
border: 1.5px solid #202044;
transition: ease-in;
transition-duration: 250ms;
border: 1px solid rgba(89, 195, 120, 0.18);
box-shadow: 0 18px 45px rgba(4, 6, 24, 0.45);
transition: transform 200ms ease, box-shadow 200ms ease, border 200ms ease;
}

.project-card-container:hover {
border-bottom: 1px solid #59C378;
transform: translateY(-6px);
box-shadow: 0 22px 50px rgba(4, 6, 24, 0.6);
border: 1px solid rgba(125, 255, 177, 0.45);
}

.project-section h4{
padding: 10px;
color: white;
color: #e9edff;
font-weight: 600;
}

.project-section h3 {
color: #7dffb1;
letter-spacing: 0.2em;
font-size: 12px;
text-transform: uppercase;
Comment on lines +44 to +48
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 10, 2026

Choose a reason for hiding this comment

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

P2 Badge Scope the h3 styling to avoid shrinking project titles

The new .project-section h3 rule applies to every <h3> inside the section, including the project names rendered in ProjectCard.jsx (<h3>{project.name}</h3>). That means project titles are now forced to 12px, uppercase, and wide letter-spacing, which makes them much smaller and harder to read than before; it also changes their semantic emphasis compared to the header copy. If the intent was to style only the section header, this selector should be narrowed (e.g., target a header wrapper) so card titles keep their previous size.

Useful? React with 👍 / 👎.

}

.project-img {
/* border-radius: 80%; */
}
.project-img img{
width: 100%;
transition: ease-in;
transition-duration: 150ms;
border-radius: 10px;
transition: transform 150ms ease;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
}

.project-img img:hover {
scale: 1.05;
}

.project-tech {
background: linear-gradient(to right,rgb(40, 56, 203), rgb(212, 4, 4));
background: linear-gradient(to right, #7dffb1, #45caff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 12px;
Expand All @@ -69,25 +79,24 @@
.project-about {
font-size: 13px;
text-align: left;
line-height: 21px;
line-height: 22px;
font-weight: 300;
padding: 25px;
color: #cccccc;
padding: 22px 18px;
color: #d4d9ea;
}

.project-live {
display: flex;
text-align: left;
justify-content: space-around;
gap: 70px;
justify-content: space-between;
gap: 30px;
}
.project-live a{
text-decoration: none;
color: #7E8B9E;
color: #9aa7c2;
font-size: 12px;
align-items: center;
transition: ease-in;
transition-duration: 200ms;
transition: color 200ms ease;
}

.project-site, .project-source {
Expand All @@ -100,10 +109,10 @@

.project-site:hover, .project-source:hover {
scale: 1.02;
color: #59C378;
color: #7dffb1;
}
.project-site:hover a, .project-source:hover a {
color: rgb(178, 178, 178);
color: #e6ecff;
}

@media only screen and (max-width: 1400px) and (min-width: 1200px) {
Expand Down Expand Up @@ -147,4 +156,4 @@
width: 100%;
scale: 0.7;
}
}
}
37 changes: 24 additions & 13 deletions src/styles/skills.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
.skills-section, .cards-container {
font-family: 'Poppins', sans-serif;
background-color: #0D012C;
background: linear-gradient(180deg, #0b0826 0%, #0c0a2a 60%, #0d0b2b 100%);
text-align: center;
padding: 40px 0;
padding: 60px 0;
}

.cards-container {
width: 90%;
width: 88%;
margin: 0 auto;
}

.card-container {
width: 130px;
height: 130px;
border-radius: 50%;
background-color: #14143A ;
width: 150px;
height: 150px;
border-radius: 18px;
background: linear-gradient(150deg, rgba(20, 20, 58, 0.95), rgba(10, 12, 32, 0.95));
font-size: 1em;
padding: 20px;
padding: 18px;
display: flex;
margin: 10px;
flex-direction: column;
Expand All @@ -25,20 +25,31 @@
gap: 10px;
color: white;
box-sizing: border-box;
-webkit-filter: drop-shadow(0 .4rem .4em rgba(0,0,0,.5));
box-shadow: 0 18px 40px rgba(5, 8, 28, 0.45);
transform: translate3d(0, 0, 0);
cursor: pointer;
border: 1px solid #202044;
border: 1px solid rgba(89, 195, 120, 0.18);
transition: transform 200ms ease, box-shadow 200ms ease, border 200ms ease;
}

.card-container:hover {
border-bottom: 1.5px solid #202044;
transform: translateY(-6px);
box-shadow: 0 22px 50px rgba(5, 8, 28, 0.55);
border: 1px solid rgba(125, 255, 177, 0.45);
}


.skills-section h4{
padding: 10px;
color: white;
color: #e9edff;
font-weight: 600;
}

.skills-section h3 {
color: #7dffb1;
letter-spacing: 0.2em;
font-size: 12px;
text-transform: uppercase;
}

@media only screen and (max-width: 580px) and (min-width: 460px) {
Expand All @@ -53,4 +64,4 @@
width: 68%;
scale: 0.9;
}
}
}