/* ── Scoped to .pf-wrap so it won't break WordPress styles ── */
.pf-wrap {
--pf-bg: #0a0a0a;
--pf-border: rgba(255,255,255,0.07);
--pf-text: #f0ede8;
--pf-muted: #555;
--pf-accent: #c8f04a;
--pf-accent2: #ff6b35;
--pf-accent3: #7b61ff;
background: var(--pf-bg);
color: var(--pf-text);
font-family: 'DM Sans', sans-serif;
width: 100%;
overflow-x: hidden;
position: relative;
}
/* Hero */
.pf-hero {
padding: 60px 48px 40px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.pf-hero-title {
font-family: 'Bebas Neue', cursive;
font-size: clamp(3.5rem, 8vw, 7rem);
line-height: 0.92;
letter-spacing: -0.01em;
margin: 0;
color: var(--pf-text);
}
.pf-hero-title .pf-italic {
font-family: 'Playfair Display', serif;
font-style: italic;
color: var(--pf-accent);
font-size: 0.82em;
}
.pf-hero-sub {
max-width: 260px;
font-size: 0.84rem;
font-weight: 300;
color: var(--pf-muted);
line-height: 1.7;
text-align: right;
margin: 0;
}
/* Divider & count bar */
.pf-divider {
height: 1px;
background: var(--pf-border);
margin: 0 48px;
}
.pf-count-bar {
padding: 18px 48px;
display: flex;
align-items: center;
gap: 14px;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--pf-muted);
}
.pf-count-bar::before {
content: '';
display: inline-block;
width: 22px;
height: 1px;
background: var(--pf-muted);
}
/* Grid */
.pf-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1px;
background: var(--pf-border);
margin: 0 48px 48px;
border: 1px solid var(--pf-border);
}
/* Cards */
.pf-card {
position: relative;
background: var(--pf-bg);
overflow: hidden;
text-decoration: none !important;
color: var(--pf-text) !important;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px 28px;
min-height: 250px;
transition: background 0.4s ease;
box-shadow: none !important;
}
.pf-card:nth-child(1) { grid-column: span 5; min-height: 310px; }
.pf-card:nth-child(2) { grid-column: span 7; min-height: 310px; }
.pf-card:nth-child(3) { grid-column: span 4; }
.pf-card:nth-child(4) { grid-column: span 4; }
.pf-card:nth-child(5) { grid-column: span 4; }
.pf-card:nth-child(6) { grid-column: span 6; }
.pf-card:nth-child(7) { grid-column: span 6; }
/* Hover glow per card */
.pf-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 0;
}
.pf-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 70%, rgba(200,240,74,0.09), transparent 70%); }
.pf-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 50%, rgba(255,107,53,0.09), transparent 70%); }
.pf-card:nth-child(3)::before { background: radial-gradient(ellipse at 50% 80%, rgba(123,97,255,0.1), transparent 70%); }
.pf-card:nth-child(4)::before { background: radial-gradient(ellipse at 50% 30%, rgba(200,240,74,0.09), transparent 70%); }
.pf-card:nth-child(5)::before { background: radial-gradient(ellipse at 50% 70%, rgba(255,107,53,0.09), transparent 70%); }
.pf-card:nth-child(6)::before { background: radial-gradient(ellipse at 30% 60%, rgba(123,97,255,0.09), transparent 70%); }
.pf-card:nth-child(7)::before { background: radial-gradient(ellipse at 70% 40%, rgba(200,240,74,0.09), transparent 70%); }
.pf-card:hover::before { opacity: 1; }
.pf-card:hover { background: #0f0f0f; }
/* Top accent line */
.pf-accent-line {
position: absolute;
top: 0; left: 0;
width: 0%;
height: 2px;
transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
z-index: 2;
}
.pf-card:hover .pf-accent-line { width: 100%; }
.pf-card:nth-child(1) .pf-accent-line,
.pf-card:nth-child(4) .pf-accent-line,
.pf-card:nth-child(7) .pf-accent-line { background: var(--pf-accent); }
.pf-card:nth-child(2) .pf-accent-line,
.pf-card:nth-child(5) .pf-accent-line { background: var(--pf-accent2); }
.pf-card:nth-child(3) .pf-accent-line,
.pf-card:nth-child(6) .pf-accent-line { background: var(--pf-accent3); }
/* Card number */
.pf-num {
position: absolute;
top: 24px; right: 24px;
font-family: 'Bebas Neue', cursive;
font-size: 1rem;
letter-spacing: 0.1em;
color: var(--pf-muted);
transition: color 0.3s ease;
z-index: 1;
}
.pf-card:hover .pf-num { color: var(--pf-text); }
/* Big icon BG */
.pf-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-size: 3.5rem;
opacity: 0.06;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
z-index: 0;
pointer-events: none;
line-height: 1;
}
.pf-card:hover .pf-icon {
opacity: 0.13;
transform: translate(-50%, -60%) scale(1.12);
}
/* Card body */
.pf-body { position: relative; z-index: 1; }
.pf-tag {
display: inline-block;
font-size: 0.6rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--pf-muted);
margin-bottom: 8px;
font-weight: 400;
}
.pf-title {
font-family: 'Bebas Neue', cursive;
font-size: clamp(1.5rem, 2.3vw, 2.2rem);
letter-spacing: 0.04em;
line-height: 1;
margin: 0 0 8px 0;
color: var(--pf-text);
transition: letter-spacing 0.3s ease;
}
.pf-card:hover .pf-title { letter-spacing: 0.07em; }
.pf-desc {
font-size: 0.76rem;
font-weight: 300;
color: var(--pf-muted);
line-height: 1.65;
max-width: 270px;
transition: color 0.3s ease;
margin: 0;
}
.pf-card:hover .pf-desc { color: #888; }
/* Project count badge */
.pf-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pf-muted);
}
.pf-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--pf-accent);
animation: pfPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.pf-card:nth-child(2) .pf-dot,
.pf-card:nth-child(5) .pf-dot { background: var(--pf-accent2); }
.pf-card:nth-child(3) .pf-dot,
.pf-card:nth-child(6) .pf-dot { background: var(--pf-accent3); }
@keyframes pfPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.65); }
}
/* Arrow */
.pf-arrow {
position: absolute;
bottom: 28px; right: 24px;
width: 36px; height: 36px;
border: 1px solid var(--pf-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: var(--pf-muted);
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
z-index: 1;
text-decoration: none !important;
}
.pf-card:hover .pf-arrow { transform: rotate(45deg); border-color: var(--pf-accent); color: var(--pf-accent); }
.pf-card:nth-child(2):hover .pf-arrow,
.pf-card:nth-child(5):hover .pf-arrow { border-color: var(--pf-accent2); color: var(--pf-accent2); }
.pf-card:nth-child(3):hover .pf-arrow,
.pf-card:nth-child(6):hover .pf-arrow { border-color: var(--pf-accent3); color: var(--pf-accent3); }
/* Animate on load */
.pf-card { animation: pfFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.pf-card:nth-child(1) { animation-delay: 0.05s; }
.pf-card:nth-child(2) { animation-delay: 0.1s; }
.pf-card:nth-child(3) { animation-delay: 0.15s; }
.pf-card:nth-child(4) { animation-delay: 0.2s; }
.pf-card:nth-child(5) { animation-delay: 0.25s; }
.pf-card:nth-child(6) { animation-delay: 0.3s; }
.pf-card:nth-child(7) { animation-delay: 0.35s; }
.pf-hero { animation: pfFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes pfFadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
/* Footer strip */
.pf-footer {
padding: 24px 48px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--pf-border);
flex-wrap: wrap;
gap: 12px;
}
.pf-footer-left {
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pf-muted);
}
.pf-footer-right { display: flex; gap: 20px; }
.pf-footer-right a {
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--pf-muted) !important;
text-decoration: none !important;
transition: color 0.2s;
}
.pf-footer-right a:hover { color: var(--pf-text) !important; }
/* ── Responsive ── */
@media (max-width: 900px) {
.pf-hero { padding: 40px 24px 32px; }
.pf-hero-sub { text-align: left; }
.pf-divider, .pf-count-bar { margin-inline: 24px; }
.pf-grid { margin: 0 24px 32px; grid-template-columns: repeat(6, 1fr); }
.pf-card:nth-child(1), .pf-card:nth-child(2),
.pf-card:nth-child(5), .pf-card:nth-child(6),
.pf-card:nth-child(7) { grid-column: span 6; }
.pf-card:nth-child(3), .pf-card:nth-child(4) { grid-column: span 3; }
.pf-footer { padding: 20px 24px; justify-content: center; }
}
@media (max-width: 600px) {
.pf-grid { grid-template-columns: 1fr; }
.pf-card:nth-child(n) { grid-column: span 1 !important; }
.pf-hero-title { font-size: 3rem; }
.pf-hero-sub { display: none; }
}
Select
(function(){
/* Magnetic tilt on cards */
document.querySelectorAll('.pf-card').forEach(function(card){
card.addEventListener('mousemove', function(e){
var r = card.getBoundingClientRect();
var x = ((e.clientX - r.left) / r.width - 0.5) * 10;
var y = ((e.clientY - r.top) / r.height - 0.5) * 7;
card.style.transform = 'translate(' + (x*0.15) + 'px,' + (y*0.15) + 'px)';
});
card.addEventListener('mouseleave', function(){
card.style.transform = '';
});
});
})();
Select
your
Category
Explore a curated collection of work across disciplines. Click any category to dive into the full portfolio.
07 Categories Available
01
⌨
Development
Web
Web
Development
Full-stack apps, landing pages, SPAs & dynamic web experiences built with modern tech.
12 Projects↗
02
✦
Visual Design
Graphic
Graphic
Design
Brand identities, posters, print media & visual storytelling crafted with precision.
18 Projects↗
03
◈
Experience
DIGITAL
DIGITAL
MARKETING
Targeted campaigns, engaging visuals & data-driven digital growth.
9 Projects↗
04
◎
Animation
VEDIO
VEDIO
EDITING
2D animation, transitions & motion graphics.
7 Projects↗
05
⬡
Lens
Photography
Commercial, editorial & portrait photography.
24 Projects↗
06
⬟
Identity
Branding &
Branding &
Identity
Logo systems, brand guidelines, packaging & full visual identity for modern businesses.
15 Projects↗
07
▣
Mobile
App
App
Development
Cross-platform mobile apps & native experiences for iOS and Android.
6 Projects↗