Portfolio V1

Overview

This portfolio is created in pure HTML, CSS and JavaScript. It's designed to show of my skills and other projects I've worked on. This site is created with mobile-first and glassmorphism in mind to look good on both mobile and desktop devices with modern and goodlooking design.

Technical Challenges

This was the first time I created a site mobile first. It required me to change my mindset but it was worth it in the end. In the future every site I'll create will be mobile first.

Key Features

• Glassmorphism for a modern look
• Mobile-first design
• Formspree integration for contact form

Code Snippet Example

To achieve the 3D tilt effect on the project cards, I used the following JavaScript snippet to calculate and apply CSS transforms based on mouse position.

cards.forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const rect = card.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 = ((y - centerY) / centerY) * -10;
        const rotateY = ((x - centerX) / centerX) * 10;

        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
    });
});