Okay, let's start building your interactive portfolio website with a Japanese anime theme, pink and black colors, and an introduction. Sultan Rafif Fauzan - Portfolio

Sultan Rafif Fauzan

はじめまして！ (Hajimemashite!)

Welcome to my digital space. I'm Sultan Rafif Fauzan, exploring the intersections of technology and creativity.

(Visual placeholder)

body { background-color: #1a1a1a; /* Dark background */ color: #f0f0f0; /* Light text for contrast */ font-family: 'Zen Kaku Gothic New', sans-serif; margin: 0; padding: 0; line-height: 1.6; overflow-x: hidden; /* Prevent horizontal scroll */ } h1, h2, h3, h4, h5, h6 { font-family: 'Yuji Syuku', serif; /* Japanese-style font for headings */ color: #ff80bf; /* Dominant Pink */ } header { background-color: #0d0d0d; /* Slightly darker header */ padding: 1rem 2rem; text-align: center; border-bottom: 2px solid #ff80bf; /* Pink accent */ } header h1 { margin: 0; font-size: 2.5rem; } main { padding: 2rem; max-width: 1000px; margin: 2rem auto; /* Center content */ } #intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem 1rem; background-color: rgba(255, 128, 191, 0.05); /* Very subtle pink background */ border: 1px solid #ff80bf; border-radius: 8px; min-height: 60vh; /* Give it some height */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ } .intro-content { flex: 2; /* Takes more space */ animation: fadeInText 1.5s ease-in-out; } .intro-content h2 { font-size: 2.2rem; margin-bottom: 1rem; } .intro-content p { font-size: 1.1rem; color: #cccccc; /* Slightly dimmer text for paragraphs */ } .intro-visual { flex: 1; /* Takes less space */ text-align: center; animation: fadeInVisual 1.5s ease-in-out 0.5s; /* Delayed animation */ animation-fill-mode: backwards; /* Apply start state before animation */ opacity: 0; /* Start hidden for animation */ } .intro-visual img { max-width: 100%; height: auto; max-height: 300px; /* Limit image height */ display: block; margin: 0 auto; } footer { text-align: center; padding: 1rem; margin-top: 3rem; font-size: 0.9rem; color: #aaaaaa; border-top: 1px solid #333333; } /* Basic Animations */ @keyframes fadeInText { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInVisual { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Responsive adjustments */ @media (max-width: 768px) { #intro { flex-direction: column; text-align: center; } .intro-content { margin-bottom: 2rem; } header h1 { font-size: 2rem; } } // Basic script file - interactivity can be added later console.log("Portfolio script loaded."); // Example: Add subtle interaction on intro visual hover const introVisual = document.querySelector('.intro-visual'); if (introVisual) { introVisual.addEventListener('mouseenter', () => { introVisual.style.transform = 'scale(1.03)'; introVisual.style.transition = 'transform 0.3s ease'; }); introVisual.addEventListener('mouseleave', () => { introVisual.style.transform = 'scale(1)'; }); } This sets up the basic HTML structure, applies the pink and black anime-inspired theme using CSS (including fonts from Google Fonts), and adds a simple introduction section with basic animations. I've also included a placeholder for an image in the intro section – you'll need to upload an actual image named `placeholder.png` for it to appear.