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

Enhance portfolio styling and update project image. Added CSS variables for theming, improved hover effects, and adjusted colors for better contrast. Updated project5.jpg for visual consistency.

Browse source
This commit is contained in:
Harivansh Rathi 2025-01-06 00:05:35 +05:30
parent ca323a77d1
commit 532fc8b975
2 changed files with 30 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/project5.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 530 KiB

After

Width:  |  Height:  |  Size: 896 KiB

Before After
Before After

50
src/pages/portfolio/style.css
View file

@ -1,3 +1,11 @@
:root {
--primary-rgb: 8, 8, 8;
}
[data-theme="light"] {
--primary-rgb: 227, 218, 201;
}
.project_items_ho { .project_items_ho {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
@ -9,12 +17,13 @@
.project_item { .project_item {
position: relative; position: relative;
background: var(--card-bg, var(--background)); background: var(--bg-color);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
aspect-ratio: 16/10; aspect-ratio: 16/10;
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
border: 1px solid var(--card-border);
} }
.project_item:hover { .project_item:hover {
@ -43,15 +52,15 @@
align-items: flex-start; align-items: flex-start;
background: linear-gradient( background: linear-gradient(
to top, to top,
rgba(0, 0, 0, 0.8) 0%, rgba(var(--primary-rgb), 0.95) 0%,
rgba(0, 0, 0, 0.4) 50%, rgba(var(--primary-rgb), 0.7) 50%,
rgba(8, 8, 8, 0.2) 100% rgba(var(--primary-rgb), 0.3) 100%
); );
opacity: 0; opacity: 0;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--card-border);
} }
.project_item:hover .content { .project_item:hover .content {
@ -59,28 +68,28 @@
} }
.project_item .content h3 { .project_item .content h3 {
color: #fff; color: var(--text-color);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
text-align: left; text-align: left;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.project_item .content p { .project_item .content p {
color: rgba(255, 255, 255, 0.95); color: var(--text-color);
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.5; line-height: 1.5;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-align: left; text-align: left;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
.project_item .content a { .project_item .content a {
color: #fff; color: var(--text-color);
text-decoration: none; text-decoration: none;
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
background: rgba(255, 161, 22, 0.9); background: var(--primary-color);
border-radius: 8px; border-radius: 8px;
font-weight: 500; font-weight: 500;
display: inline-flex; display: inline-flex;
@ -90,11 +99,12 @@
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--card-border);
} }
.project_item .content a:hover { .project_item .content a:hover {
background: rgba(255, 161, 22, 1); background: var(--secondary-color);
color: var(--primary-color);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
} }
@ -116,29 +126,29 @@
padding: 1.25rem; padding: 1.25rem;
background: linear-gradient( background: linear-gradient(
to top, to top,
rgba(0, 0, 0, 0.75) 0%, rgba(var(--primary-rgb), 0.95) 0%,
rgba(0, 0, 0, 0.4) 50%, rgba(var(--primary-rgb), 0.7) 50%,
rgba(8, 8, 8, 0.2) 100% rgba(var(--primary-rgb), 0.3) 100%
); );
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.75rem;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--card-border);
} }
.project_item .content a { .project_item .content a {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
font-size: 0.9rem; font-size: 0.9rem;
border-radius: 6px; border-radius: 6px;
background: rgba(255, 161, 22, 0.9); background: var(--primary-color);
width: 100%; width: 100%;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--card-border);
} }
.project_item:active { .project_item:active {
@ -147,6 +157,6 @@
} }
.project_item img { .project_item img {
filter: brightness(0.9); filter: brightness(0.95);
} }
} }