Okay, let's create the structure for Sultan Rafif Fauzan's interactive portfolio with a Japanese theme. Sultan Rafif Fauzan - Portfolio

Sultan Rafif Fauzan

Expert Web Developer

About Me | 私について

Passionate web developer crafting elegant and efficient solutions. Inspired by precision and aesthetics.

Projects | プロジェクト

Project Title 1

Brief description of the project.

View Details

Project Title 2

Brief description of the project.

View Details

Project Title 3

Brief description of the project.

View Details

Contact | 連絡先

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; background-color: #f4f4f4; /* Light background */ color: #333; } /* Japanese Theme Palette */ :root { --primary-color: #2c3e50; /* Dark Blue/Indigo */ --secondary-color: #e74c3c; /* Red Accent (like Torii gate) */ --background-light: #ffffff; --background-medium: #ecf0f1; /* Light Gray */ --text-dark: #333333; --text-light: #f8f8f8; --font-title: 'Shippori Mincho', serif; } /* Container */ header, main, footer { max-width: 1100px; margin: auto; padding: 0 20px; } /* Header & Navigation */ header { background: var(--primary-color); color: var(--text-light); padding-top: 1rem; padding-bottom: 1rem; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } nav { display: flex; justify-content: space-between; align-items: center; } nav .logo { font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; } nav ul { list-style: none; display: flex; } nav ul li { margin-left: 20px; } nav ul li a { color: var(--text-light); text-decoration: none; font-weight: 400; transition: color 0.3s ease; } nav ul li a:hover { color: var(--secondary-color); } /* Hero Section */ .hero { text-align: center; padding: 4rem 1rem; background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https://images.unsplash.com/photo-1542051841857-5f90071e7989?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover; /* Example background */ color: var(--text-light); margin: 0 calc(-50vw + 50%); /* Full width */ width: 100vw; position: relative; left: 50%; right: 50%; } .hero h1 { font-family: var(--font-title); font-size: 3.5rem; margin-bottom: 0.5rem; font-weight: 700; } .hero p { font-size: 1.5rem; font-weight: 300; } /* Sections */ section { padding: 4rem 0; border-bottom: 1px solid var(--background-medium); } section:last-of-type { border-bottom: none; } section h2 { font-family: var(--font-title); text-align: center; font-size: 2.5rem; margin-bottom: 2rem; color: var(--primary-color); font-weight: 700; } /* About Section */ #about .about-content { max-width: 800px; margin: auto; text-align: center; font-size: 1.1rem; } /* Projects Section */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .project-card { background: var(--background-light); padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; border-left: 5px solid var(--secondary-color); } .project-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .project-card h3 { font-family: var(--font-title); color: var(--primary-color); margin-bottom: 0.5rem; } .project-card p { margin-bottom: 1rem; font-size: 0.95rem; } .project-card a { display: inline-block; text-decoration: none; color: var(--secondary-color); font-weight: bold; transition: color 0.3s ease; } .project-card a:hover { color: var(--primary-color); } /* Contact Section */ #contact-form { max-width: 600px; margin: auto; background: var(--background-light); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--primary-color); } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 5px rgba(44, 62, 80, 0.2); } button[type="submit"] { display: block; width: 100%; padding: 1rem; background-color: var(--secondary-color); color: var(--text-light); border: none; border-radius: 4px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } button[type="submit"]:hover { background-color: #c0392b; /* Darker red */ } /* Footer */ footer { text-align: center; padding: 2rem 0; margin-top: 2rem; background-color: var(--primary-color); color: var(--text-light); font-size: 0.9rem; margin: 2rem calc(-50vw + 50%) 0; /* Full width */ width: 100vw; position: relative; left: 50%; right: 50%; } /* Basic Interactivity Placeholder */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } document.addEventListener('DOMContentLoaded', () => { // Smooth scrolling for navigation links const navLinks = document.querySelectorAll('nav ul li a'); navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const targetId = link.getAttribute('href'); // #about, #projects, #contact const targetElement = document.querySelector(targetId); if (targetElement) { // Calculate position considering sticky header height const headerOffset = document.querySelector('header').offsetHeight; const elementPosition = targetElement.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); }); // Simple fade-in animation on scroll (optional) const fadeElements = document.querySelectorAll('section'); // Target sections for fade-in const observerOptions = { root: null, // relative to the viewport rootMargin: '0px', threshold: 0.1 // Trigger when 10% of the element is visible }; const observerCallback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); // Optional: Stop observing once it's visible // observer.unobserve(entry.target); } else { // Optional: Remove class if you want it to fade out when scrolling back up entry.target.classList.remove('visible'); } }); }; const scrollObserver = new IntersectionObserver(observerCallback, observerOptions); fadeElements.forEach(el => { el.classList.add('fade-in'); // Add initial state class scrollObserver.observe(el); }); // Basic Contact Form Handler (prevents default submission) const contactForm = document.getElementById('contact-form'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); // In a real application, you would send this data to a server // For now, just log it and maybe show a confirmation console.log('Form submitted (data not sent):'); const formData = new FormData(contactForm); for (let [key, value] of formData.entries()) { console.log(`${key}: ${value}`); } alert('Thank you for your message! (This is a demo - data not sent)'); contactForm.reset(); // Clear the form }); } }); This sets up the basic HTML structure, applies Japanese-themed styling with CSS (colors, fonts), and adds smooth scrolling and a simple fade-in effect with JavaScript. You can view the `index.html` file to see the initial portfolio layout.