* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
font-family: "Inter", Arial, Helvetica, sans-serif;
cursor: none;
overflow-x: hidden;
}
a, button, .cursor-pointer, [role="button"] {
cursor: none !important;
}
/* Tailwind-like utility classes */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-full { width: 100%; }
.h-auto { height: auto; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.bg-white { background-color: white; }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.text-black { color: black; }
.text-white { color: white; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.border { border-width: 1px; }
.border-gray-700 { border-color: #374151; }
.border-gray-800 { border-color: #1f2937; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-32 { padding-top: 8rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.ml-2 { margin-left: 0.5rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.top-20 { top: 5rem; }
.right-20 { right: 5rem; }
.top-1\/2 { top: 50%; }
.top-1\/3 { top: 33.333333%; }
.left-1\/4 { left: 25%; }
.right-1\/3 { right: 33.333333%; }
.right-6 { right: 1.5rem; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[9998\] { z-index: 9998; }
.z-\[9999\] { z-index: 9999; }
.transform { transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-y-1\/4 { transform: translateY(-25%); }
.translate-y-1\/4 { transform: translateY(25%); }
.rotate-3 { transform: rotate(3deg); }
.rotate-12 { transform: rotate(12deg); }
.-rotate-6 { transform: rotate(-6deg); }
.pointer-events-none { pointer-events: none; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.transition-all { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-transform { transition-property: transform; }
.duration-300 { transition-duration: 300ms; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.mix-blend-difference { mix-blend-mode: difference; }
.opacity-0 { opacity: 0; }
.opacity-70 { opacity: 0.7; }
.opacity-100 { opacity: 1; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:text-white:hover { color: white; }
.hover\:scale-150:hover { transform: scale(1.5); }
.hover\:translate-x-1:hover { transform: translateX(0.25rem); }
.self-end { align-self: flex-end; }
/* Grid classes */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Custom animations */
@keyframes float {
0% { transform: translate(0, 0); }
50% { transform: translate(10px, -15px); }
75% { transform: translate(-5px, 5px); }
100% { transform: translate(0, 0); }
}
.floating {
animation: float 8s ease-in-out infinite;
}
.floating-delay-1 {
animation-delay: 1s;
}
.floating-delay-2 {
animation-delay: 2s;
}
.floating-delay-3 {
animation-delay: 3s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-250 {
animation-delay: 0.25s;
}
.delay-300 {
animation-delay: 0.3s;
}
.delay-400 {
animation-delay: 0.4s;
}
.delay-500 {
animation-delay: 0.5s;
}
.delay-600 {
animation-delay: 0.6s;
}
/* Hover effects */
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-up {
transition: transform 0.3s ease;
}
.hover-up:hover {
transform: translateY(-10px);
}
/* Ripple animation */
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
/* Text reveal animation */
.text-reveal {
position: relative;
overflow: hidden;
display: inline-block;
}
.text-reveal span {
display: inline-block;
transform: translateY(100%);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.text-reveal.revealed span {
transform: translateY(0);
opacity: 1;
}
/* Staggered animation for multiple elements */
.stagger-reveal > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-reveal.revealed > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-reveal.revealed > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-reveal.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-reveal.revealed > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-reveal.revealed > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-reveal.revealed > *:nth-child(6) { transition-delay: 0.6s; }
.stagger-reveal.revealed > * {
opacity: 1;
transform: translateY(0);
}
/* Glow effect */
.glow-on-hover {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.glow-on-hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
}
.glow-on-hover:hover::before {
opacity: 1;
}
/* Tilt effect */
.tilt-effect {
transform-style: preserve-3d;
transform: perspective(1000px);
transition: transform 0.3s ease;
}
.tilt-effect > * {
transform: translateZ(20px);
}
/* Border animation */
.border-animation {
position: relative;
transition: all 0.3s ease;
}
.border-animation::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
.border-animation:hover::after {
width: 100%;
}
/* Pulse animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-animation {
animation: pulse 2s infinite ease-in-out;
}
/* Rotate animation */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate-animation {
animation: rotate 10s linear infinite;
}
/* Shake animation */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.shake-on-hover:hover {
animation: shake 0.5s ease-in-out;
}
/* Gradient text */
.gradient-text {
background: linear-gradient(90deg, #ff3e6c, #ff9e3e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
/* Neon glow */
.neon-glow {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
0 0 10px rgba(255, 255, 255, 0.3),
0 0 15px rgba(255, 62, 108, 0.3),
0 0 20px rgba(255, 62, 108, 0.2);
}
/* Spotlight effect */
.spotlight {
position: relative;
overflow: hidden;
}
.spotlight::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.spotlight:hover::after {
opacity: 1;
}
/* Card hover effects */
.card-hover {
transition: all 0.3s ease;
border: 1px solid #1f2937;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: var(--accent-color);
}
/* Button hover effects */
.button-hover {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.button-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
}
.button-hover:hover::before {
left: 100%;
}
/* Accent color elements */
.accent-color {
color: var(--accent-color);
}
.accent-border {
border-color: var(--accent-color);
}
.accent-bg {
background-color: var(--accent-color);
}
.accent-hover:hover {
color: var(--accent-color-hover);
}
/* Reveal on scroll */
.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* Batman logo styles */
.board {
height: 150px;
width: 250px;
position: relative;
overflow: hidden;
}
.outer-circle {
position: absolute;
height: 130px;
width: 230px;
border-radius: 50%;
border: 6px solid #000;
background: #fffb3b;
top: 3px;
left: 4px;
overflow: hidden;
}
.bat {
background: #000;
position: absolute;
height: 112px;
width: 213px;
border-radius: 50%;
top: 9px;
left: 9px;
}
.sphere-1,
.sphere-2,
.sphere-3,
.sphere-4,
.sphere-5,
.sphere-6 {
background: #fffb3b;
position: absolute;
border-radius: 50%;
}
.sphere-1 {
height: 70px;
width: 33px;
top: 67px;
left: 44px;
transform: rotate(-41deg);
}
.sphere-2 {
height: 70px;
width: 38px;
top: 73px;
left: 68px;
transform: rotate(-15deg);
}
.sphere-3 {
height: 70px;
width: 33px;
top: 67px;
right: 44px;
transform: rotate(41deg);
}
.sphere-4 {
height: 70px;
width: 38px;
top: 73px;
right: 68px;
transform: rotate(15deg);
}
.sphere-5 {
height: 40px;
width: 37px;
top: 0px;
left: 57px;
transform: rotate(15deg);
}
.sphere-6 {
height: 40px;
width: 37px;
top: 0px;
right: 57px;
transform: rotate(15deg);
}
.square-1,
.square-2 {
background: #fffb3b;
position: absolute;
height: 20px;
width: 20px;
top: 0px;
}
.square-1 {
left: 74px;
}
.square-2 {
right: 74px;
}
.trapezoid {
top: 0px;
left: 95px;
position: absolute;
border-bottom: 12px solid #fffb3b;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
width: 22px;
transform: rotate(180deg);
}
/* Media queries */
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:flex-row { flex-direction: row; }
.md\:mb-0 { margin-bottom: 0; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:flex-row { flex-direction: row; }
.lg\:w-1\/2 { width: 50%; }
.lg\:w-1\/3 { width: 33.333333%; }
.lg\:w-2\/3 { width: 66.666667%; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
.lg\:mb-0 { margin-bottom: 0; }
.lg\:mt-0 { margin-top: 0; }
.lg\:text-6xl { font-size: 3.75rem; }
}
</style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
font-family: "Inter", Arial, Helvetica, sans-serif;
cursor: none;
overflow-x: hidden;
}
a, button, .cursor-pointer, [role="button"] {
cursor: none !important;
}
/* Tailwind-like utility classes */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-full { width: 100%; }
.h-auto { height: auto; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.bg-white { background-color: white; }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.text-black { color: black; }
.text-white { color: white; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.border { border-width: 1px; }
.border-gray-700 { border-color: #374151; }
.border-gray-800 { border-color: #1f2937; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-32 { padding-top: 8rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.ml-2 { margin-left: 0.5rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.top-20 { top: 5rem; }
.right-20 { right: 5rem; }
.top-1\/2 { top: 50%; }
.top-1\/3 { top: 33.333333%; }
.left-1\/4 { left: 25%; }
.right-1\/3 { right: 33.333333%; }
.right-6 { right: 1.5rem; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[9998\] { z-index: 9998; }
.z-\[9999\] { z-index: 9999; }
.transform { transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-y-1\/4 { transform: translateY(-25%); }
.translate-y-1\/4 { transform: translateY(25%); }
.rotate-3 { transform: rotate(3deg); }
.rotate-12 { transform: rotate(12deg); }
.-rotate-6 { transform: rotate(-6deg); }
.pointer-events-none { pointer-events: none; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.transition-all { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-transform { transition-property: transform; }
.duration-300 { transition-duration: 300ms; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.mix-blend-difference { mix-blend-mode: difference; }
.opacity-0 { opacity: 0; }
.opacity-70 { opacity: 0.7; }
.opacity-100 { opacity: 1; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:text-white:hover { color: white; }
.hover\:scale-150:hover { transform: scale(1.5); }
.hover\:translate-x-1:hover { transform: translateX(0.25rem); }
.self-end { align-self: flex-end; }
/* Grid classes */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Custom animations */
@keyframes float {
0% { transform: translate(0, 0); }
50% { transform: translate(10px, -15px); }
75% { transform: translate(-5px, 5px); }
100% { transform: translate(0, 0); }
}
.floating {
animation: float 8s ease-in-out infinite;
}
.floating-delay-1 {
animation-delay: 1s;
}
.floating-delay-2 {
animation-delay: 2s;
}
.floating-delay-3 {
animation-delay: 3s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-250 {
animation-delay: 0.25s;
}
.delay-300 {
animation-delay: 0.3s;
}
.delay-400 {
animation-delay: 0.4s;
}
.delay-500 {
animation-delay: 0.5s;
}
.delay-600 {
animation-delay: 0.6s;
}
/* Hover effects */
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-up {
transition: transform 0.3s ease;
}
.hover-up:hover {
transform: translateY(-10px);
}
/* Ripple animation */
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
/* Text reveal animation */
.text-reveal {
position: relative;
overflow: hidden;
display: inline-block;
}
.text-reveal span {
display: inline-block;
transform: translateY(100%);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.text-reveal.revealed span {
transform: translateY(0);
opacity: 1;
}
/* Staggered animation for multiple elements */
.stagger-reveal > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-reveal.revealed > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-reveal.revealed > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-reveal.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-reveal.revealed > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-reveal.revealed > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-reveal.revealed > *:nth-child(6) { transition-delay: 0.6s; }
.stagger-reveal.revealed > * {
opacity: 1;
transform: translateY(0);
}
/* Glow effect */
.glow-on-hover {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.glow-on-hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
}
.glow-on-hover:hover::before {
opacity: 1;
}
/* Tilt effect */
.tilt-effect {
transform-style: preserve-3d;
transform: perspective(1000px);
transition: transform 0.3s ease;
}
.tilt-effect > * {
transform: translateZ(20px);
}
/* Border animation */
.border-animation {
position: relative;
transition: all 0.3s ease;
}
.border-animation::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
.border-animation:hover::after {
width: 100%;
}
/* Pulse animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-animation {
animation: pulse 2s infinite ease-in-out;
}
/* Rotate animation */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate-animation {
animation: rotate 10s linear infinite;
}
/* Shake animation */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.shake-on-hover:hover {
animation: shake 0.5s ease-in-out;
}
/* Gradient text */
.gradient-text {
background: linear-gradient(90deg, #ff3e6c, #ff9e3e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
/* Neon glow */
.neon-glow {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
0 0 10px rgba(255, 255, 255, 0.3),
0 0 15px rgba(255, 62, 108, 0.3),
0 0 20px rgba(255, 62, 108, 0.2);
}
/* Spotlight effect */
.spotlight {
position: relative;
overflow: hidden;
}
.spotlight::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.spotlight:hover::after {
opacity: 1;
}
/* Card hover effects */
.card-hover {
transition: all 0.3s ease;
border: 1px solid #1f2937;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: var(--accent-color);
}
/* Button hover effects */
.button-hover {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.button-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
}
.button-hover:hover::before {
left: 100%;
}
/* Accent color elements */
.accent-color {
color: var(--accent-color);
}
.accent-border {
border-color: var(--accent-color);
}
.accent-bg {
background-color: var(--accent-color);
}
.accent-hover:hover {
color: var(--accent-color-hover);
}
/* Reveal on scroll */
.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* Batman logo styles */
.board {
height: 150px;
width: 250px;
position: relative;
overflow: hidden;
}
.outer-circle {
position: absolute;
height: 130px;
width: 230px;
border-radius: 50%;
border: 6px solid #000;
background: #fffb3b;
top: 3px;
left: 4px;
overflow: hidden;
}
.bat {
background: #000;
position: absolute;
height: 112px;
width: 213px;
border-radius: 50%;
top: 9px;
left: 9px;
}
.sphere-1,
.sphere-2,
.sphere-3,
.sphere-4,
.sphere-5,
.sphere-6 {
background: #fffb3b;
position: absolute;
border-radius: 50%;
}
.sphere-1 {
height: 70px;
width: 33px;
top: 67px;
left: 44px;
transform: rotate(-41deg);
}
.sphere-2 {
height: 70px;
width: 38px;
top: 73px;
left: 68px;
transform: rotate(-15deg);
}
.sphere-3 {
height: 70px;
width: 33px;
top: 67px;
right: 44px;
transform: rotate(41deg);
}
.sphere-4 {
height: 70px;
width: 38px;
top: 73px;
right: 68px;
transform: rotate(15deg);
}
.sphere-5 {
height: 40px;
width: 37px;
top: 0px;
left: 57px;
transform: rotate(15deg);
}
.sphere-6 {
height: 40px;
width: 37px;
top: 0px;
right: 57px;
transform: rotate(15deg);
}
.square-1,
.square-2 {
background: #fffb3b;
position: absolute;
height: 20px;
width: 20px;
top: 0px;
}
.square-1 {
left: 74px;
}
.square-2 {
right: 74px;
}
.trapezoid {
top: 0px;
left: 95px;
position: absolute;
border-bottom: 12px solid #fffb3b;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
width: 22px;
transform: rotate(180deg);
}
/* Media queries */
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:flex-row { flex-direction: row; }
.md\:mb-0 { margin-bottom: 0; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:flex-row { flex-direction: row; }
.lg\:w-1\/2 { width: 50%; }
.lg\:w-1\/3 { width: 33.333333%; }
.lg\:w-2\/3 { width: 66.666667%; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
.lg\:mb-0 { margin-bottom: 0; }
.lg\:mt-0 { margin-top: 0; }
.lg\:text-6xl { font-size: 3.75rem; }
}
</style>
<main class="relative min-h-screen overflow-x-hidden">
<!-- Cursor Effect -->
<div id="cursor-ring" class="fixed z-[9999] pointer-events-none mix-blend-difference transform -translate-x-1/2 -translate-y-1/2 transition-[width,height,opacity] duration-300 opacity-0 w-8 h-8 rounded-full" style="border: 2px solid white;"></div>
<div id="cursor-dot" class="fixed z-[9999] pointer-events-none mix-blend-difference transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300 opacity-0 w-2 h-2 bg-white rounded-full"></div>
<div id="cursor-highlight" class="fixed z-[9998] pointer-events-none transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300 opacity-0 w-[400px] h-[400px] rounded-full" style="background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);"></div>
<!-- Navigation Dots -->
<div class="fixed right-6 top-1/2 -translate-y-1/2 z-50 hidden lg:flex flex-col gap-6" id="navigation-dots">
<!-- Navigation dots will be added by JavaScript -->
</div>
<!-- Header -->
<header id="header" class="flex justify-between items-center py-4 px-6 lg:px-16 fixed top-0 left-0 right-0 z-40 fade-in-up transition-all duration-300">
<div class="flex items-center gap-2">
<!-- Changed from white rounded background with "B" to PakGames logo -->
<img src="https://officialpakgames.com/wp-content/uploads/2025/04/搜狗高速浏览器截图20250419193347.png" alt="PAK GAMES logo" class="h-8">
<span class="font-medium border-animation">BRIZA</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<div class="flex items-center gap-8">
<div class="fade-in-up delay-100">
<a href="#about" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
About
</a>
</div>
<div class="fade-in-up delay-200">
<a href="#experience" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Experience
</a>
</div>
<div class="fade-in-up delay-300">
<a href="#services" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Services
</a>
</div>
<div class="fade-in-up delay-400">
<a href="#portfolio" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Portfolio
</a>
</div>
<div class="fade-in-up delay-500">
<a href="#contact" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Contact
</a>
</div>
</div>
<div class="fade-in-up delay-600">
<div class="magnetic-button">
<a href="#contact" class="text-sm bg-white text-black px-4 py-2 rounded-full hover:bg-gray-200 transition-colors flex items-center gap-2 cursor-pointer button-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
Contact Me
</a>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="hero" class="py-32 px-6 lg:px-16 flex flex-col lg:flex-row relative min-h-screen">
<div class="lg:w-1/2">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 fade-in-up glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">CONTENT WRITER</span>
</div>
<h2 class="text-5xl lg:text-6xl font-bold mb-4 flex items-center gap-2 fade-in-up delay-100 text-reveal">
<span>BRIZA</span> <span class="text-gray-500"> OCHATE, ROSALES</span>
<span class="text-gray-600 hover-scale">.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 hover-scale shake-on-hover">
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path>
</svg>
</h2>
<p class="gradient-text font-medium mb-8 max-w-md fade-in-up delay-250">
An SEO Content Writer and Copywriter with a strong understanding of on-page SEO, keyword research, and content optimization. Skilled in writing, editing, and proofreading content in English.
</p>
<div class="flex gap-4 fade-in-up delay-300">
<div class="magnetic-button">
<a href="#portfolio" class="bg-white text-black px-6 py-3 rounded-full hover:bg-gray-200 transition-colors font-medium cursor-pointer button-hover">
See Portfolio
</a>
</div>
<div class="magnetic-button">
<a href="#contact" class="border border-gray-700 px-6 py-3 rounded-full hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover">
Contact Now
</a>
</div>
</div>
</div>
<div class="lg:w-1/2 mt-12 lg:mt-0 relative">
<div class="absolute top-0 right-0 -translate-y-1/4 rotate-12 bg-black/30 backdrop-blur-sm p-4 rounded-xl border border-gray-800 z-10 floating glow-on-hover">
<p class="text-sm text-gray-400">
<span class="text-white neon-glow">" Fast learner with</span>
<br />
creative problem-solving "
</p>
</div>
<div class="absolute bottom-0 right-0 translate-y-1/4 -rotate-6 bg-black/30 backdrop-blur-sm p-4 rounded-xl border border-gray-800 z-10 floating floating-delay-2 glow-on-hover">
<p class="text-sm text-gray-400">
<span class="text-white neon-glow">" Excellent teamwork</span>
<br />
and multi-tasking skills "
</p>
</div>
<div class="absolute top-1/2 left-1/4 -translate-y-1/2 rotate-3 z-10 floating floating-delay-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 rotate-animation">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="absolute top-1/3 right-1/3 -translate-y-1/2 -rotate-6 z-10 floating floating-delay-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 pulse-animation">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">About Me</span>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/3 fade-in-up reveal-on-scroll">
<h2 class="text-4xl font-bold mb-2 text-reveal">
<span class="text-gray-500">Content Writer</span>
</h2>
<p class="text-gray-400 mb-8">
Bringing engaging content to life through careful craft and purposeful communication.
</p>
<div class="relative rounded-xl overflow-hidden hover-up tilt-effect card-hover">
<img src="https://officialpakgames.com/wp-content/uploads/2025/04/31.png" alt="Briza Ochate rosales" class="w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent">
<div class="inline-flex items-center gap-2 mb-2 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Available for work</span>
</div>
<h3 class="text-2xl font-bold mb-1 neon-glow">Hello I am Briza Ochate Rosales</h3>
<p class="text-sm text-gray-400 mb-4">SEO Content Writer Based in Mandaluyong City</p>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</div>
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</div>
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path>
</svg>
</div>
</div>
<p class="text-sm text-gray-400 mt-4">Connect with me</p>
</div>
</div>
</div>
<div class="lg:w-2/3 fade-in-up delay-200 reveal-on-scroll">
<p class="text-gray-400 mb-8">
I'm Briza Ochate Rosales, a dedicated Content Writer based in Mandaluyong City, Philippines. I specialize
in creating <span class="gradient-text">SEO-optimized content</span> with a focus on delivering exceptional results. Familiar with content
management systems like WordPress and able to meet deadlines while managing multiple projects
simultaneously.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 stagger-reveal">
<div class="text-center hover-scale fade-in-up delay-100 card-hover p-4 rounded-lg">
<h4 class="font-medium">SEO Content</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-200 card-hover p-4 rounded-lg">
<h4 class="font-medium">Copywriting</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-300 card-hover p-4 rounded-lg">
<h4 class="font-medium">Keyword Research</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-400 card-hover p-4 rounded-lg">
<h4 class="font-medium">Content Optimization</h4>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 stagger-reveal">
<div class="text-center hover-scale fade-in-up delay-100 card-hover p-4 rounded-lg">
<h4 class="font-medium">WordPress</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-200 card-hover p-4 rounded-lg">
<h4 class="font-medium">Multi-tasking</h4>
</div>
</div>
<!-- Personal Info -->
<div class="border border-gray-800 rounded-xl p-8 mt-8 fade-in-up delay-300 card-hover reveal-on-scroll">
<h3 class="text-xl font-bold mb-6 border-b border-gray-800 pb-2 neon-glow">Personal Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 stagger-reveal">
<div class="spotlight">
<p class="text-gray-400 mb-1">Birthday</p>
<p class="font-medium">September 12, 1997</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Age</p>
<p class="font-medium">27 years old</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Nationality</p>
<p class="font-medium">Filipino</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Civil Status</p>
<p class="font-medium">Single</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Religion</p>
<p class="font-medium">Catholic</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Location</p>
<p class="font-medium">Phase 4 Lot 18 Correctional Rd.</p>
<p class="font-medium">Brgy. Additional Hills, Mandaluyong City</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Email</p>
<p class="font-medium">brizarosales551@gmail.com</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Phone</p>
<p class="font-medium">09204169780</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Work Experience</span>
</div>
<h2 class="text-4xl font-bold mb-4 text-reveal">
Professional <span class="text-gray-500"> Journey</span>
</h2>
</div>
<div class="max-w-3xl mx-auto stagger-reveal">
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-100 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Marketing Staff</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">Agonoy Manpower Services</p>
<p class="text-sm text-gray-500">July 2024 - October 2024</p>
</div>
<p class="text-gray-300">
Experienced in handling customer inquiries, resolving issues promptly, and ensuring customer satisfaction.
Skilled at understanding client needs and providing clear, effective solutions. Committed to delivering a
positive customer experience through professional and timely support.
</p>
</div>
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-200 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Marketing Staff</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">W.Bridges Manpower Corp</p>
<p class="text-sm text-gray-500">January 2024 - July 2024</p>
</div>
<p class="text-gray-300">
Worked with influencers and media partners to promote products. Helped increase brand awareness and reach a
wider audience through online collaborations. Demonstrated strong multi-tasking abilities while managing
various marketing initiatives.
</p>
</div>
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-300 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Horn Checker</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">Mituba Corporation</p>
<p class="text-sm text-gray-500">November 2022 - April 2023</p>
</div>
<p class="text-gray-300">
Tested car horns to ensure proper functionality, inspected for damage, and performed minor repairs or
recommended replacements. Recorded test results, reported issues, and collaborated with the inspection team
to maintain vehicle standards.
</p>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Portfolio</span>
</div>
<h2 class="text-4xl font-bold mb-4 text-reveal">
Portfolio
</h2>
<p class="text-gray-400 max-w-md mx-auto mb-12 fade-in-up delay-200">
A showcase of my content writing projects, demonstrating my skills and expertise in creating engaging and effective content.
</p>
</div>
<!-- Portfolio Filters -->
<div class="flex justify-center gap-4 mb-8 fade-in-up delay-300">
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover active" data-filter="all">All</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="seo">SEO Articles</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="copywriting">Copywriting</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="website">Website Copy</button>
</div>
<!-- Portfolio Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 stagger-reveal" id="portfolio-grid">
<!-- Project Card 1 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-100 card-hover spotlight" data-category="seo">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Article Example 1</h3>
<p class="text-gray-400 mb-4">
A sample SEO-optimized article written to rank for specific keywords and drive organic traffic.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">Read More</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 2 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-200 card-hover spotlight" data-category="copywriting">
<h3 class="text-xl font-bold mb-2 accent-hover">Copywriting Example 1</h3>
<p class="text-gray-400 mb-4">
Compelling website copy designed to convert visitors and highlight key product benefits.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">View Live</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 3 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-300 card-hover spotlight" data-category="website">
<h3 class="text-xl font-bold mb-2 accent-hover">Website Copy Example 1</h3>
<p class="text-gray-400 mb-4">
Landing page copy focused on clear messaging and a strong call-to-action to drive sign-ups.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">Explore</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 4 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-400 card-hover spotlight" data-category="seo">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Article Example 2</h3>
<p class="text-gray-400 mb-4">
Another example of a long-form SEO article targeting a different niche and audience.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">View Article</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Let's Connect</span>
</div>
</div>
<h2 class="text-4xl font-bold mb-12 fade-in-up delay-100 text-reveal">
Let's Create <span class="text-gray-500"> Together</span>
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="fade-in-up delay-200 reveal-on-scroll">
<div class="mb-8 spotlight">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Blog Articles</h3>
<div class="flex items-center gap-2 text-gray-400 text-sm mb-4">
<span>Starting from <span class="gradient-text">$50</span> per article</span>
</div>
<p class="text-gray-400">
Well-researched, SEO-optimized blog articles tailored to your target audience and business goals.
</p>
</div>
<div class="mb-8 spotlight">
<h3 class="text-xl font-bold mb-2 accent-hover">Website Copy</h3>
<div class="flex items-center gap-2 text-gray-400 text-sm mb-4">
<span>Starting from <span class="gradient-text">$150</span> per page</span>
</div>
<p class="text-gray-400">
Compelling website copy that engages visitors, communicates your value proposition, and drives
conversions.
</p>
</div>
<div class="flex gap-4">
<div class="magnetic-button">
<a href="#portfolio" class="bg-white text-black px-6 py-3 rounded-full hover:bg-gray-200 transition-colors font-medium cursor-pointer button-hover">
See Portfolio
</a>
</div>
<div class="magnetic-button">
<a href="#contact-form" class="border border-gray-700 px-6 py-3 rounded-full hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover">
Contact Me
</a>
</div>
</div>
</div>
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-300 card-hover reveal-on-scroll">
<h3 class="text-2xl font-bold mb-6 neon-glow">Get in Touch</h3>
<div class="space-y-6 stagger-reveal">
<div class="flex items-center gap-4 spotlight">
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center pulse-animation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round
<main class="relative min-h-screen overflow-x-hidden">
<!-- Cursor Effect -->
<div id="cursor-ring" class="fixed z-[9999] pointer-events-none mix-blend-difference transform -translate-x-1/2 -translate-y-1/2 transition-[width,height,opacity] duration-300 opacity-0 w-8 h-8 rounded-full" style="border: 2px solid white;"></div>
<div id="cursor-dot" class="fixed z-[9999] pointer-events-none mix-blend-difference transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300 opacity-0 w-2 h-2 bg-white rounded-full"></div>
<div id="cursor-highlight" class="fixed z-[9998] pointer-events-none transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300 opacity-0 w-[400px] h-[400px] rounded-full" style="background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);"></div>
<!-- Navigation Dots -->
<div class="fixed right-6 top-1/2 -translate-y-1/2 z-50 hidden lg:flex flex-col gap-6" id="navigation-dots">
<!-- Navigation dots will be added by JavaScript -->
</div>
<!-- Header -->
<header id="header" class="flex justify-between items-center py-4 px-6 lg:px-16 fixed top-0 left-0 right-0 z-40 fade-in-up transition-all duration-300">
<div class="flex items-center gap-2">
<!-- Changed from white rounded background with "B" to PakGames logo -->
<img src="https://officialpakgames.com/wp-content/uploads/2025/04/搜狗高速浏览器截图20250419193347.png" alt="PAK GAMES logo" class="h-8">
<span class="font-medium border-animation">BRIZA</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<div class="flex items-center gap-8">
<div class="fade-in-up delay-100">
<a href="#about" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
About
</a>
</div>
<div class="fade-in-up delay-200">
<a href="#experience" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Experience
</a>
</div>
<div class="fade-in-up delay-300">
<a href="#services" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Services
</a>
</div>
<div class="fade-in-up delay-400">
<a href="#portfolio" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Portfolio
</a>
</div>
<div class="fade-in-up delay-500">
<a href="#contact" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Contact
</a>
</div>
</div>
<div class="fade-in-up delay-600">
<div class="magnetic-button">
<a href="#contact" class="text-sm bg-white text-black px-4 py-2 rounded-full hover:bg-gray-200 transition-colors flex items-center gap-2 cursor-pointer button-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
Contact Me
</a>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="hero" class="py-32 px-6 lg:px-16 flex flex-col lg:flex-row relative min-h-screen">
<div class="lg:w-1/2">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 fade-in-up glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">CONTENT WRITER</span>
</div>
<h2 class="text-5xl lg:text-6xl font-bold mb-4 flex items-center gap-2 fade-in-up delay-100 text-reveal">
<span>BRIZA</span> <span class="text-gray-500"> OCHATE, ROSALES</span>
<span class="text-gray-600 hover-scale">.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 hover-scale shake-on-hover">
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path>
</svg>
</h2>
<p class="gradient-text font-medium mb-8 max-w-md fade-in-up delay-250">
An SEO Content Writer and Copywriter with a strong understanding of on-page SEO, keyword research, and content optimization. Skilled in writing, editing, and proofreading content in English.
</p>
<div class="flex gap-4 fade-in-up delay-300">
<div class="magnetic-button">
<a href="#portfolio" class="bg-white text-black px-6 py-3 rounded-full hover:bg-gray-200 transition-colors font-medium cursor-pointer button-hover">
See Portfolio
</a>
</div>
<div class="magnetic-button">
<a href="#contact" class="border border-gray-700 px-6 py-3 rounded-full hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover">
Contact Now
</a>
</div>
</div>
</div>
<div class="lg:w-1/2 mt-12 lg:mt-0 relative">
<div class="absolute top-0 right-0 -translate-y-1/4 rotate-12 bg-black/30 backdrop-blur-sm p-4 rounded-xl border border-gray-800 z-10 floating glow-on-hover">
<p class="text-sm text-gray-400">
<span class="text-white neon-glow">" Fast learner with</span>
<br />
creative problem-solving "
</p>
</div>
<div class="absolute bottom-0 right-0 translate-y-1/4 -rotate-6 bg-black/30 backdrop-blur-sm p-4 rounded-xl border border-gray-800 z-10 floating floating-delay-2 glow-on-hover">
<p class="text-sm text-gray-400">
<span class="text-white neon-glow">" Excellent teamwork</span>
<br />
and multi-tasking skills "
</p>
</div>
<div class="absolute top-1/2 left-1/4 -translate-y-1/2 rotate-3 z-10 floating floating-delay-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 rotate-animation">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="absolute top-1/3 right-1/3 -translate-y-1/2 -rotate-6 z-10 floating floating-delay-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 pulse-animation">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">About Me</span>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/3 fade-in-up reveal-on-scroll">
<h2 class="text-4xl font-bold mb-2 text-reveal">
<span class="text-gray-500">Content Writer</span>
</h2>
<p class="text-gray-400 mb-8">
Bringing engaging content to life through careful craft and purposeful communication.
</p>
<div class="relative rounded-xl overflow-hidden hover-up tilt-effect card-hover">
<img src="https://officialpakgames.com/wp-content/uploads/2025/04/31.png" alt="Briza Ochate rosales" class="w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent">
<div class="inline-flex items-center gap-2 mb-2 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Available for work</span>
</div>
<h3 class="text-2xl font-bold mb-1 neon-glow">Hello I am Briza Ochate Rosales</h3>
<p class="text-sm text-gray-400 mb-4">SEO Content Writer Based in Mandaluyong City</p>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</div>
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</div>
<div class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale shake-on-hover">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path>
</svg>
</div>
</div>
<p class="text-sm text-gray-400 mt-4">Connect with me</p>
</div>
</div>
</div>
<div class="lg:w-2/3 fade-in-up delay-200 reveal-on-scroll">
<p class="text-gray-400 mb-8">
I'm Briza Ochate Rosales, a dedicated Content Writer based in Mandaluyong City, Philippines. I specialize
in creating <span class="gradient-text">SEO-optimized content</span> with a focus on delivering exceptional results. Familiar with content
management systems like WordPress and able to meet deadlines while managing multiple projects
simultaneously.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 stagger-reveal">
<div class="text-center hover-scale fade-in-up delay-100 card-hover p-4 rounded-lg">
<h4 class="font-medium">SEO Content</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-200 card-hover p-4 rounded-lg">
<h4 class="font-medium">Copywriting</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-300 card-hover p-4 rounded-lg">
<h4 class="font-medium">Keyword Research</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-400 card-hover p-4 rounded-lg">
<h4 class="font-medium">Content Optimization</h4>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 stagger-reveal">
<div class="text-center hover-scale fade-in-up delay-100 card-hover p-4 rounded-lg">
<h4 class="font-medium">WordPress</h4>
</div>
<div class="text-center hover-scale fade-in-up delay-200 card-hover p-4 rounded-lg">
<h4 class="font-medium">Multi-tasking</h4>
</div>
</div>
<!-- Personal Info -->
<div class="border border-gray-800 rounded-xl p-8 mt-8 fade-in-up delay-300 card-hover reveal-on-scroll">
<h3 class="text-xl font-bold mb-6 border-b border-gray-800 pb-2 neon-glow">Personal Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 stagger-reveal">
<div class="spotlight">
<p class="text-gray-400 mb-1">Birthday</p>
<p class="font-medium">September 12, 1997</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Age</p>
<p class="font-medium">27 years old</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Nationality</p>
<p class="font-medium">Filipino</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Civil Status</p>
<p class="font-medium">Single</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Religion</p>
<p class="font-medium">Catholic</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Location</p>
<p class="font-medium">Phase 4 Lot 18 Correctional Rd.</p>
<p class="font-medium">Brgy. Additional Hills, Mandaluyong City</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Email</p>
<p class="font-medium">brizarosales551@gmail.com</p>
</div>
<div class="spotlight">
<p class="text-gray-400 mb-1">Phone</p>
<p class="font-medium">09204169780</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Work Experience</span>
</div>
<h2 class="text-4xl font-bold mb-4 text-reveal">
Professional <span class="text-gray-500"> Journey</span>
</h2>
</div>
<div class="max-w-3xl mx-auto stagger-reveal">
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-100 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Marketing Staff</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">Agonoy Manpower Services</p>
<p class="text-sm text-gray-500">July 2024 - October 2024</p>
</div>
<p class="text-gray-300">
Experienced in handling customer inquiries, resolving issues promptly, and ensuring customer satisfaction.
Skilled at understanding client needs and providing clear, effective solutions. Committed to delivering a
positive customer experience through professional and timely support.
</p>
</div>
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-200 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Marketing Staff</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">W.Bridges Manpower Corp</p>
<p class="text-sm text-gray-500">January 2024 - July 2024</p>
</div>
<p class="text-gray-300">
Worked with influencers and media partners to promote products. Helped increase brand awareness and reach a
wider audience through online collaborations. Demonstrated strong multi-tasking abilities while managing
various marketing initiatives.
</p>
</div>
<div class="border border-gray-800 rounded-xl p-6 mb-6 hover-up fade-in-up delay-300 card-hover spotlight">
<h3 class="text-xl font-bold mb-1 accent-hover">Horn Checker</h3>
<div class="flex justify-between items-center mb-4">
<p class="text-gray-400">Mituba Corporation</p>
<p class="text-sm text-gray-500">November 2022 - April 2023</p>
</div>
<p class="text-gray-300">
Tested car horns to ensure proper functionality, inspected for damage, and performed minor repairs or
recommended replacements. Recorded test results, reported issues, and collaborated with the inspection team
to maintain vehicle standards.
</p>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="text-center mb-8 fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Portfolio</span>
</div>
<h2 class="text-4xl font-bold mb-4 text-reveal">
Portfolio
</h2>
<p class="text-gray-400 max-w-md mx-auto mb-12 fade-in-up delay-200">
A showcase of my content writing projects, demonstrating my skills and expertise in creating engaging and effective content.
</p>
</div>
<!-- Portfolio Filters -->
<div class="flex justify-center gap-4 mb-8 fade-in-up delay-300">
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover active" data-filter="all">All</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="seo">SEO Articles</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="copywriting">Copywriting</button>
<button class="filter-button px-4 py-2 rounded-full border border-gray-700 hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover" data-filter="website">Website Copy</button>
</div>
<!-- Portfolio Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 stagger-reveal" id="portfolio-grid">
<!-- Project Card 1 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-100 card-hover spotlight" data-category="seo">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Article Example 1</h3>
<p class="text-gray-400 mb-4">
A sample SEO-optimized article written to rank for specific keywords and drive organic traffic.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">Read More</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 2 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-200 card-hover spotlight" data-category="copywriting">
<h3 class="text-xl font-bold mb-2 accent-hover">Copywriting Example 1</h3>
<p class="text-gray-400 mb-4">
Compelling website copy designed to convert visitors and highlight key product benefits.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">View Live</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 3 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-300 card-hover spotlight" data-category="website">
<h3 class="text-xl font-bold mb-2 accent-hover">Website Copy Example 1</h3>
<p class="text-gray-400 mb-4">
Landing page copy focused on clear messaging and a strong call-to-action to drive sign-ups.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">Explore</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
<!-- Project Card 4 -->
<div class="portfolio-card border border-gray-800 rounded-xl p-6 hover-up fade-in-up delay-400 card-hover spotlight" data-category="seo">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Article Example 2</h3>
<p class="text-gray-400 mb-4">
Another example of a long-form SEO article targeting a different niche and audience.
</p>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2 group border-animation">
<span class="text-sm">View Article</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 px-6 lg:px-16 reveal-on-scroll">
<div class="fade-in-up">
<div class="inline-flex items-center gap-2 mb-4 bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full border border-gray-800 glow-on-hover">
<span class="w-2 h-2 bg-white rounded-full"></span>
<span class="text-xs text-gray-400">Let's Connect</span>
</div>
</div>
<h2 class="text-4xl font-bold mb-12 fade-in-up delay-100 text-reveal">
Let's Create <span class="text-gray-500"> Together</span>
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="fade-in-up delay-200 reveal-on-scroll">
<div class="mb-8 spotlight">
<h3 class="text-xl font-bold mb-2 accent-hover">SEO Blog Articles</h3>
<div class="flex items-center gap-2 text-gray-400 text-sm mb-4">
<span>Starting from <span class="gradient-text">$50</span> per article</span>
</div>
<p class="text-gray-400">
Well-researched, SEO-optimized blog articles tailored to your target audience and business goals.
</p>
</div>
<div class="mb-8 spotlight">
<h3 class="text-xl font-bold mb-2 accent-hover">Website Copy</h3>
<div class="flex items-center gap-2 text-gray-400 text-sm mb-4">
<span>Starting from <span class="gradient-text">$150</span> per page</span>
</div>
<p class="text-gray-400">
Compelling website copy that engages visitors, communicates your value proposition, and drives
conversions.
</p>
</div>
<div class="flex gap-4">
<div class="magnetic-button">
<a href="#portfolio" class="bg-white text-black px-6 py-3 rounded-full hover:bg-gray-200 transition-colors font-medium cursor-pointer button-hover">
See Portfolio
</a>
</div>
<div class="magnetic-button">
<a href="#contact-form" class="border border-gray-700 px-6 py-3 rounded-full hover:bg-white/10 transition-colors font-medium cursor-pointer button-hover">
Contact Me
</a>
</div>
</div>
</div>
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-300 card-hover reveal-on-scroll">
<h3 class="text-2xl font-bold mb-6 neon-glow">Get in Touch</h3>
<div class="space-y-6 stagger-reveal">
<div class="flex items-center gap-4 spotlight">
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center pulse-animation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round