Skip to content

T
tran-quang-hung-portfolio
Commit dcbf04ea authored by HungTQ's avatar HungTQ
Browse files
Options

feat(ui): polish project preview showcases

parent 79c9c3a3
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 38 deletions
src/App.css
View file @ dcbf04ea
......@@ -510,46 +510,48 @@ h3 {
.project-preview {
align-items: center;
background:
radial-gradient(circle at 22% 18%, rgba(18, 184, 134, 0.22), transparent 30%),
radial-gradient(circle at 82% 20%, rgba(246, 95, 66, 0.18), transparent 30%),
linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(224, 244, 250, 0.72)),
radial-gradient(circle at 20% 18%, rgba(18, 184, 134, 0.24), transparent 32%),
radial-gradient(circle at 86% 18%, rgba(246, 95, 66, 0.18), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 244, 250, 0.76)),
#eaf7fb;
border: 1px solid rgba(8, 126, 164, 0.18);
border-radius: 8px;
border: 1px solid rgba(8, 126, 164, 0.20);
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 18px 48px rgba(37, 76, 105, 0.12);
inset 0 1px 0 rgba(255, 255, 255, 0.86),
inset 0 -22px 44px rgba(8, 126, 164, 0.05),
0 22px 54px rgba(37, 76, 105, 0.12);
display: flex;
height: clamp(350px, 34vw, 460px);
height: clamp(360px, 34vw, 470px);
justify-content: center;
margin-bottom: 24px;
overflow: hidden;
padding: 22px;
padding: clamp(18px, 3vw, 30px);
position: relative;
isolation: isolate;
perspective: 1200px;
}
.project-preview::before {
background-position: center;
background-size: cover;
content: "";
filter: blur(18px) saturate(1.12);
inset: -24px;
opacity: 0.34;
filter: blur(24px) saturate(1.16);
inset: -34px;
opacity: 0.26;
position: absolute;
transform: scale(1.08);
transform: scale(1.1);
z-index: -2;
}
.project-preview::after {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 16% 84%, rgba(255, 255, 255, 0.34)),
linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 42%);
linear-gradient(90deg, rgba(255, 255, 255, 0.56), transparent 18% 82%, rgba(255, 255, 255, 0.30)),
linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 42%);
border: 1px solid rgba(8, 126, 164, 0.16);
border-radius: 8px;
border-radius: 14px;
content: "";
inset: 30px;
opacity: 0.54;
inset: 24px;
opacity: 0.62;
position: absolute;
transform: rotate(-2deg);
z-index: -1;
......@@ -566,8 +568,8 @@ h3 {
.project-preview img {
border-radius: 18px;
box-shadow:
0 28px 70px rgba(37, 76, 105, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.74);
0 26px 70px rgba(37, 76, 105, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.76);
display: block;
max-height: calc(100% - 4px);
max-width: 100%;
......@@ -576,64 +578,103 @@ h3 {
transition: filter 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.project-preview-1 {
background:
radial-gradient(circle at 18% 22%, rgba(84, 119, 255, 0.22), transparent 32%),
radial-gradient(circle at 78% 22%, rgba(255, 83, 182, 0.18), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.82));
}
.project-preview-1::after {
inset: 34px 28px;
opacity: 0.56;
transform: rotate(1.2deg);
}
.project-preview-1 img {
aspect-ratio: 16 / 9;
border-radius: 14px;
max-height: none;
object-fit: cover;
transform: rotate(-1.2deg) rotateX(2deg) scale(0.98);
width: min(100%, 760px);
}
.project-preview-count-3 {
height: clamp(370px, 35vw, 480px);
padding: 20px;
background:
radial-gradient(circle at 26% 28%, rgba(18, 184, 134, 0.22), transparent 31%),
radial-gradient(circle at 78% 24%, rgba(138, 92, 246, 0.13), transparent 30%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 251, 248, 0.74));
height: clamp(390px, 36vw, 500px);
padding: 24px;
}
.project-preview-count-3::after {
inset: 42px 74px;
transform: rotate(2deg);
background:
radial-gradient(ellipse at center, rgba(18, 184, 134, 0.15), transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.12));
inset: 44px 70px;
opacity: 0.72;
transform: rotate(1.6deg);
}
.project-preview-count-3 img {
border-radius: 24px;
max-height: 88%;
max-width: 38%;
background: #ffffff;
border: 5px solid rgba(19, 37, 56, 0.84);
border-radius: 30px;
box-shadow:
0 26px 54px rgba(37, 76, 105, 0.26),
0 0 0 1px rgba(255, 255, 255, 0.78);
filter: saturate(1.04) contrast(1.01);
max-height: 82%;
max-width: 33%;
position: absolute;
top: 50%;
}
.project-preview-count-3 img:nth-child(1) {
opacity: 0.86;
transform: translate(-78%, -48%) rotate(-8deg) scale(0.9);
opacity: 0.96;
transform: translate(-86%, -46%) rotate(-9deg) scale(0.92);
z-index: 1;
}
.project-preview-count-3 img:nth-child(2) {
transform: translate(-2%, -52%) rotate(0deg) scale(1.06);
transform: translate(-2%, -49%) rotate(0deg) scale(1.08);
z-index: 3;
}
.project-preview-count-3 img:nth-child(3) {
opacity: 0.92;
transform: translate(70%, -48%) rotate(8deg) scale(0.9);
opacity: 0.96;
transform: translate(82%, -46%) rotate(9deg) scale(0.92);
z-index: 2;
}
.project-preview-2 img {
border-radius: 26px;
transform: rotate(2deg) scale(1.03);
border-radius: 30px;
}
.project-card:hover .project-preview img {
filter: saturate(1.08) contrast(1.04);
box-shadow:
0 34px 84px rgba(37, 76, 105, 0.34),
0 34px 84px rgba(37, 76, 105, 0.32),
0 0 0 1px rgba(255, 255, 255, 0.82);
transform: translateY(-6px) rotate(0deg) scale(1.08);
}
.project-card:hover .project-preview-1 img {
transform: translateY(-6px) rotate(0deg) rotateX(0deg) scale(1.02);
}
.project-card:hover .project-preview-count-3 img:nth-child(1) {
transform: translate(-84%, -50%) rotate(-10deg) scale(0.94);
transform: translate(-92%, -48%) rotate(-11deg) scale(0.95);
}
.project-card:hover .project-preview-count-3 img:nth-child(2) {
transform: translate(-2%, -56%) rotate(0deg) scale(1.1);
transform: translate(-2%, -52%) rotate(0deg) scale(1.12);
}
.project-card:hover .project-preview-count-3 img:nth-child(3) {
transform: translate(76%, -50%) rotate(10deg) scale(0.94);
transform: translate(88%, -48%) rotate(11deg) scale(0.95);
}
.project-index {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment