Okay, let's enhance the portfolio by adding an intro section, an education section, and some subtle anime-inspired visual effects using CSS and JavaScript. Sultan Rafif Fauzan - Portfolio {/* Animated Background Elements */}

{/* Keep header simple, main intro is below */}

Sultan Rafif Fauzan

Web Developer | Crafting Digital Experiences

Explore My Work

{/* Optional: Add subtle down arrow */}

💻 About Me

Greetings! I'm Sultan Rafif Fauzan, a passionate web developer constantly honing my skills to build dynamic and user-friendly web experiences. I specialize in creating modern, efficient, and visually appealing applications.

My journey in web development is driven by a desire to solve problems and bring ideas to life through code, focusing on clean architecture and impactful solutions.

🎓 Education

[Your Degree Name] - [Your Major]

[University/Institution Name]

[Year Started] - [Year Ended/Expected]

Relevant coursework: [List key courses like Data Structures, Web Development, Databases, etc.]
Activities/Honors: [Any relevant clubs, projects, or honors]

{/* Add more entries if needed */}

🚀 Projects

Project Alpha

A cutting-edge web application built with [Technology]. Focused on performance and scalability.

View Project

Project Beta

An innovative project exploring [Technology]. Pushing the boundaries of interactive design.

View Project

Project Gamma

An elegant and responsive website showcasing [Technology]. Focuses on user experience and smooth animations.

View Project

{/* Add more projects as needed */}

✉️ Contact

