harivansh-afk/React-Portfolio
1
0
Fork 0
mirror of https://github.com/harivansh-afk/React-Portfolio.git synced 2026-04-18 15:03:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updates

Browse source
This commit is contained in:
Harivansh Rathi 2025-02-04 15:03:50 -05:00
parent 792b49e656
commit c73262065d
7 changed files with 119 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/pages/home/index.js
View file

@ -47,14 +47,14 @@ export const Home = () => {
<div className="intro_sec d-block d-lg-flex align-items-center ">
<div
className="h_bg-image order-1 order-lg-2 h-100 "
style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
style={{ backgroundImage: `url(/assets/images/new_headshot.png)` }}
></div>
<div className="text order-2 order-lg-1 h-100 d-lg-flex justify-content-center">
<div className="align-self-center ">
<div className="intro mx-auto">
<div
className="mobile-image d-lg-none"
style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
style={{ backgroundImage: `url(/assets/images/new_headshot.png)` }}
></div>
<h2 className="mb-1x">{introdata.title}</h2>
<h1 className="fluidz-48 mb-1x">

57
src/pages/home/style.css
View file

@ -65,8 +65,8 @@ section {
font-size: 14px;
}
.intro_sec > .h_bg-image {
display: none;
.intro_sec .h_bg-image {
display: none !important;
}
.intro_sec .mobile-image {
@ -77,11 +77,12 @@ section {
overflow: hidden;
position: relative;
background-size: cover;
background-position: center 30%;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
background-color: var(--image-container-bg);
background-color: transparent;
border: 3px solid var(--secondary-color);
filter: saturate(0.5);
display: block;
}
.intro_btn-action {
@ -177,7 +178,8 @@ section {
.intro_sec .h_bg-image {
background-size: cover;
background-position: center 30%;
background-position: center;
background-repeat: no-repeat;
min-height: 700px;
position: relative;
max-width: 600px;
@ -186,8 +188,9 @@ section {
overflow: hidden;
margin: 0 auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
background-color: var(--image-container-bg);
background-color: transparent;
border: 0.5px solid var(--secondary-color);
display: block;
}
.ac_btn {
@ -289,6 +292,42 @@ section {
}
}
.intro_sec .h_bg-image {
filter: saturate(0.5);
.intro_sec .mobile-image {
width: 250px;
height: 250px;
margin: 0 auto 20px;
border-radius: 50%;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
background-color: transparent;
border: 3px solid var(--secondary-color);
display: block;
}
/* Desktop styles */
@media (min-width: 992px) {
.intro_sec .mobile-image {
display: none !important;
}
.intro_sec .h_bg-image {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 700px;
position: relative;
max-width: 600px;
max-height: 600px;
border-radius: 20px;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
background-color: transparent;
border: 0.5px solid var(--secondary-color);
}
}