commit a26c102fb5a1e5ef360334cebdf40335636e5d98 Author: NicholaiVogel Date: Thu Oct 2 16:01:12 2025 -0600 first commit diff --git a/.vs/BiohazardWeb/v16/.suo b/.vs/BiohazardWeb/v16/.suo new file mode 100644 index 0000000..a82cd51 Binary files /dev/null and b/.vs/BiohazardWeb/v16/.suo differ diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..fa3cb68 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,9 @@ +{ + "ExpandedNodes": [ + "", + "\\css", + "\\js" + ], + "SelectedNode": "\\index.html", + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000..934536d Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/admin.html b/admin.html new file mode 100644 index 0000000..997ee09 --- /dev/null +++ b/admin.html @@ -0,0 +1,214 @@ + + + + + Admin — Biohazard VFX + + + + + +

+ +

+ + + + diff --git a/admin/api.js b/admin/api.js new file mode 100644 index 0000000..4cc2b61 --- /dev/null +++ b/admin/api.js @@ -0,0 +1,132 @@ +/** + * Biohazard VFX Micro-CMS API + * + * Installation: + * npm i express multer dotenv + * + * Usage: + * PORT=4000 node admin/api.js + * # or use PM2 for process management + * + * Reverse Proxy: + * Proxy /api/* to http://localhost:4000 via Nginx Proxy Manager. + * + * Security: + * Protect /admin/* and /api/* with basic-auth or Cloudflare Zero-Trust. + * + * SMB Share: + * Ensure new files are world-readable (0644) for Nginx. + */ + +const express = require('express'); +const multer = require('multer'); +const fs = require('fs'); +const fsp = require('fs/promises'); +const path = require('path'); +const dotenv = require('dotenv'); +dotenv.config(); + +const API_SECRET = process.env.API_SECRET; +const PORT = process.env.PORT || 4000; +const PROJECTS_JSON = path.resolve(__dirname, '../projects/projects.json'); +const PROJECTS_DIR = path.resolve(__dirname, '../projects'); +const TMP_DIR = path.resolve(__dirname, 'tmp'); + +if (!API_SECRET) { + console.error('Missing API_SECRET in environment.'); + process.exit(1); +} + +if (!fs.existsSync(TMP_DIR)) fs.mkdirSync(TMP_DIR, { recursive: true }); + +const app = express(); +app.use(express.json()); + +const upload = multer({ dest: TMP_DIR }); + +function slugify(str) { + return str + .toLowerCase() + .replace(/[^a-z0-9]+/g, '_') + .replace(/^_+|_+$/g, '') + .slice(0, 30); +} + +function safeExt(filename) { + const ext = path.extname(filename).toLowerCase(); + return ext.match(/\.(jpg|jpeg|png|webp|gif)$/) ? ext : '.jpg'; +} + +function requireApiKey(req, res, next) { + if (req.headers['x-api-key'] !== API_SECRET) { + return res.status(401).json({ ok: false, error: 'Unauthorized' }); + } + next(); +} + +app.get('/api/projects', async (req, res) => { + try { + const data = await fsp.readFile(PROJECTS_JSON, 'utf8'); + res.type('json').send(data); + } catch (e) { + res.status(500).json({ ok: false, error: 'Cannot read manifest.' }); + } +}); + +app.post('/api/projects', requireApiKey, upload.single('thumb'), async (req, res) => { + try { + const { title, size = 'small', embed, credits = '', info = '' } = req.body; + const file = req.file; + if (!title || !embed || !file) { + if (file) fs.unlinkSync(file.path); + return res.status(400).json({ ok: false, error: 'Missing required fields.' }); + } + + // Load manifest + let manifest = []; + try { + manifest = JSON.parse(await fsp.readFile(PROJECTS_JSON, 'utf8')); + } catch (e) {} + + const index = String(manifest.length + 1).padStart(2, '0'); + const slug = slugify(title); + const folderName = `${index}_${slug}`; + const folderPath = path.join(PROJECTS_DIR, folderName); + + await fsp.mkdir(folderPath, { recursive: true }); + + // Move thumbnail + const ext = safeExt(file.originalname); + const thumbName = `thumbnail${ext}`; + const thumbDest = path.join(folderPath, thumbName); + await fsp.rename(file.path, thumbDest); + await fsp.chmod(thumbDest, 0o644); + + // Write info.txt and credits.txt with provided content + await fsp.writeFile(path.join(folderPath, 'info.txt'), info, { mode: 0o644 }); + await fsp.writeFile(path.join(folderPath, 'credits.txt'), credits, { mode: 0o644 }); + + // Build new project object + const newObj = { + id: folderName, + title, + thumbnail: `projects/${folderName}/${thumbName}`, + size, + embed, + credits: `projects/${folderName}/credits.txt`, + info: `projects/${folderName}/info.txt` + }; + + manifest.push(newObj); + await fsp.writeFile(PROJECTS_JSON, JSON.stringify(manifest, null, 2), { mode: 0o644 }); + + res.json({ ok: true }); + } catch (err) { + if (req.file && fs.existsSync(req.file.path)) fs.unlinkSync(req.file.path); + res.status(500).json({ ok: false, error: 'Server error.' }); + } +}); + +app.listen(PORT, () => { + console.log(`Biohazard VFX micro-CMS running on port ${PORT}`); +}); diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..3b32dd3 --- /dev/null +++ b/contact.html @@ -0,0 +1,138 @@ + + + + + Connect + + + + +

+ BIOHAZARD VFX + +

+ + + + +

CONNECT

+ +

+ + + + + + + + + + + diff --git a/crew.html b/crew.html new file mode 100644 index 0000000..a7dfd55 --- /dev/null +++ b/crew.html @@ -0,0 +1,156 @@ + + + + + + Crew — Biohazard VFX + + + + + + +

+ +

Meet the Crew

+ +

Nicholai Vogel

Founder & CEO
VFX & CG Supervisor
"I just work here."

+ + + Davane

DAVANÉ

Co-Founder & Executive Producer
VFX Supervisor
"The Executive"

+ + + +

Parth Gupta

Co-Founder & Executive Producer
Comp Supervisor
"Hates Matchmove"

+ +

+ + +

+ +

+ + + + diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..4ace4ed --- /dev/null +++ b/css/home.css @@ -0,0 +1,55 @@ +/* ───────── css/home.css ───────── */ +:root { + /* 1 = 100% (default). Adjust as needed. */ + --font-scale: 1.0; +} +html { + font-size: calc(16px * var(--font-scale)); +} + +/* Page-specific layout overrides for index.html */ +.content-block, .section { + max-width: 1100px; + margin: 0 auto 4.5rem; + padding: 8vh var(--gutter-x) 6vh; + background: none; + border-radius: 0.7em; + box-sizing: border-box; +} +main.grid { + max-width: 2000px; + margin-left: auto; + margin-right: auto; + gap: 22px; +} +@media (max-width: 900px) { + .content-block, .section { + padding: 5vh 16px 3vh; + max-width: 98vw; + } + main.grid { max-width: 98vw; gap: 14px; } +} +@media (max-width: 600px) { + .content-block, .section { + padding: 3vh 6px 2vh; + max-width: 100vw; + } + main.grid { max-width: 100vw; gap: 8px; } +} +#projects.grid { margin-bottom: 6rem; } +#about.content-block, +#team.content-block, +#crew.content-block { + margin-top: 4.5rem; + margin-bottom: 1rem; + max-width: 2000px; + margin-left: auto; + margin-right: auto; +} +#pipeline.section { + margin-bottom: 1rem; + max-width: 2000px; + margin-left: auto; + margin-right: auto; +} +footer { margin-top: 1.5rem; padding-bottom: 1.5rem; } \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..433f05e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,934 @@ +/* ───────── css/styles.css ───────── */ +:root{ + --gutter-x: 24px; /* (adjusts margins) */ + --vh:1vh; + /* Safety net for JS-less browsers */ + --header-h: 64px; + font-family:'Roboto Condensed',sans-serif; + color-scheme:dark; + --acid:#ffffff; + --slate:#000000; + --graphite:#0e0e0e; + --hot:#ffffff; + --ghost:#777; + /* ====== THEME ====== */ + --accent:#dbdbdb; /* neon-cyan accent */ + --glass:rgba(14,14,14,.55);/* translucent card surface */ + --blur:12px; /* backdrop blur strength */ +} + +*{box-sizing:border-box;margin:0;padding:0} + +@media (max-width: 767px){ + :root{ --gutter-x: 12px; } /* tighter on phones */ +} + +@font-face{ + font-family:"BiohazardHead"; + src:url("../fonts/BebasNeue-Regular.woff2") format("woff2"), + url("../fonts/BebasNeue-Regular.woff") format("woff"); + font-weight:400; font-style:normal; +} +@font-face{ + font-family:"Machina"; + src:url("../fonts/Bebas_Neue/BebasNeue-Regular.ttf") format("opentype"); + font-weight:700; +} +@font-face{ + font-family:"ArchiveCond"; + src:url("..//fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2"); + font-weight:500; +} +@font-face{ + font-family:"SpaceMono"; + src:url("../fonts/Space_Mono/SpaceMono-Regular.ttf") format("opentype"); + font-weight:400; +} + +body{ + + background:var(--slate);color:var(--acid); + padding-top: calc(var(--header-h) + 2vh); + +} + +/* Add horizontal padding only to main content blocks, not header */ +.content-block, .section, main.grid { + padding-left: var(--gutter-x); + padding-right: var(--gutter-x); +} + +a{text-decoration:none;color:inherit} +img{max-width:100%;display:block} + +/* Fix 100 vh on mobile */ +@media(max-width:767px){ + body,html{height:calc(var(--vh)*100)} +} + +header.nav{ + position:fixed;top:0;left:0;width:100vw;/* Ensure full viewport width */ + z-index:100; + display:flex;flex-direction:column;align-items:center; + background:linear-gradient(to bottom, rgba(11,11,12,0.6) 0%, rgba(11,11,12,0) 100%); + text-shadow:0 0 4px var(--acid); + mix-blend-mode:normal; + font-size:clamp(14px,1.1vw,20px); + margin:0; + box-sizing:border-box; + padding: 8px 0; +} + +header.nav nav{ + display:flex; gap:24px; + font-family:'ArchiveCond',sans-serif; +} +header.nav .logo{ + font-family:"Machina",sans-serif; + font-weight:700; /* bold blocky */ + font-size:clamp(40.5px,5.6vw,72px); /* 1.125× larger */ + color:var(--acid); + transform:scale(.95); + transition:transform .3s, filter .1s; + letter-spacing:.07em; + text-transform:uppercase; + margin-bottom:2px; + position:relative; /* for underline */ +} + +header.nav .logo:hover{ + transform:scale(1); +} + +/* Fancy underline animation for logo */ +header.nav .logo::after{ + content:""; + position:absolute;left:0;right:0;bottom:0; + height:3px; + background:var(--accent); + transform:scaleX(0); + transform-origin:center center; + transition:transform .25s; +} +header.nav .logo:hover::after{ + transform:scaleX(1); +} + +header.social{ + display:flex; gap:24px; + font-family:'ArchiveCond',sans-serif; + text-shadow:0 0 2px var(--acid); + top:0; left:0; width:100%; + z-index:100; padding:8px 0 0; + display:flex; flex-direction:column; /* stack logo + nav */ + align-items:center; /* center horizontally */ + mix-blend-mode:normal; + font-size:clamp(14px,1.1vw,20px); +} + +footer{ + text-align:center; + padding:3rem 1rem; + font-size:.95rem; + opacity:.7; + font-family:"SpaceMono",monospace; +} + +#contact { + font-family:"SpaceMono",monospace; + max-width:1300px; + margin:0 auto; + padding:9vh var(--gutter-x) 4vh; + line-height:1.4; + color:var(--acid); + text-shadow:0 0 2px var(--acid); + border-bottom:1px solid var(--graphite); +} +#contact form{ + font-family:"SpaceMono",monospace; + max-width:520px; + margin:0 auto; + display:flex;flex-direction:column;gap:1.5rem; + color:var(--acid); + background:var(--glass); + border:1px solid rgba(255,255,255,.06); + box-shadow:0 4px 18px rgba(0,0,0,.4); + backdrop-filter:blur(var(--blur)); + -webkit-backdrop-filter:blur(var(--blur)); + padding:2rem 1.5rem 1.5rem; + border-radius:10px; +} +#contact label{ + font-family:"ArchiveCond",sans-serif; + margin-bottom:.4rem; + font-weight:500; + font-size:1rem; + text-align:left; + color:var(--accent); + letter-spacing:.04em; + text-transform:uppercase; +} +#contact input, +#contact textarea{ + font-family:"SpaceMono",monospace; + padding:.75rem 1rem; + margin-bottom:.5rem; + border:1px solid rgba(255,255,255,.12); + background:rgba(0,0,0,.35); + color:var(--acid); + border-radius:4px; + font-size:1rem; + transition:border-color .2s, box-shadow .2s; + resize:vertical; +} +#contact input:focus, +#contact textarea:focus{ + border-color:var(--accent); + box-shadow:0 0 6px var(--accent); + outline:none; +} +#contact input[type="submit"]{ + font-family:"ArchiveCond",sans-serif; + cursor:pointer; + background:var(--accent); + color:var(--slate); + font-weight:700; + text-transform:uppercase; + letter-spacing:.07em; + border:none; + border-radius:4px; + padding:.85rem 1.5rem; + transition:background .2s,color .2s,box-shadow .2s; + margin-top:.5rem; +} +#contact input[type="submit"]:hover{ + background:var(--acid); + color:var(--graphite); + box-shadow:0 2px 12px rgba(0,0,0,.25); +} +#contact button[type="submit"]{ + font-family:"ArchiveCond",sans-serif; + cursor:pointer; + background:var(--accent); + color:var(--slate); + font-weight:700; + text-transform:uppercase; + letter-spacing:.07em; + border:none; + border-radius:4px; + padding:.85rem 1.5rem; + transition:background .2s,color .2s,box-shadow .2s; + margin-top:.5rem; +} +#contact button[type="submit"]:hover{ + background:var(--acid); + color:var(--graphite); + box-shadow:0 2px 12px rgba(0,0,0,.25); +} + + + +header.nav a{ + transition:opacity .3s +} + +header.nav a:hover{ + opacity:.8 +} + +/* underline kicker */ +header.nav nav a::after{ + content:""; + display:block; + height:2px; + background:var(--accent); + transform:scaleX(0);transition:transform .25s; +} +header.nav nav a:hover::after{transform:scaleX(1);} +@media(max-width:767px){ + header.nav{top:8px;justify-content:space-between;padding:0 var(--gutter);font-size:12px} + header.nav .logo{margin:0;font-weight:bold} + header.nav nav{gap:16px} +} + +/* GRID */ +.grid{ + --cols:4; + display:grid; + grid-template-columns:repeat(var(--cols),1fr); + gap:24px; + padding-top: calc(var(--header-h)*.5 + 2vh); + counter-reset: item; /* Reset Project counter */ +} + +@media(max-width:1024px){.grid{--cols:3}} +@media(max-width:767px){.grid{--cols:2;gap:12px;padding:calc(var(--vh)*5) var(--gutter)}} + +.item:not(.hidden) h2::before{ /* only real cards */ + counter-increment:item; +} + +.item{ + position:relative; + counter-increment:item; + overflow:hidden;cursor:pointer; + opacity:0;transform:translateY(40px); + transition:opacity .6s,transform .6s; +} +.item.loaded{opacity:1;transform:none} + + +/* Item Spans */ + +.item[data-span="banner"] { grid-column: span 3; } +.item[data-span="portrait-xl"]{ grid-row: span 3; } +.item[data-span="wide"] { grid-column: span 2; } +.item[data-span="tall"] { grid-row: span 2; } +.item[data-span="big"] { grid-column: span 2; grid-row: span 2; } + +@media(max-width:767px){ + .item[data-span="wide"], + .item[data-span="tall"], + .item[data-span="big"]{ grid-column: span 2; grid-row: span 1; } +} + +small,code,.mono{font-family:"SpaceMono",monospace} + +.item h2{ + font-family:"ArchiveCond",sans-serif; + letter-spacing:.04em; + font-size:clamp(12px,.9vw,18px); + text-transform:uppercase; + margin-bottom:8px; + line-height:1.1; + display:inline-block; /* so the counter sits inline */ + position:relative; + transition:opacity .5s; /* Only opacity transitions */ +} + +.item h2::before{ + counter-increment:item; + content: counter(item,decimal-leading-zero) " "; + font-family:'Roboto Mono',monospace; + margin-right:.75em; +} + +/* Underline kicker for item h2, styled like nav */ +.item h2::after { + content: ""; + display: block; + height: 2px; + background: var(--accent); + transform: scaleX(0); + transition: transform .25s; + margin-top: 3px; +} +.item:hover h2::after { + transform: scaleX(1); +} + +.thumb{ + background-size:cover;background-position:center; + padding-bottom:62.5%; + transition:opacity .5s,transform .5s +} +.item:hover .thumb { + opacity:.8; + transform:scale(1.04); +} +.item:hover h2{ + opacity:.8; +} + +.content-block{ + max-width:800px; + margin:0 auto; + padding:20vh var(--gutter); + font-family:'Roboto Mono',monospace; + line-height:1.5; +} + +#about{ + font-family:"ArchiveCond",sans-serif; + max-width:1300px; + margin:0 auto; + padding:4vh var(--gutter-x) 1vh; + line-height:1.2; + color:var(--acid); + text-shadow:0 0 2px var(--acid); + border-bottom:1px solid var(--graphite); +} + +#crew{ + font-family:"ArchiveCond",sans-serif; + max-width:1300px; + margin:0 auto; + padding:4vh var(--gutter-x) 4vh; + line-height:1.2; + color:var(--acid); + text-shadow:0 0 2px var(--acid); + border-bottom:1px solid var(--graphite); +} + +/* PIPELINE SECTION */ +.section h2{ + font-family:"ArchiveCond",sans-serif; + font-size:clamp(1.1rem,1.5vw + .5rem,2rem); + text-transform:uppercase; + letter-spacing:.05em; + color:var(--accent); + margin:0 0 2.2rem; + position:relative; +} +.section h2::after{ + content:""; + position:absolute;left:0;bottom:-6px; + width:40px;height:2px; + background:var(--accent); +} + +#pipeline{ + font-family:"ArchiveCond",sans-serif; + padding:4vh var(--gutter-x) 1vh; + line-height:1.2; +} +.pipeline-steps{ + gap:var(--gutter-x); +} +.pipeline-step{ + border-radius:10px; +} + +.pipeline-step { + background: var(--glass); + color: var(--acid); + border-radius: 8px; + box-shadow: 0 4px 18px rgba(0,0,0,.4); + padding: 2rem 1.5rem 1.5rem; + min-width: 220px; + max-width: 320px; + flex: 1 1 220px; + display: flex; + flex-direction: column; + align-items: center; + opacity: 0.97; + transition: transform .25s, box-shadow .25s, opacity .25s; + text-align: center; +} + +.pipeline-step:hover { + transform: translateY(-4px) scale(1.028); + box-shadow: 0 10px 32px rgba(0,0,0,.55); + opacity: 1; +} + +.pipeline-step h3 { + font-family: "ArchiveCond", sans-serif; + font-size: 1.05rem; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 0.5rem; + margin-top: 0; + color: var(--hot); + text-shadow: 0 0 2px var(--acid); + font-weight: 500; +} + +.pipeline-step p, +.pipeline-step small { + font-family: "SpaceMono", monospace; + font-size: 0.92rem; + color: var(--acid); + opacity: 0.85; + margin: 0; + line-height: 1.4; +} + +@media (max-width: 1024px) { + .pipeline-steps { + gap: 1.2rem; + } + .pipeline-step { + padding: 1.2rem 0.7rem 1rem; + min-width: 160px; + max-width: 240px; + } +} + +@media (max-width: 767px) { + #pipeline { + padding: 6vh var(--gutter-x) 2vh; + } + .pipeline-steps { + gap: 0.7rem; + flex-direction: column; + align-items: center; + } + .pipeline-step { + min-width: 0; + max-width: 320px; + width: 100%; + margin: 0 auto; + padding: 1rem 0.5rem 1rem; + } +} + +/* TEAM SECTION */ +#team { + font-family:"ArchiveCond",sans-serif; + max-width: 1300px; + margin: 0 auto; + padding: 4vh var(--gutter-x) 2.5vh; /* ↓ tighter bottom gap */ + line-height: 1.2; + color: var(--acid); + text-shadow: 0 0 2px var(--acid); + border-bottom: 1px solid var(--graphite); +} + +.team-container { + display: flex; + gap: var(--gutter-x); + margin: 3rem 0; /* slightly more spacing between heading and founder images */ + padding: 0; + justify-content: center; + flex-wrap: wrap; +} + +.portrait { + width: clamp(200px, 22vw, 300px); + padding: 0 0 1.25rem; + overflow: hidden; /* allow image to bleed */ + background:var(--glass); + color: var(--acid); + border-radius: 10px; + /* glass-card behaviour */ + /* duplicate here to avoid extra class */ + border:1px solid rgba(255,255,255,.06); + box-shadow:0 4px 18px rgba(0,0,0,.35); + backdrop-filter:blur(var(--blur)); + -webkit-backdrop-filter:blur(var(--blur)); + transition:transform .25s, box-shadow .25s, opacity .25s; + text-decoration: none; + display: flex; + flex-direction: column; + align-items: center; + opacity: 0.96; +} +.portrait:hover { + transform:translateY(-4px) scale(1.03); + box-shadow:0 10px 32px rgba(0,0,0,.55); + opacity: 1; +} +.portrait img { + width: 100%; + height: auto; + border-radius: 0; + object-fit: cover; + margin: 0; + box-shadow: 0 2px 8px rgba(0,0,0,0.18); + background: var(--slate); + display: block; +} +.portrait h3 { + font-family: "ArchiveCond", sans-serif; + font-size: 1.3rem; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 0.25rem; + margin-top: 0; + color: var(--hot); + text-shadow: 0 0 2px var(--acid); + font-weight: 500; + text-align: center; +} +.portrait p { + font-family:"ArchiveCond",sans-serif; + font-size: 1rem; + color: var(--acid); + opacity: 0.85; + text-align: center; + margin: 0; + line-height: 1.4; +} + +@media (max-width: 1024px) { + .team-container { + gap: 1.5rem; + } + .portrait { + width: 180px; + padding: 1rem 0.5rem 1rem; + } + .portrait img { + width: 120px; + height: 120px; + } +} + +@media (max-width: 767px) { + #team { + padding: 6vh var(--gutter-x) 2vh; + } + .team-container { + gap: 1rem; + } + .portrait { + width: 100%; + max-width: 320px; + margin: 0 auto; + padding: 1rem 0.5rem 1rem; + } + .portrait img { + width: 100px; + height: 100px; + } +} + +header.social social a { + position: relative; + display: inline-block; + transition: opacity .3s; +} +header.social social a::after { + content: ""; + display: block; + height: 2px; + background: var(--acid); + transform: scaleX(0); + transition: transform 0.25s cubic-bezier(.4,0,.2,1); + margin-top: 2px; +} +header.social social a:hover::after { + transform: scaleX(1); +} + +/* -------- GLOBAL GLASS CARD -------- */ +.glass-card{ + background:var(--glass); + border:1px solid rgba(255,255,255,.06); + box-shadow:0 4px 18px rgba(0,0,0,.4); + backdrop-filter:blur(var(--blur)); + -webkit-backdrop-filter:blur(var(--blur)); + transition:transform .25s, box-shadow .25s, opacity .25s; +} +.glass-card:hover{ + transform:translateY(-4px) scale(1.025); + box-shadow:0 10px 32px rgba(0,0,0,.55); +} + +/* -------- SECTION HEADING -------- */ +.content-block h2{ + font-family:"ArchiveCond",sans-serif; + font-size:clamp(1.1rem,1.5vw + .5rem,2rem); + text-transform:uppercase; + letter-spacing:.05em; + color:var(--accent); + margin:0 0 2.2rem; + position:relative; +} +.content-block h2::after{ + content:""; + position:absolute;left:0;bottom:-6px; + width:40px;height:2px; + background:var(--accent); +} + +/* ===== NAV accent underline ===== */ +header.nav nav a::after{ + background:var(--accent); +} + +/* ===== GRID card underline ===== */ +.item h2::after { + background: var(--accent); +} + +/* ===== PORTRAITS ===== */ +.portrait { + width: clamp(200px, 22vw, 300px); + padding: 0 0 1.25rem; + overflow: hidden; /* allow image to bleed */ + background:var(--glass); + color: var(--acid); + border-radius: 10px; + /* glass-card behaviour */ + /* duplicate here to avoid extra class */ + border:1px solid rgba(255,255,255,.06); + box-shadow:0 4px 18px rgba(0,0,0,.35); + backdrop-filter:blur(var(--blur)); + -webkit-backdrop-filter:blur(var(--blur)); + transition:transform .25s, box-shadow .25s, opacity .25s; + text-decoration: none; + display: flex; + flex-direction: column; + align-items: center; + opacity: 0.96; +} +.portrait:hover { + transform:translateY(-4px) scale(1.03); + box-shadow:0 10px 32px rgba(0,0,0,.55); + opacity: 1; +} +.portrait img { + width: 100%; + height: auto; + border-radius: 0; + object-fit: cover; + margin: 0; + box-shadow: 0 2px 8px rgba(0,0,0,0.18); + background: var(--slate); + display: block; +} +.portrait h3 { + font-family: "ArchiveCond", sans-serif; + font-size: 1.3rem; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 0.25rem; + margin-top: 0; + color: var(--hot); + text-shadow: 0 0 2px var(--acid); + font-weight: 500; + text-align: center; +} +.portrait p { + font-family:"ArchiveCond",sans-serif; + font-size: 1rem; + color: var(--acid); + opacity: 0.85; + text-align: center; + margin: 0; + line-height: 1.4; +} + +@media (max-width: 1024px) { + .team-container { + gap: 1.5rem; + } + .portrait { + width: 180px; + padding: 1rem 0.5rem 1rem; + } + .portrait img { + width: 120px; + height: 120px; + } +} + +@media (max-width: 767px) { + #team { + padding: 6vh var(--gutter-x) 2vh; + } + .team-container { + gap: 1rem; + } + .portrait { + width: 100%; + max-width: 320px; + margin: 0 auto; + padding: 1rem 0.5rem 1rem; + } + .portrait img { + width: 100px; + height: 100px; + } +} + +header.social social a { + position: relative; + display: inline-block; + transition: opacity .3s; +} +header.social social a::after { + content: ""; + display: block; + height: 2px; + background: var(--acid); + transform: scaleX(0); + transition: transform 0.25s cubic-bezier(.4,0,.2,1); + margin-top: 2px; +} +header.social social a:hover::after { + transform: scaleX(1); +} + +/* ===== PIPELINE, FAQ, PROJECT GLASS ===== */ +.faq-list details, +.project-section{ + background:var(--glass); + border:1px solid rgba(255,255,255,.06); + box-shadow:0 4px 18px rgba(0,0,0,.38); + backdrop-filter:blur(var(--blur)); + -webkit-backdrop-filter:blur(var(--blur)); +} + +/* Contact info */ +.contact-info{ + margin:2em 0 4vh;text-align:center;font-size:1rem;opacity:.7; + font-family:"SpaceMono",monospace; +} +.contact-info a{color:var(--accent);} + +/* === BACK TO TOP BUTTON === */ +.back-to-top { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; + pointer-events: none; + transform: translateY(20px); + transition: opacity .3s, transform .3s, background .3s; + + /* Glass card style */ + background: var(--glass); + border: 1px solid rgba(255,255,255,.06); + backdrop-filter: blur(var(--blur)); + -webkit-backdrop-filter: blur(var(--blur)); +} + +.back-to-top.visible { + opacity: .8; + pointer-events: auto; + transform: translateY(0); +} + +.back-to-top:hover { + opacity: 1; + background: var(--accent); +} + +.back-to-top svg { + width: 24px; + height: 24px; + stroke: var(--accent); + transition: stroke .3s; +} + +.back-to-top:hover svg { + stroke: var(--slate); +} + +/* === PAGE LOADER === */ +#loader-overlay{ + position:fixed;inset:0; + background:rgba(0,0,0,.85); + backdrop-filter:blur(6px); + display:flex;align-items:center;justify-content:center; + z-index:9999; + transition:opacity .6s; +} +#loader-overlay.hide{opacity:0;pointer-events:none;} +.spinner{ + width:72px;height:72px; + border:6px solid rgba(255,255,255,.15); + border-top-color:var(--accent); + border-radius:50%; + animation:spin 1s linear infinite; +} +@keyframes spin{to{transform:rotate(360deg);}} + +/* ===== HERO PARALLAX REFINEMENT ===== */ +.hero{ + position:relative; + height:100vh; + margin-top:-15vh; /* Remove negative margin to bring video to top */ + overflow:hidden; + z-index:1; +} +/* Video as moveable box that behaves as background */ +.hero video{ + position:absolute; + top:0; + left:0; + width:100%; + height:120vh; + object-fit:cover; + z-index:-2; + pointer-events:none; + transform:translateY(-100vh); + transition:transform 0.1s ease-out; +} +/* Gradient overlay - separate from video, controlled by scroll */ +.hero::after{ + content:""; + position:absolute; + top:0; + left:0; + width:100%; + height:200vh; /* further extend to mask bottom edge even during video movement */ + pointer-events:none; + background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,1) 100%); + z-index:-1; + opacity:var(--gradient-opacity,100%); + transition:opacity 0.3s; +} + +/* Dynamic about section padding */ +#about.content-block { + margin-top: 15vh; /* Start with large padding */ + max-width: 2000px; + margin-left: auto; + margin-right: auto; + transition: margin-top 0.5s ease-out; +} + +/* When about reaches top, reduce padding */ +#about.content-block.reduced-padding { + margin-top: -50rem; +} + +/* Projects grid spacing */ +#projects.grid { + margin-bottom: 4.5rem; + transition: margin-top 0.5s ease-out; +} + +/* Content that scrolls over the video */ +.content-wrapper { + position: relative; + z-index: 2; + background: transparent; +} + +/* Remove black background from content sections */ +.content-block, .section, main.grid { + background: transparent; + position: relative; + z-index: 2; +} + +/* ===== CONTACT FORM REFINEMENTS ===== */ +.form-message{ + margin-top:1em; + padding:1em; + border-radius:6px; + font-family:"SpaceMono",monospace; + font-size:1.1em; + text-align:center; + display:none; /* initially hidden */ +} +.form-message.success{background:#1a3d1a;color:#b6ffb6;border:1px solid #3c6;} +.form-message.error {background:#3d1a1a;color:#ffb6b6;border:1px solid #c66;} +.honeypot{display:none;} + +/* Form layout helpers */ +.form-row{display:flex;gap:1em;flex-wrap:wrap;} +.form-col{flex:1 1 120px;min-width:120px;} + +@media(max-width:600px){ + #contact{padding:4vh 8px 2vh;font-size:1rem;} + #contact form label, + #contact form input, + #contact form textarea{font-size:1em;} +} + + + diff --git a/directory-layout.txt b/directory-layout.txt new file mode 100644 index 0000000..378b7aa --- /dev/null +++ b/directory-layout.txt @@ -0,0 +1,259 @@ +BiohazardWeb/ +├─ index.html +├─ css +│ ├─ styles.css +├─ fonts/ +├─ images/ +├─ js +│ ├─ main.js +├─ projects/ +│ ├─ 01_PROJ/ +│ │ ├─ Videos/ +│ │ ├─ thumbnail.jpg +│ │ ├─ info.txt +│ │ ├─ credits.txt +├─ reel/ +│ ├─ Reel_July_2025.mp4 +├─ written/ +│ ├─ about_us.txt + +A few notes: +1. The blurring on the header looks weird, maybe add a black gradient to it so things fade as it scrolls past them? +1.1 the inversion of the text looks weird +2. when I hover over the projects I'd like if the text on them transformed with them +2.2 the counter is offset, there are only two projects on the page currently and its starting at 02 and skipping 03 and going straight to 04 for the second One +3. I'd like if the about section had more room on the left and right +3.1 the old about is still at the bottom of the page and needs to be removed +4. I'd like to add a case studies section (added to nav as well) +4.1 I had a case studies section at one point, you can get an idea of it from this: + +HTML + /*================================================== + CASE STUDIES + ==================================================*/ + #case-studies { + text-align: center; + padding-bottom: 1rem; + } + .case-studies-container { + display: flex; + gap: 2.5rem; + justify-content: center; + flex-wrap: wrap; + } + .case-study { + flex: 0 0 404px; + background: var(--box-bg); + border: none; /* Remove border for minimalism */ + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + padding: 1rem; + border-radius: 8px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + aspect-ratio: 404 / 316; + } + .case-study:hover { + transform: translateY(-8px) scale(1.02); /* Slight zoom */ + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); + } + + +

CASE STUDIES

+ +

+ +5. I think it would also be nice to have a section dedicated to the founders, I had a previous version on an older version of the sight, +it would look good right above contact, heres an example: + +/*================================================== + THE CREW + ==================================================*/ + #team { + max-width: 1200px; + margin: 0 auto 12rem; + text-align: center; + } + .team-container { + display: flex; + gap: 2rem; + justify-content: space-evenly; + align-items: center; + } + #team .team-container a.portrait { + display: block; + width: 350px; + height: 400px; + text-decoration: none; + color: inherit; + background: var(--box-bg); + padding: 1rem; + border-radius: 8px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + } + #team .team-container a.portrait:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + } + #team .team-container a.portrait img { + width: 200px; + height: 200px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 1rem; + border: 3px solid var(--accent); + transition: border-color 0.3s ease; + } + #team .team-container a.portrait:hover img { + border-color: var(--hover-accent); /* Change border on hover */ + } + #team .team-container a.portrait h3 { + font-size: 1.6rem; + font-weight: 700; + margin-bottom: 0.75rem; + color: var(--accent); + } + #team .team-container a.portrait p { + font-size: 1rem; + font-style: italic; + opacity: 0.85; + } + + +