Thoughtful
Digital Experiences
I thrive on turning complex challenges into sleek, intuitive solutions.
I thrive on turning complex challenges into sleek, intuitive solutions.
Visualising LIFT: Hero Concept for a Web3 Agency
What I'm into
Product design
I transform ideas into digital products, focusing on user needs, functionality, and visual appeal.
Ui/ux
I create intuitive interfaces and seamless user experiences that are engaging and easy to navigate.
Branding
I craft unique brand identities that effectively convey your vision and resonate with your audience.
web development
I build responsive, dynamic websites in Webflow, enhancing your online presence and user experience.
3 things to know about me
I'm Driven by Creation
I’ve always had a natural drive to create and share ideas that resonate. For me, design is the perfect way to combine my love for solving problems with the goal of crafting memorable, meaningful experiences.
I Embrace and Adapt to Change
I’m excited (and cautious) about the new technologies that are shaping the future of design. I’m open-minded and eager to embrace tools that challenge and push my creative boundaries.
I’m Energised by Ideas
I thrive when I’m working with others who push me to do better. I’m looking for teams who value creativity, innovation, and fun as much as I do.
Back to Top
script>
const bg = document.querySelector('.bg-elements');
let targetX = 50;
let targetY = 50;
let currentX = 50;
let currentY = 50;
// Throttle the mousemove event handler
let lastMoveTime = 0;
const moveInterval = 50; // 16ms (about 60fps)
document.addEventListener('mousemove', (e) => {
const now = Date.now();
if (now - lastMoveTime > moveInterval) {
lastMoveTime = now;
targetX = (e.clientX / window.innerWidth) * 100;
targetY = (e.clientY / window.innerHeight) * 100;
}
});
// Variable to hold the animation frame ID (for scroll control)
let rafId;
// Pause animation during scroll
let isScrolling;
window.addEventListener('scroll', () => {
cancelAnimationFrame(rafId);
clearTimeout(isScrolling);
isScrolling = setTimeout(() => {
animate(); // Restart animation after a brief delay
}, 150); // Adjust delay to your preference
});
function animate() {
currentX += (targetX - currentX) * 0.3;
currentY += (targetY - currentY) * 0.3;
const mask = `radial-gradient(
circle at ${currentX}% ${currentY}%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.8) 5%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.2) 15%,
rgba(255, 255, 255, 0) 20%
)`;
bg.style.maskImage = mask;
bg.style.webkitMaskImage = mask;
rafId = requestAnimationFrame(animate); // Save the frame ID
}
animate(); // Start animation