Okay, let's forge this portfolio in the grim darkness of the far future! We'll create an interactive website for Sulthan Rafif Fauzan with a Warhammer 40k theme, complete with an intro animation and dramatic effects using HTML, CSS, and JavaScript.
This sets up the basic structure:
index.html): Defines the intro overlay, header, main sections (Hero, About, Projects, Contact), and footer using semantic tags and thematic text. Includes Google Fonts for a more fitting style.style.css): Implements the dark, metallic Warhammer 40k theme with colors (--primary-color, --accent-color, etc.) and fonts (Cinzel, Orbitron). It includes:
script.js):
You can view this initial version. We can refine the animations, add more specific 40k visual elements (like icons or background textures), and enhance interactivity further.*
Okay, let's enhance the "system" feel with more dynamic elements and visual refinements. We'll add a typing effect to the intro, animations on scroll for the sections, and some subtle visual tweaks.
Key changes:
index.html):
data-text attributes to .cogitator-line elements for the typing effect.data-final="true" attribute to the last cogitator line for special styling.<div id="scanline-overlay"> for visual effect.scroll-animate class to sections intended for scroll animation.style.css):
#scanline-overlay.::after) effect during typing.body background..scroll-animate initial state and .in-view active state).::before element to h3 tags.script.js):
typeLine function for the typing effect in the intro.IntersectionObserver to detect when sections with the .scroll-animate class scroll into view and add the .in-view class to trigger CSS animations. Observation starts after the intro finishes.This should give the site a more dynamic and "system-like" presentation.
Okay, let's inject more interactivity. We'll add:
Changes Summary:
index.html):
<div id="mouse-glow"></div> right after <body>.<span class="tooltip" data-tooltip="..."> with descriptive text in the data-tooltip attribute.<div class="project-details"> inside each .project-card-content containing placeholder tech stack/features.style.css):
--mouse-x and --mouse-y.#mouse-glow using a radial-gradient positioned with the CSS variables. It's fixed, behind content, and non-interactive..tooltip and its ::before (text box) and ::after (arrow) pseudo-elements to create the hover tooltip effect..project-details to be hidden initially (max-height: 0, opacity: 0).:hover styles for .project-card to reveal .project-details by increasing max-height and opacity. Adjusted transitions and layout.position: relative and z-index to appear above the background glow.script.js):
handleMouseMove function to update the --mouse-x and --mouse-y CSS variables based on the mouse's viewport coordinates (clientX, clientY).mousemove event listener to the body after the intro sequence finishes (hideIntroOverlay function).Now, a subtle glow should follow the mouse cursor across the page, project cards will expand on hover to show more details, and hovering over specific terms will display tooltips.
Okay, let's update the "About Me" section and add a dedicated "Skills" section highlighting Design and Figma proficiency, all within the established Warhammer 40k theme.
Key changes implemented:
index.html):
#about section.<section id="skills" class="scroll-animate">.#skills section with categories (<h4>) and lists (<ul>, <li>) of skills, using thematic language.<strong class="skill-highlight">.#skills.style.css):
html { scroll-behavior: smooth; scroll-padding-top: 80px; } to enable smooth scrolling and offset for the sticky header. Adjusted padding on smaller screens..skills-container (using CSS Grid for layout), .skill-category, and list items (li::before for custom bullets)..skill-highlight to make Figma stand out.script.js):
.scroll-animate) and smooth scroll selector (a[href^="#"]) automatically handle the new section and link. The primary adjustment for smooth scrolling is handled in CSS (scroll-padding-top).The portfolio now includes an expanded "About Me" and a detailed "Skills" section featuring Design and Figma, integrated seamlessly into the existing theme and layout.
Okay, let's add a section detailing Sulthan Rafif Fauzan's educational background, maintaining the Warhammer 40k aesthetic.
Summary of Additions:
index.html):
<section id="education" class="scroll-animate"> between "About" and "Skills".div with class education-entry containing details for Universitas Gadjah Mada (you can add more entries similarly). Used h4, p, and strong tags with thematic text. Added a descriptive paragraph with class education-detail.<a href="#education">Indoctrination</a> in the header.style.css):
.education-entry to give it a distinct look (background, border, padding, margin).h4, p, strong, and .education-detail within the education entries..education-entry.scroll-padding-top for smaller screens to better accommodate the potentially taller stacked header.script.js):
The portfolio now features an "Education" section, styled consistently with the rest of the Warhammer 40k theme.