From 6955f365c36e18f67d96bceccd80790b6756a4c7 Mon Sep 17 00:00:00 2001 From: ordinarthur Date: Tue, 24 Feb 2026 10:17:30 +0100 Subject: [PATCH] init --- index.html | 66 +++++++++++ main.js | 73 ++++++++++++ style.css | 335 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 474 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..c5a5d5b --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + REBOUR - Contemporary Art Furniture + + + + + + + + + + + +
+
+ +
+ +
+ +
+
[ REBOUR ]
+
+ STATUS: W.I.P +
+
+ +
+
+

// ARCHIVE 001

+

SHAPING
THE FUTURE
OF FORM

+ +
+ +
+
+
+
+
+
+
+ +
+

Contemporary art furniture bridging the gap between
Space Age geometry and Memphis rebellion.

+
+
+
+ + +
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..0ccc24a --- /dev/null +++ b/main.js @@ -0,0 +1,73 @@ +/** + * Main Interaction Script + * Minimalist animations and custom cursor for that "Premium WIP" feel. + */ + +document.addEventListener('DOMContentLoaded', () => { + // Custom Cursor Logic + const cursorDot = document.querySelector('.cursor-dot'); + const cursorOutline = document.querySelector('.cursor-outline'); + let isHovering = false; + + // Track mouse position + window.addEventListener('mousemove', (e) => { + const posX = e.clientX; + const posY = e.clientY; + + // Custom dot follows exact position + cursorDot.style.left = `${posX}px`; + cursorDot.style.top = `${posY}px`; + + // Outline trails slightly with a small delay simulation via animationFrame + // But for simplicity and performance in vanilla, we use transform directly + cursorOutline.animate({ + left: `${posX}px`, + top: `${posY}px` + }, { duration: 150, fill: "forwards" }); + }); + + // Hover effects on links and interactive elements + const links = document.querySelectorAll('a, .status-badge, .art-piece-container'); + + links.forEach(link => { + link.addEventListener('mouseenter', () => { + isHovering = true; + cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)'; + cursorOutline.style.backgroundColor = 'rgba(0,0,0,0.1)'; + cursorDot.style.transform = 'translate(-50%, -50%) scale(0.5)'; + }); + + link.addEventListener('mouseleave', () => { + isHovering = false; + cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)'; + cursorOutline.style.backgroundColor = 'transparent'; + cursorDot.style.transform = 'translate(-50%, -50%) scale(1)'; + }); + }); + + // Simple 3D parallax on the art piece + const artContainer = document.querySelector('.art-piece-container'); + const artPiece = document.querySelector('.art-piece'); + + if (artContainer && artPiece) { + artContainer.addEventListener('mousemove', (e) => { + const rect = artContainer.getBoundingClientRect(); + const x = e.clientX - rect.left; // x position within the element. + const y = e.clientY - rect.top; // y position within the element. + + // Calculate rotation based on cursor position + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const rotateX = ((y - centerY) / centerY) * -15; // Max 15deg + const rotateY = ((x - centerX) / centerX) * 15; // Max 15deg + + artPiece.style.transform = `scale(1.05) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; + }); + + artContainer.addEventListener('mouseleave', () => { + // Reset position + artPiece.style.transform = 'scale(1) perspective(1000px) rotateX(0) rotateY(0)'; + }); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..3aac58d --- /dev/null +++ b/style.css @@ -0,0 +1,335 @@ +/* ========================================================================== + REBOUR - WIP SPACE AGE & MEMPHIS BASE STYLES + ========================================================================== */ + +:root { + /* Memphis Colors */ + --clr-black: #050505; + --clr-white: #fcfcfc; + --clr-memphis-red: #ff3b28; + --clr-memphis-blue: #0047bb; + --clr-memphis-yellow: #ffd100; + --clr-memphis-green: #00a651; + --clr-bg: #f4f4f0; + --clr-grid-line: rgba(0, 0, 0, 0.05); + + /* Typography */ + --font-heading: 'Outfit', sans-serif; + --font-mono: 'Space Mono', monospace; + + /* Memphis Shadows & Borders */ + --border-thick: 3px solid var(--clr-black); + --shadow-hard: 8px 8px 0px 0px var(--clr-black); + --shadow-hover: 12px 12px 0px 0px var(--clr-black); + + /* Layout */ + --container-padding: 2rem; +} + +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--clr-bg); + color: var(--clr-black); + font-family: var(--font-mono); /* Default technical font */ + overflow-x: hidden; + cursor: none; /* Hidden for custom cursor */ +} + +/* Custom Cursor */ +.cursor-dot { + width: 8px; + height: 8px; + background-color: var(--clr-memphis-red); + border-radius: 50%; + position: fixed; + top: 0; + left: 0; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 10000; + transition: width 0.2s, height 0.2s; +} + +.cursor-outline { + width: 40px; + height: 40px; + border: 2px solid var(--clr-black); + border-radius: 50%; + position: fixed; + top: 0; + left: 0; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 9999; + transition: width 0.2s, height 0.2s, background-color 0.2s; +} + +/* Blueprint Grid Background */ +.grid-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -1; + background-image: + linear-gradient(var(--clr-grid-line) 1px, transparent 1px), + linear-gradient(90deg, var(--clr-grid-line) 1px, transparent 1px); + background-size: 40px 40px; +} + +/* Layout Wrapper */ +.page-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; + padding: var(--container-padding); + position: relative; + z-index: 1; +} + +/* Header */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + border: var(--border-thick); + padding: 1rem 1.5rem; + background-color: var(--clr-white); + box-shadow: var(--shadow-hard); + border-radius: 999px; /* Space Age Pill shape */ +} + +.logo-text { + font-weight: 700; + font-size: 1.25rem; + letter-spacing: -0.05em; +} + +.status-badge { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + font-weight: 700; +} + +.blinking-dot { + width: 10px; + height: 10px; + background-color: var(--clr-memphis-red); + border-radius: 50%; + display: inline-block; + animation: blink 1.5s infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +/* Hero Section */ +.hero { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 4rem 0; +} + +.hero-content { + text-align: center; + max-width: 900px; + width: 100%; +} + +.mono-subtitle { + font-size: 0.9rem; + color: #666; + margin-bottom: 2rem; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.hero-title { + font-family: var(--font-heading); + font-size: clamp(3rem, 8vw, 7rem); + line-height: 0.9; + font-weight: 900; + text-transform: uppercase; + letter-spacing: -0.02em; + margin-bottom: 3rem; +} + +.memphis-highlight { + color: var(--clr-white); + background-color: var(--clr-black); + padding: 0 1rem; + display: inline-block; + transform: rotate(-2deg); + border: var(--border-thick); + box-shadow: 6px 6px 0px 0px var(--clr-memphis-yellow); +} + +/* Abstract Memphis / Space Age CSS Art */ +.art-piece-container { + height: 300px; + display: flex; + justify-content: center; + align-items: center; + margin: 4rem 0; + position: relative; + perspective: 1000px; +} + +.art-piece { + position: relative; + width: 250px; + height: 250px; + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.art-piece-container:hover .art-piece { + transform: scale(1.05) rotate(5deg); +} + +.shape { + position: absolute; + border: var(--border-thick); + box-shadow: var(--shadow-hard); + transition: all 0.3s ease; +} + +/* The primary Space Age pill shape */ +.shape-pill { + width: 120px; + height: 220px; + background-color: var(--clr-memphis-blue); + border-radius: 999px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; +} + +/* A retro Space Age perfect circle */ +.shape-circle { + width: 140px; + height: 140px; + background-color: var(--clr-memphis-red); + border-radius: 50%; + top: -20px; + left: -40px; + z-index: 1; +} + +/* A weird arch (Gufram / Memphis reference) */ +.shape-arch { + width: 100px; + height: 150px; + background-color: var(--clr-memphis-green); + border-top-left-radius: 100px; + border-top-right-radius: 100px; + border-bottom: 0; + bottom: -10px; + right: -30px; + z-index: 3; +} + +/* A strictly Memphis zigzag/stairs element */ +.shape-zigzag { + width: 60px; + height: 60px; + background-color: var(--clr-memphis-yellow); + top: 50%; + left: 110%; + transform: translateY(-50%) rotate(45deg); + z-index: 4; +} + +/* Text Description */ +.hero-description { + font-size: 1.1rem; + line-height: 1.6; + max-width: 500px; + margin: 0 auto; + padding: 1.5rem; + background-color: var(--clr-white); + border: var(--border-thick); + box-shadow: var(--shadow-hard); +} + +/* Footer */ +.footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: var(--border-thick); + padding-top: 2rem; + margin-top: 2rem; +} + +.footer-col { + font-size: 0.9rem; +} + +.footer-col.right { + display: flex; + gap: 2rem; +} + +.memphis-link { + color: var(--clr-black); + text-decoration: none; + font-weight: 700; + position: relative; + padding: 0.25rem 0.5rem; + transition: all 0.2s ease; +} + +.memphis-link::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--clr-memphis-yellow); + z-index: -1; + transform: scaleY(0.2) translateY(10px); + transform-origin: bottom; + transition: transform 0.2s ease; +} + +.memphis-link:hover::before { + transform: scaleY(1) translateY(0); +} + +.memphis-link:hover { + color: var(--clr-black); + border: 2px solid var(--clr-black); +} + +/* Responsive */ +@media (max-width: 768px) { + :root { + --container-padding: 1rem; + } + .header { + flex-direction: column; + gap: 1rem; + border-radius: 1rem; + } + .footer { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } +}