Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
Comment thread
RishiByte marked this conversation as resolved.
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload entire repository
path: '.'
Comment thread
RishiByte marked this conversation as resolved.
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v5
Comment thread
RishiByte marked this conversation as resolved.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
240 changes: 240 additions & 0 deletions 404err.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
<!DOCTYPE html><html class="dark" lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>ERROR 404 - SYSTEM FAILURE</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet">
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-fixed-dim": "#c8c6c5",
"on-primary-fixed-variant": "#93000c",
"on-primary": "#690006",
"surface": "#121414",
"tertiary": "#c8c6c5",
"on-tertiary-container": "#2a2a29",
"secondary": "#c8c6c5",
"surface-dim": "#121414",
"primary": "#ffb4ab",
"on-primary-fixed": "#410002",
"outline": "#ae8883",
"on-surface": "#e3e2e2",
"surface-container": "#1e2020",
"on-secondary-fixed": "#1c1b1b",
"surface-tint": "#ffb4ab",
"error": "#ffb4ab",
"surface-container-lowest": "#0d0e0f",
"primary-fixed": "#ffdad6",
"on-primary-container": "#5c0005",
"surface-container-low": "#1a1c1c",
"primary-fixed-dim": "#ffb4ab",
"on-secondary-container": "#b7b5b4",
"surface-container-high": "#292a2a",
"primary-container": "#ff544b",
"surface-bright": "#383939",
"on-error-container": "#ffdad6",
"background": "#121414",
"on-surface-variant": "#e7bcb8",
"tertiary-container": "#929090",
"on-tertiary-fixed": "#1c1b1b",
"on-error": "#690005",
"secondary-container": "#474746",
"outline-variant": "#5e3f3c",
"on-secondary-fixed-variant": "#474746",
"surface-variant": "#343535",
"on-secondary": "#313030",
"on-tertiary-fixed-variant": "#474646",
"on-background": "#e3e2e2",
"inverse-surface": "#e3e2e2",
"tertiary-fixed-dim": "#c8c6c5",
"error-container": "#93000a",
"on-tertiary": "#313030",
"surface-container-highest": "#343535",
"inverse-primary": "#c00014",
"tertiary-fixed": "#e5e2e1",
"inverse-on-surface": "#2f3131",
"secondary-fixed": "#e5e2e1"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"margin-mobile": "16px",
"gutter": "24px",
"unit": "4px",
"section-gap": "80px",
"container-max": "1280px"
},
"fontFamily": {
"headline-md-mobile": ["Inter"],
"body-base": ["Inter"],
"headline-md": ["Inter"],
"code-sm": ["JetBrains Mono"],
"display-lg": ["Inter"],
"label-mono": ["JetBrains Mono"]
},
"fontSize": {
"headline-md-mobile": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
"headline-md": ["32px", { "lineHeight": "1.2", "fontWeight": "600" }],
"code-sm": ["12px", { "lineHeight": "1.5", "fontWeight": "400" }],
"display-lg": ["56px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"label-mono": ["14px", { "lineHeight": "1.4", "letterSpacing": "0.05em", "fontWeight": "500" }]
}
}
}
}
</script>
<style>
/* Cyber-Terminal Scanlines */
.scanlines {
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
pointer-events: none;
}

/* Blinking Cursor */
.cursor-blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

/* Custom Glow Utility (Tailwind arbitrary values discouraged, using standard CSS for specific effect) */
.glow-active {
box-shadow: 0 0 15px 2px rgba(255, 180, 171, 0.15); /* Subdued primary glow */
}
.glow-button:hover {
box-shadow: 0 0 12px 1px rgba(255, 180, 171, 0.4);
}

/* CRT Flicker */
.crt-flicker {
animation: flicker 0.15s infinite;
}
@keyframes flicker {
0% { opacity: 0.95; }
100% { opacity: 1; }
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex items-center justify-center relative overflow-hidden crt-flicker">
<!-- Ambient Scanlines Overlay -->
<div class="fixed inset-0 scanlines z-50 mix-blend-overlay opacity-30"></div>
<!-- Main Content Canvas -->
<main class="w-full max-w-3xl px-gutter relative z-10 flex flex-col items-center">
<!-- Background Glow Element -->
<div class="absolute inset-0 bg-primary/5 blur-[100px] rounded-full z-0 pointer-events-none"></div>
<!-- Terminal Window Container -->
<div class="w-full bg-surface border border-primary glow-active relative z-10 flex flex-col">
<!-- Terminal Header -->
<div class="flex items-center justify-between px-4 py-2 border-b border-primary bg-surface-container-low">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-sm" style="font-variation-settings: 'FILL' 1;">warning</span>
<span class="font-code-sm text-code-sm text-primary uppercase tracking-widest">System_Alert // CRITICAL</span>
</div>
<div class="flex gap-1">
<div class="w-2 h-2 bg-surface-variant"></div>
<div class="w-2 h-2 bg-surface-variant"></div>
<div class="w-2 h-2 bg-primary animate-pulse"></div>
</div>
</div>
<!-- Terminal Body -->
<div class="p-8 md:p-12 flex flex-col items-start w-full">
<!-- Glitch Header -->
<div class="relative inline-block mb-8 w-full border-l-2 border-primary pl-4">
<h1 class="font-display-lg text-display-lg text-primary tracking-tighter uppercase m-0 leading-none" data-text="ERROR 404">
ERR_404
</h1>
<p class="font-code-sm text-code-sm text-on-surface-variant mt-2 uppercase tracking-widest">
[ STATUS: NODE_OFFLINE ]
</p>
</div>
<!-- Terminal Output -->
<div class="font-code-sm text-code-sm text-on-surface flex flex-col gap-3 mb-10 w-full">
<div class="flex gap-2 opacity-70">
<span class="text-primary">&gt;</span>
<span>Initializing diagnostic sequence... OK</span>
</div>
<div class="flex gap-2 opacity-70">
<span class="text-primary">&gt;</span>
<span>Locating requested vector... FAILED</span>
</div>
<div class="flex gap-2 mt-2">
<span class="text-primary">&gt;</span>
<p class="font-body-base text-body-base text-on-background m-0">
PATH NOT FOUND. The requested node has been decommissioned or moved to a restricted sector.
</p>
</div>
<div class="flex gap-2 mt-4">
<span class="text-primary">&gt;</span>
<span class="text-on-surface-variant">Awaiting user input<span class="cursor-blink text-primary">_</span></span>
</div>
</div>
<!-- Actions -->
<div class="flex flex-col sm:flex-row gap-4 w-full mt-4 border-t border-surface-variant pt-8">
<a class="group flex items-center justify-center gap-2 bg-primary text-on-primary px-8 py-4 rounded-none border border-primary transition-all duration-200 glow-button w-full sm:w-auto" href="./index.html">
<span class="font-label-mono text-label-mono uppercase tracking-widest font-bold">Return_To_Base</span>
<span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
</a>
<button class="group flex items-center justify-center gap-2 bg-transparent text-on-surface px-8 py-4 rounded-none border border-surface-variant hover:border-primary hover:text-primary transition-all duration-200 w-full sm:w-auto">
<span class="material-symbols-outlined text-sm">terminal</span>
<span class="font-label-mono text-label-mono uppercase tracking-widest">View_Logs</span>
</button>
</div>
</div>
<!-- Terminal Footer Decorator -->
<div class="h-1 w-full bg-surface-variant flex">
<div class="h-full bg-primary w-1/4"></div>
</div>
</div>
<!-- Background grid lines for depth -->
<div class="absolute inset-0 pointer-events-none z-0 opacity-10" style="background-image: linear-gradient(to right, #343535 1px, transparent 1px), linear-gradient(to bottom, #343535 1px, transparent 1px); background-size: 40px 40px;"></div>
</main>
<!-- Lightweight JS for atmospheric effect -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const glitchText = document.querySelector('h1[data-text]');
if (!glitchText) return;

const originalText = glitchText.innerText;
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';

// Subtle random character swap occasionally
setInterval(() => {
if (Math.random() > 0.95) {
let newText = originalText.split('');
const indexToGlitch = Math.floor(Math.random() * newText.length);
newText[indexToGlitch] = chars[Math.floor(Math.random() * chars.length)];
glitchText.innerText = newText.join('');

setTimeout(() => {
glitchText.innerText = originalText;
}, 50);
}
}, 100);
});
</script>
</body></html>
53 changes: 41 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

Professional static website for the DemonDie organization.

Designed with Google Stitch, Connected by hands, Styled with TailwindCss.

## Current Project

### Demon Tech Roadmap
Expand All @@ -19,25 +21,52 @@ Demon Tech Roadmap is an open-source platform designed to help learners navigate
- Repository: [github.com/Demon-Die/DemonTechRoadmap](https://github.com/Demon-Die/DemonTechRoadmap)
- Website: [demon-tech-roadmap.vercel.app](https://demon-tech-roadmap.vercel.app/)

## Files

- `index.html` contains the page structure and links.
- `style.css` contains the responsive visual design.
- `assets/demondie-hero.png` is the generated hero image used on the homepage.

## Local Development

This repository is a static website, so there is no Node install or build step required.

1. Start a local web server from the repository root:

```bash
python3 -m http.server 8000
# Clone the repo
git clone https://github.com/Demon-Die/Website.git
cd Website

# No build step – open locally
open index.html # macOS
# or serve with any static server
npx -y serve . # quick local dev server
```
The site relies on the Tailwind CDN, so no npm install is required.

---

## ▶️ Usage
- Open `index.html` in a browser.
- The navigation links (`Home`, `Projects`, `Contributors`, `Community`, `About`) scroll smoothly to their sections.
- Click the **“Join the contributors”** card to open the GitHub organization members page.

---

## 🤝 Contributing
We welcome contributions! To get started:
1. Fork the repository.
2. Create a feature branch (`git checkout -b feat/awesome‑feature`).
3. Make your changes – keep the existing design language consistent.
4. Open a Pull Request describing the improvement.

Please follow the existing code style (Tailwind utility classes, BEM‑like naming, and the custom color palette defined in the `<script id="tailwind-config">`).

---

## 📄 License
Distributed under the **MIT License**. See the `LICENSE` file for details.

---

2. Open `http://localhost:8000` in your browser to preview the site locally.
If port `8000` is already in use, pass a different port number to the command and open the matching localhost URL.
## 📧 Contact & Community
- **Website:** https://derrondie.org (placeholder)
- **GitHub Org:** https://github.com/Demon-Die
- **Discord:** https://discord.gg/4waT35Hxs
Comment thread
RishiByte marked this conversation as resolved.

<div align="center">
<a href="https://github.com/Demon-Die">Made with 💓 by Demon-Die</a>
</div>
*Join us, build together, and make open‑source learning fun!*
Loading
Loading