venus/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
venus
2026-07-24 07:10:18 -05:00
commit 0434835762
14 changed files with 3065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
samples/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Spec Samples Catalog</title>
<style>
body {
background-color: #0d0f12;
color: #e0e6f0;
font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
max-width: 600px;
margin: 80px auto;
padding: 20px;
}
h1 {
font-size: 1.5rem;
border-bottom: 1px solid #2b303b;
padding-bottom: 10px;
margin-bottom: 30px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 20px 0;
padding: 15px;
border: 1px solid #2b303b;
border-radius: 4px;
background-color: #121417;
}
a {
color: #ffb000;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
p {
color: #8a95a5;
font-size: 0.9rem;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Design Spec Samples</h1>
<ul>
<li>
<a href="homepage.html">Sample 1: Developer Homepage (Terminal/Minimalist Spec)</a>
<p>
A premium, dark-mode native developer homepage modeled after modern, high-density terminal setups and IDEs. Adheres strictly to the guidelines: no glassmorphism, no rounded blobs, and pure solid color layouts.
</p>
</li>
<li>
<a href="split-panel.html">Sample 2: Split Panel Layout (ASCII Animation & Scrollable Tiles)</a>
<p>
A dashboard/panel layout with a sticky site nav header, a left panel featuring an animated terminal ASCII character, and a right panel containing a scrollable feed of developer project cards.
</p>
</li>
<li>
<a href="companion.html">Sample 3: Companion Layout (Interactive Daemon & Ultra-Minimal Cards)</a>
<p>
A 50/50 vertical split layout page where the left column contains content cards and the right column houses a persistent, reactive ASCII companion. Employs ultra-minimal borders and discrete state updates.
</p>
</li>
<li>
<a href="document-flow.html">Sample 4: Document Flow Layout (Scroll-Tracker Daemon & Seamless Document Stream)</a>
<p>
A continuous document reading flow that removes 4-sided bounding boxes and master-detail click affordances. Features a fixed left pane with an IntersectionObserver scroll-tracker daemon.
</p>
</li>
<li>
<a href="portfolio.html">Sample 5: River Rooks Portfolio (Single-Page Landing Page)</a>
<p>
A temporary, single-column digital business card and landing page conforming strictly to portfolio-spec.md. Features a 65ch centered flow, 8x8px active status dot, terminal stdout block, active stack tags, and piped link footer.
</p>
</li>
</ul>
</body>
</html>