<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Briza Ochate Rosales - SEO Content Writer</title>
<meta name="description" content="Portfolio website for Briza Ochate Rosales, an SEO Content Writer and Copywriter">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Base styles */
:root {
--foreground-rgb: 255, 255, 255;
--background-rgb: 0, 0, 0;
--accent-color: #ff3e6c;
--accent-color-hover: #ff6b8e;
}
* {
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-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; }
.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-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-100 { 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;
}
/* 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);
}
/* Typewriter effect */
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
from { border-right-color: rgba(255, 255, 255, 0.75); }
to { border-right-color: transparent; }
}
.typewriter {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid rgba(255, 255, 255, 0.75);
animation: typewriter 4s steps(44) 1s 1 normal both,
blink 1s steps(1) infinite;
}
/* 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);
}
/* Parallax effect */
.parallax {
transition: transform 0.1s ease-out;
}
/* 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; }
}
/* Section specific styles */
section {
padding: 4rem 1.5rem;
}
@media (min-width: 1024px) {
section {
padding: 4rem 4rem;
}
}
/* Magnetic button effect */
.magnetic-button {
display: inline-block;
}
/* Background particles */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
</style>
</head>
<body>
<!-- Background particles -->
<div id="particles-js"></div>
<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">
<div class="w-6 h-6 rounded-full bg-white flex items-center justify-center hover-scale pulse-animation">
<span class="text-black text-xs font-bold">B</span>
</div>
<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="#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-500">
<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 typewriter-animation">
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>
<!-- Services Section -->
<section id="services" 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">My Services</span>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-between items-start mb-12">
<h2 class="text-4xl font-bold mb-4 lg:mb-0 fade-in-up delay-100 text-reveal">
Content <span class="text-gray-500"> Services</span>
</h2>
<div class="flex flex-col fade-in-up delay-200">
<p class="text-gray-400 mb-6 max-w-xl">
Explore my range of content writing services tailored to help your business grow online.
</p>
<div class="self-end">
<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>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 stagger-reveal">
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-100 card-hover spotlight">
<div class="flex items-center gap-4 mb-6">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center pulse-animation">
<span class="text-white">📝</span>
</div>
<h3 class="text-xl font-bold accent-hover">SEO Content Writing</h3>
</div>
<p class="text-gray-400 mb-4">
Creating engaging, SEO-optimized content that ranks well in search engines and connects with your target
audience.
</p>
<div class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
<a href="#" class="flex items-center gap-2 cursor-pointer border-animation">
<span class="text-sm">Learn 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>
</div>
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-200 card-hover spotlight">
<div class="flex items-center gap-4 mb-6">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center pulse-animation">
<span class="text-white">🔍</span>
</div>
<h3 class="text-xl font-bold accent-hover">Keyword Research</h3>
</div>
<p class="text-gray-400 mb-4">
Identifying high-value keywords that drive targeted traffic and improve your content's visibility in search
results.
</p>
<div class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
<a href="#" class="flex items-center gap-2 cursor-pointer border-animation">
<span class="text-sm">Learn 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>
</div>
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-300 card-hover spotlight">
<div class="flex items-center gap-4 mb-6">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center pulse-animation">
<span class="text-white">💻</span>
</div>
<h3 class="text-xl font-bold accent-hover">Website Copy</h3>
</div>
<p class="text-gray-400 mb-4">
Compelling website copy that engages visitors, communicates your value proposition, and drives conversions.
</p>
<div class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
<a href="#" class="flex items-center gap-2 cursor-pointer border-animation">
<span class="text-sm">Learn 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>
</div>
<div class="border border-gray-800 rounded-xl p-8 hover-up fade-in-up delay-400 card-hover spotlight">
<div class="flex items-center gap-4 mb-6">
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center pulse-animation">
<span class="text-white">📊</span>
</div>
<h3 class="text-xl font-bold accent-hover">Content Optimization</h3>
</div>
<p class="text-gray-400 mb-4">
Improving existing content to enhance search engine visibility, readability, and conversion rates.
</p>
<div class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
<a href="#" class="flex items-center gap-2 cursor-pointer border-animation">
<span class="text-sm">Learn 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>
</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" class="w-5 h-5">
<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>
</div>
<div>
<p class="text-gray-400 text-sm">Email</p>
<p class="font-medium">brizarosales551@gmail.com</p>
</div>
</div>
<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" class="w-5 h-5">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
</div>
<div>
<p class="text-gray-400 text-sm">Phone</p>
<p class="font-medium">09204169780</p>
</div>
</div>
<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" class="w-5 h-5">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<div>
<p class="text-gray-400 text-sm">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>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-16 px-6 lg:px-16 border-t border-gray-800 reveal-on-scroll">
<div class="flex flex-col md:flex-row justify-between items-center mb-12">
<div class="flex items-center gap-2 mb-6 md:mb-0 fade-in-up">
<div class="w-6 h-6 rounded-full bg-white flex items-center justify-center hover-scale pulse-animation">
<span class="text-black text-xs font-bold">B</span>
</div>
<span class="font-medium border-animation">Briza Ochate rosales</span>
</div>
<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 fade-in-up delay-100 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 fade-in-up delay-200 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 fade-in-up delay-300 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 class="w-8 h-8 rounded-full border border-gray-700 flex items-center justify-center cursor-pointer hover-scale fade-in-up delay-400 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="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-center">
<nav class="flex items-center gap-8 mb-6 md:mb-0">
<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="#contact" class="text-sm text-gray-400 hover:text-white transition-colors cursor-pointer border-animation">
Contact
</a>
</div>
</nav>
<div class="flex items-center gap-4 text-sm text-gray-400 fade-in-up delay-500">
<span>© 2025 Briza Ochate rosales</span>
<span>SEO Content Writer</span>
</div>
</div>
</footer>
</main>
<!-- Particles.js for background animation -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Custom cursor effect
document.addEventListener('DOMContentLoaded', function() {
const cursorRing = document.getElementById('cursor-ring');
const cursorDot = document.getElementById('cursor-dot');
const cursorHighlight = document.getElementById('cursor-highlight');
let clicked = false;
let hidden = true;
// Show cursor when it first loads
setTimeout(() => {
hidden = false;
cursorRing.classList.remove('opacity-0');
cursorRing.classList.add('opacity-100');
cursorDot.classList.remove('opacity-0');
cursorDot.classList.add('opacity-100');
cursorHighlight.classList.remove('opacity-0');
cursorHighlight.classList.add('opacity-100');
}, 500);
const onMouseMove = (e) => {
cursorRing.style.left = `${e.clientX}px`;
cursorRing.style.top = `${e.clientY}px`;
cursorDot.style.left = `${e.clientX}px`;
cursorDot.style.top = `${e.clientY}px`;
cursorHighlight.style.left = `${e.clientX}px`;
cursorHighlight.style.top = `${e.clientY}px`;
const target = e.target;
const isLinkOrButton =
target.tagName.toLowerCase() === 'a' ||
target.tagName.toLowerCase() === 'button' ||
target.closest('a') ||
target.closest('button') ||
target.classList.contains('cursor-pointer') ||
window.getComputedStyle(target).cursor === 'pointer';
if (isLinkOrButton) {
cursorRing.classList.add('w-20', 'h-20');
cursorRing.classList.remove('w-8', 'h-8');
cursorDot.classList.add('opacity-0');
cursorDot.classList.remove('opacity-100');
} else {
cursorRing.classList.remove('w-20', 'h-20');
cursorRing.classList.add('w-8', 'h-8');
cursorDot.classList.remove('opacity-0');
cursorDot.classList.add('opacity-100');
}
};
const onMouseDown = (e) => {
clicked = true;
createRipple(e);
};
const onMouseUp = () => {
clicked = false;
};
const onMouseLeave = () => {
hidden = true;
cursorRing.classList.remove('opacity-100');
cursorRing.classList.add('opacity-0');
cursorDot.classList.remove('opacity-100');
cursorDot.classList.add('opacity-0');
cursorHighlight.classList.remove('opacity-100');
cursorHighlight.classList.add('opacity-0');
};
const onMouseEnter = () => {
hidden = false;
cursorRing.classList.remove('opacity-0');
cursorRing.classList.add('opacity-100');
cursorDot.classList.remove('opacity-0');
cursorDot.classList.add('opacity-100');
cursorHighlight.classList.remove('opacity-0');
cursorHighlight.classList.add('opacity-100');
};
function createRipple(e) {
const ripple = document.createElement('div');
ripple.className = 'cursor-ripple fixed z-[9999] pointer-events-none mix-blend-difference';
ripple.style.left = `${e.clientX}px`;
ripple.style.top = `${e.clientY}px`;
ripple.style.border = '2px solid white';
ripple.style.borderRadius = '50%';
ripple.style.width = '20px';
ripple.style.height = '20px';
ripple.style.animation = 'ripple 0.5s ease-out forwards';
document.body.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
}
// Magnetic button effect
const magneticButtons = document.querySelectorAll('.magnetic-button');
magneticButtons.forEach(button => {
button.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const distanceX = e.clientX - centerX;
const distanceY = e.clientY - centerY;
this.style.transform = `translate(${distanceX / 10}px, ${distanceY / 10}px)`;
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translate(0, 0)';
this.style.transition = 'transform 0.3s ease';
});
});
// Navigation dots
const navDots = document.getElementById('navigation-dots');
const sections = document.querySelectorAll('section');
// Create navigation dots
sections.forEach((section, index) => {
const dot = document.createElement('div');
dot.className = `nav-dot cursor-pointer w-2 h-2 rounded-full transition-all duration-300 hover:scale-150 ${index === 0 ? 'bg-white' : 'bg-gray-600'}`;
dot.addEventListener('click', () => {
window.scrollTo({
top: section.offsetTop - 100,
behavior: 'smooth'
});
});
navDots.appendChild(dot);
});
// Update active dot on scroll
window.addEventListener('scroll', () => {
const dots = document.querySelectorAll('.nav-dot');
sections.forEach((section, index) => {
const rect = section.getBoundingClientRect();
if (rect.top <= 300 && rect.bottom >= 300) {
dots.forEach(dot => dot.classList.remove('bg-white'));
dots.forEach(dot => dot.classList.add('bg-gray-600'));
dots[index].classList.remove('bg-gray-600');
dots[index].classList.add('bg-white');
}
});
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('bg-black/80', 'backdrop-blur-md');
} else {
header.classList.remove('bg-black/80', 'backdrop-blur-md');
}
});
// Reveal animations on scroll
const revealElements = document.querySelectorAll('.reveal-on-scroll');
const textRevealElements = document.querySelectorAll('.text-reveal');
const staggerRevealElements = document.querySelectorAll('.stagger-reveal');
function checkReveal() {
const windowHeight = window.innerHeight;
const revealPoint = 150;
revealElements.forEach(element => {
const revealTop = element.getBoundingClientRect().top;
if (revealTop < windowHeight - revealPoint) {
element.classList.add('revealed');
}
});
textRevealElements.forEach(element => {
const revealTop = element.getBoundingClientRect().top;
if (revealTop < windowHeight - revealPoint) {
element.classList.add('revealed');
}
});
staggerRevealElements.forEach(element => {
const revealTop = element.getBoundingClientRect().top;
if (revealTop < windowHeight - revealPoint) {
element.classList.add('revealed');
}
});
}
// Initialize text reveal animations
textRevealElements.forEach(element => {
const text = element.textContent;
element.textContent = '';
for (let i = 0; i < text.length; i++) {
const span = document.createElement('span');
span.textContent = text[i] === ' ' ? ' ' : text[i];
span.style.transitionDelay = `${i * 0.03}s`;
element.appendChild(span);
}
});
// Glow on hover effect
const glowElements = document.querySelectorAll('.glow-on-hover');
glowElements.forEach(element => {
element.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
this.style.setProperty('--x', `${x}%`);
this.style.setProperty('--y', `${y}%`);
});
});
// Spotlight effect
const spotlightElements = document.querySelectorAll('.spotlight');
spotlightElements.forEach(element => {
element.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
this.style.setProperty('--x', `${x}%`);
this.style.setProperty('--y', `${y}%`);
});
});
// Tilt effect
const tiltElements = document.querySelectorAll('.tilt-effect');
tiltElements.forEach(element => {
element.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (centerY - y) / 20;
const rotateY = (x - centerX) / 20;
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
element.addEventListener('mouseleave', function() {
this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
});
// Parallax effect
const parallaxElements = document.querySelectorAll('.parallax');
window.addEventListener('mousemove', function(e) {
const mouseX = e.clientX / window.innerWidth;
const mouseY = e.clientY / window.innerHeight;
parallaxElements.forEach(element => {
const depth = parseFloat(element.getAttribute('data-depth') || 0.1);
const moveX = (mouseX * depth * 100);
const moveY = (mouseY * depth * 100);
element.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
// Initialize particles.js
if (typeof particlesJS !== 'undefined') {
particlesJS('particles-js', {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: { type: "circle" },
opacity: { value: 0.1, random: true },
size: { value: 3, random: true },
line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.1, width: 1 },
move: { enable: true, speed: 1, direction: "none", random: true, out_mode: "out" }
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "grab" },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 140, line_linked: { opacity: 0.3 } },
push: { particles_nb: 4 }
}
},
retina_detect: true
});
}
window.addEventListener('scroll', checkReveal);
checkReveal(); // Check on page load
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseenter', onMouseEnter);
document.addEventListener('mouseleave', onMouseLeave);
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp);
});
</script>
</body>
</html>