Okay, I can help you create the basic structure for an interactive portfolio website with a Japanese simple theme. Sultan Rafif Fauzan - Portfolio

Sultan Rafif Fauzan

Web Developer & Designer

About Me

Welcome to my portfolio. I specialize in creating clean, elegant, and functional web experiences. Inspired by simplicity and efficiency.

Projects

Project One

Description of the first project. Focus on technology and outcome.

Project Two

Description of the second project. Highlight key features.

Project Three

Description of the third project. Mention challenges and solutions.

Contact

Feel free to reach out for collaborations or inquiries.

Email: your.email@example.com

body { font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; /* Light grey background */ color: #333; /* Dark grey text */ line-height: 1.6; } header { background-color: #fff; /* White header background */ padding: 2rem 0; text-align: center; border-bottom: 1px solid #ddd; } header h1 { margin: 0; font-weight: 700; color: #222; } header p { margin: 0.5rem 0 0; color: #555; font-weight: 300; } nav { background-color: #333; /* Dark background for nav */ padding: 0.5rem 0; text-align: center; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { display: inline-block; margin: 0 1rem; } nav ul li a { color: #f4f4f4; /* Light text for nav links */ text-decoration: none; font-weight: 400; transition: color 0.3s ease; } nav ul li a:hover { color: #a0522d; /* Subtle accent color on hover (Sienna) */ } main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; } .portfolio-section { background-color: #fff; margin-bottom: 2rem; padding: 2rem; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); opacity: 0; /* Initially hidden for fade-in */ transform: translateY(20px); /* Initial position for fade-in */ transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .portfolio-section.visible { opacity: 1; transform: translateY(0); } .portfolio-section h2 { margin-top: 0; color: #a0522d; /* Accent color for headings */ border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1rem; font-weight: 700; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .project-item { background-color: #f9f9f9; padding: 1rem; border: 1px solid #eee; border-radius: 3px; } .project-item h3 { margin-top: 0; color: #444; } #contact a { color: #a0522d; text-decoration: none; } #contact a:hover { text-decoration: underline; } footer { text-align: center; margin-top: 3rem; padding: 1rem 0; color: #777; font-size: 0.9em; border-top: 1px solid #eee; } /* Initial fade-in for header/nav */ .fade-in { opacity: 0; animation: fadeInAnimation 1s ease-in forwards; } @keyframes fadeInAnimation { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Stagger animation for nav */ nav.fade-in { animation-delay: 0.2s; } document.addEventListener('DOMContentLoaded', () => { // Intersection Observer for section fade-in on scroll const sections = document.querySelectorAll('.portfolio-section'); const observerOptions = { root: null, // relative to document viewport rootMargin: '0px', threshold: 0.1 // trigger when 10% of the section 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); } // Optional: Remove 'visible' class if element scrolls out of view // else { // entry.target.classList.remove('visible'); // } }); }; const observer = new IntersectionObserver(observerCallback, observerOptions); sections.forEach(section => { observer.observe(section); }); // Smooth scrolling for navigation links const navLinks = document.querySelectorAll('nav a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); }); This sets up the basic HTML structure, applies a simple Japanese-inspired theme using CSS (minimal colors, clean font, whitespace), and adds JavaScript for smooth scrolling and a fade-in effect for sections as you scroll down. Remember to replace placeholder content (like email and project descriptions) with your actual information.