Interested in collaborating or have a question? Feel free to reach out. Let's build something amazing together!

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans JP', sans-serif; background-color: #050a10; /* Slightly bluer dark background */ color: #e0e0e0; line-height: 1.6; overflow-x: hidden; /* Prevent horizontal scroll */ /* Add a subtle background image with parallax effect */ background-image: linear-gradient(rgba(5, 10, 16, 0.85), rgba(5, 10, 16, 0.95)), url('https://www.transparenttextures.com/patterns/stardust.png'); background-attachment: fixed; /* Parallax effect */ background-size: cover; position: relative; /* Needed for absolute positioned shapes */ } /* Animated Background Shapes (Subtle Anime Effect) */ .animated-bg { position: fixed; /* Use fixed to keep them in viewport */ top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Behind content */ overflow: hidden; } .shape { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0)); opacity: 0.6; } .shape1 { width: 300px; height: 300px; top: 10%; left: 5%; animation: float 15s infinite ease-in-out alternate; } .shape2 { width: 200px; height: 200px; bottom: 15%; right: 10%; animation: float 12s infinite ease-in-out alternate-reverse; } .shape3 { width: 150px; height: 150px; top: 40%; left: 45%; animation: float 18s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0px) translateX(0px) scale(1); } 50% { transform: translateY(-20px) translateX(15px) scale(1.05); } 100% { transform: translateY(0px) translateX(0px) scale(1); } } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; /* Ensure container content is above bg shapes */ z-index: 1; } /* Header */ header { position: fixed; /* Make header sticky */ top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */ backdrop-filter: blur(5px); /* Frosted glass effect */ padding: 1rem 0; text-align: center; z-index: 1000; /* Ensure header is on top */ border-bottom: 1px solid rgba(0, 123, 255, 0.3); /* Subtle blue line */ transition: background-color 0.3s ease; } /* Optional: Slightly change header background on scroll */ /* header.scrolled { background-color: rgba(0, 0, 0, 0.9); } */ header nav ul { list-style: none; } header nav ul li { display: inline-block; margin: 0 15px; } header nav ul li a { color: #e0e0e0; text-decoration: none; font-weight: bold; padding: 5px 10px; border-radius: 4px; transition: color 0.3s ease, text-shadow 0.3s ease; position: relative; } header nav ul li a::after { /* Animated underline effect */ content: ''; position: absolute; width: 0; height: 2px; display: block; margin-top: 5px; right: 0; background: #007bff; transition: width .3s ease; -webkit-transition: width .3s ease; } header nav ul li a:hover::after { width: 100%; left: 0; background-color: #007bff; } header nav ul li a:hover { color: #ffffff; text-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* Blue glow on hover */ } /* Intro Section */ #intro { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; /* Full viewport height */ padding-top: 60px; /* Adjust if header height changes */ position: relative; /* For scroll down arrow positioning */ overflow: hidden; /* Hide potential overflow from animations */ } .intro-content { position: relative; z-index: 2; /* Above background shapes */ } #intro .name { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; /* Larger name */ color: #ffffff; margin-bottom: 1rem; text-shadow: 0 0 10px rgba(0, 123, 255, 0.6); } #intro .subtitle { font-size: 1.4rem; color: #cccccc; margin-bottom: 2.5rem; } .cta-button { display: inline-block; background-color: #007bff; color: #ffffff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1.1rem; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .cta-button:hover { background-color: #0056b3; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5); } /* Scroll Down Arrow */ .scroll-down-link { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; } .scroll-down { width: 24px; height: 24px; border-left: 2px solid #007bff; border-bottom: 2px solid #007bff; transform: rotate(-45deg); animation: bounce 2s infinite; cursor: pointer; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-45deg); } 40% { transform: translateY(-10px) rotate(-45deg); } 60% { transform: translateY(-5px) rotate(-45deg); } } /* Sections General Styling */ .section { padding: 6rem 0 4rem 0; /* Increased top padding due to fixed header */ border-bottom: 1px dashed #333; position: relative; /* Needed for potential future pseudo-elements */ } .full-height { padding: 0; /* Remove padding for full height sections like intro */ } .section:last-child { border-bottom: none; } .section h2 { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; color: #ffffff; margin-bottom: 2.5rem; /* Increased margin */ text-align: center; position: relative; padding-bottom: 15px; /* Increased padding */ text-shadow: 0 0 5px rgba(0, 123, 255, 0.4); } .section h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, rgba(0,123,255,0) 0%, rgba(0,123,255,1) 50%, rgba(0,123,255,0) 100%); /* Gradient underline */ box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); border-radius: 2px; } .section-icon { margin-right: 12px; /* Increased margin */ font-size: 1.8rem; color: #007bff; vertical-align: middle; /* Align icon better with text */ } /* Education Section */ #education .education-entry { background-color: rgba(24, 24, 24, 0.7); /* Semi-transparent dark card */ padding: 1.5rem 2rem; margin-bottom: 1.5rem; border-radius: 8px; border-left: 5px solid #1e90ff; /* Dodger blue accent */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } #education .education-entry:hover { transform: translateX(5px); box-shadow: 0 6px 15px rgba(30, 144, 255, 0.2); } #education h3 { font-family: 'Orbitron', sans-serif; color: #ffffff; margin-bottom: 0.3rem; font-size: 1.3rem; } #education .institution { font-weight: bold; color: #1e90ff; /* Blue institution name */ margin-bottom: 0.2rem; font-size: 1.1rem; } #education .duration { font-style: italic; color: #aaa; margin-bottom: 0.8rem; font-size: 0.9rem; } #education .details { color: #c0c0c0; font-size: 1rem; line-height: 1.7; } /* About Section */ #about p { font-size: 1.1rem; margin-bottom: 1rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; color: #c0c0c0; } /* Projects Section */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .project-card { background-color: rgba(24, 24, 24, 0.7); /* Semi-transparent dark card */ padding: 1.5rem; border-radius: 8px; border-left: 5px solid #1e90ff; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); overflow: hidden; /* Ensure pseudo-elements stay within */ position: relative; } /* Add subtle glow effect on hover */ .project-card::before { content: ''; position: absolute; top: 0; left: -100%; /* Start off-screen */ width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.2), transparent); transition: left 0.5s ease; z-index: 0; } .project-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(30, 144, 255, 0.3); } .project-card:hover::before { left: 100%; /* Move glow across */ } .project-card h3 { font-family: 'Orbitron', sans-serif; color: #ffffff; margin-bottom: 0.8rem; font-size: 1.4rem; position: relative; z-index: 1; /* Keep text above glow */ } .project-card p { margin-bottom: 1rem; color: #b0b0b0; position: relative; z-index: 1; } .project-link { display: inline-block; background-color: #1e90ff; color: #ffffff; padding: 8px 15px; text-decoration: none; border-radius: 4px; font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease; position: relative; z-index: 1; } .project-link:hover { background-color: #0056b3; transform: scale(1.05); } /* Contact Section */ #contact form { max-width: 600px; margin: 1rem auto 0 auto; padding: 2rem; background-color: rgba(24, 24, 24, 0.7); /* Semi-transparent dark card */ border-radius: 8px; border-left: 5px solid #4682b4; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } #contact label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #e0e0e0; } #contact input, #contact textarea { width: 100%; padding: 0.8rem; margin-bottom: 1rem; border: 1px solid #444; border-radius: 4px; background-color: #282828; color: #e0e0e0; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } #contact input:focus, #contact textarea:focus { outline: none; border-color: #4682b4; box-shadow: 0 0 8px rgba(70, 130, 180, 0.6); } .submit-button { display: block; width: 100%; padding: 0.8rem; background-color: #4682b4; color: #ffffff; border: none; border-radius: 4px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; font-family: 'Noto Sans JP', sans-serif; } .submit-button:hover { background-color: #3672a4; transform: scale(1.01); } #form-status { margin-top: 1rem; text-align: center; font-weight: bold; min-height: 1.2em; /* Prevent layout shift */ } /* Footer */ footer { background-color: #000000; color: #888; text-align: center; padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid #222; position: relative; /* Ensure footer is above bg shapes */ z-index: 1; } /* Fade-in Animations */ .fade-in { opacity: 0; animation: fadeInAnimation 1s ease-out forwards; } .fade-in.delay-1 { animation-delay: 0.3s; } .fade-in.delay-2 { animation-delay: 0.6s; } .fade-in.delay-3 { animation-delay: 0.9s; } /* Add more delays if needed */ @keyframes fadeInAnimation { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Section Fade-in on Scroll */ .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 768px) { #intro .name { font-size: 2.5rem; } #intro .subtitle { font-size: 1.2rem; } .section h2 { font-size: 1.8rem; } .project-grid { grid-template-columns: 1fr; } header nav ul li { margin: 0 8px; /* Reduce nav spacing */ } .shape1 { width: 200px; height: 200px; } .shape2 { width: 150px; height: 150px; } .shape3 { width: 100px; height: 100px; } } @media (max-width: 480px) { #intro .name { font-size: 2rem; } #intro .subtitle { font-size: 1rem; } .cta-button { padding: 10px 20px; font-size: 1rem; } header nav ul li { margin: 0 5px; font-size: 0.9rem; } } // Smooth scrolling for navigation links (improved for fixed header) document.querySelectorAll('header nav a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { const headerOffset = document.querySelector('header').offsetHeight; let elementPosition; // Special handling for intro section to scroll to top if (targetId === '#intro') { elementPosition = 0; // Scroll to the very top } else { elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; } const offsetPosition = elementPosition - headerOffset; window.scrollTo({ top: offsetPosition, behavior: "smooth" }); } }); }); // Basic Contact Form Handling (Simulation) const contactForm = document.getElementById('contact-form'); const formStatus = document.getElementById('form-status'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Prevent actual form submission const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; formStatus.textContent = ''; // Clear previous status formStatus.style.color = ''; // Reset color if (name && email && message) { // Simulate sending formStatus.textContent = 'Sending...'; formStatus.style.color = '#007bff'; // Blue for processing setTimeout(() => { formStatus.textContent = 'Message sent successfully! (Simulation)'; formStatus.style.color = '#28a745'; // Green for success contactForm.reset(); // Clear the form // Clear status message after a few seconds setTimeout(() => { formStatus.textContent = ''; }, 5000); }, 1000); // Simulate network delay } else { formStatus.textContent = 'Please fill out all fields.'; formStatus.style.color = '#dc3545'; // Red for error // Clear status message after a few seconds setTimeout(() => { formStatus.textContent = ''; }, 5000); } }); } // Fade-in sections on scroll const sections = document.querySelectorAll('.fade-in-section'); const observerOptions = { root: null, // relative to document 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: Unobserve after animation to save resources // observer.unobserve(entry.target); } else { // Optional: Remove class if you want fade-out effect when scrolling back up // entry.target.classList.remove('visible'); } }); }; const observer = new IntersectionObserver(observerCallback, observerOptions); sections.forEach(section => { observer.observe(section); }); // Optional: Add class to header on scroll // const header = document.querySelector('header'); // window.addEventListener('scroll', () => { // if (window.scrollY > 50) { // Add class after scrolling 50px // header.classList.add('scrolled'); // } else { // header.classList.remove('scrolled'); // } // }); console.log("Enhanced portfolio script loaded! Added intro, education, and effects."); Key changes include: 1. **HTML:** * Added a new `#intro` section designed to be the first thing users see (full viewport height). * Added an `#education` section with placeholder content. * Updated the navigation bar to include "Education" and changed "About Me" link text to "About". * Added `div.animated-bg` with shape elements for CSS background animation. * Added `fade-in` classes to intro elements for initial animation. * Added `fade-in-section` class to other sections for scroll-triggered animation. * Added a scroll-down arrow cue in the intro section. 2. **CSS:** * Added styles for the `#intro` section (full height, centered content, larger text). * Added styles for the `#education` section (card-like entries). * Made the header `position: fixed` (sticky). * Added subtle animated background shapes (`.animated-bg`, `.shape`, `@keyframes float`). * Added parallax background effect to the `body`. * Added hover effects (glows, underlines, transforms) to navigation, buttons, and cards. * Added CSS for initial fade-in animations (`.fade-in`, `@keyframes fadeInAnimation`). * Added CSS for scroll-triggered fade-in (`.fade-in-section`, `.visible`). * Refined the black and blue theme with gradients and slightly different shades. * Added styles for the scroll-down arrow. 3. **JavaScript:** * Updated smooth scrolling to account for the fixed header height. * Added Intersection Observer logic to add the `.visible` class to `.fade-in-section` elements when they scroll into view. * Improved the contact form simulation feedback. Remember to replace the placeholder content in the `#education` section with Sultan Rafif Fauzan's actual details.