README / index.html
mmm
Update index.html
860bbb2 verified
raw
history blame
9.36 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indext Data Lab | Hugging Face Profile</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg-gradient: radial-gradient(at 0% 0%, #e0f2fe 0%, transparent 40%),
radial-gradient(at 100% 0%, #ffedea 0%, transparent 40%),
radial-gradient(at 50% 50%, #f8fafc 0%, transparent 100%);
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.8);
--text-main: #0f172a;
--text-muted: #64748b;
--hf-yellow: #ffbd00;
--accent-blue: #3b82f6;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text-main);
background: #f1f5f9;
background-image: var(--bg-gradient);
background-attachment: fixed;
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2rem 1rem;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(80px, auto);
gap: 12px;
max-width: 1100px;
width: 100%;
}
.tile {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 1.25rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
transition: transform 0.2s ease;
}
.tile:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.85);
}
/* Typography */
.label {
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 6px;
}
.label::before {
content: "";
width: 4px;
height: 4px;
background: var(--accent-blue);
border-radius: 50%;
}
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 0.5rem; }
h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
p { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
b { color: var(--text-main); font-weight: 600; }
/* Custom Tile Layouts */
.hero-tile { grid-column: span 8; grid-row: span 3; justify-content: center; }
.hero-tile h1 { background: linear-gradient(90deg, #0f172a, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hf-tile { grid-column: span 4; grid-row: span 2; background: rgba(255, 255, 255, 0.4); border-left: 4px solid var(--hf-yellow); }
.protocol-tile { grid-column: span 4; grid-row: span 4; }
.phase { margin-top: 1rem; border-left: 2px solid #e2e8f0; padding-left: 0.75rem; }
.phase-title { font-size: 0.75rem; font-weight: 700; color: var(--text-main); }
.phase-content { font-size: 0.7rem; color: var(--text-muted); }
.stack-tile { grid-column: span 5; grid-row: span 3; }
.stack-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }
.stack-item { font-size: 0.7rem; }
.stack-item b { display: block; font-size: 0.75rem; margin-bottom: 2px; }
.stats-tile { grid-column: span 3; grid-row: span 2; text-align: center; justify-content: center; }
.stat-val { font-size: 2rem; font-weight: 800; line-height: 1; display: block; }
.stat-lab { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.location-tile { grid-column: span 3; grid-row: span 1; display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 10px; }
.location-tile b { font-size: 0.8rem; }
/* Buttons */
.btn-group { display: flex; gap: 8px; margin-top: 1.25rem; }
.btn {
padding: 6px 14px; border-radius: 8px; text-decoration: none;
font-size: 0.7rem; font-weight: 700; transition: 0.2s;
border: 1px solid #e2e8f0; background: white; color: var(--text-main);
}
.btn-dark { background: var(--text-main); color: #fff; border: none; }
.btn:hover { background: #f8fafc; border-color: var(--accent-blue); }
/* Tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { font-size: 0.6rem; font-weight: 700; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: var(--text-muted); }
@media (max-width: 900px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.tile { grid-column: span 1 !important; grid-row: auto !important; }
.hero-tile { grid-column: span 2 !important; }
.protocol-tile { grid-column: span 2 !important; }
.stack-tile { grid-column: span 2 !important; }
}
@media (max-width: 600px) {
.bento-grid { grid-template-columns: 1fr; }
.tile { grid-column: span 1 !important; }
}
</style>
</head>
<body>
<div class="bento-grid">
<!-- Hero -->
<div class="tile hero-tile">
<span class="label">Belgrade AI Engineering Studio</span>
<h1>Indext Data Lab</h1>
<p>We bridge the gap between AI research and production reality. Specializing in <b>Generative AI</b>, <b>RAG Architecture</b>, and <b>Autonomous Agents</b> for global organizations.</p>
<div class="btn-group">
<a href="#" class="btn btn-dark">Start Discovery</a>
<a href="#" class="btn">Upwork Profile</a>
</div>
</div>
<!-- Hugging Face Tile -->
<div class="tile hf-tile">
<span class="label">Hugging Face Org</span>
<h2>Open Source</h2>
<p>Fine-tuning small language models (SLMs) and building custom datasets for domain-specific automation.</p>
<div class="tag-row">
<span class="tag">Fine-Tuning</span>
<span class="tag">Llama-3</span>
<span class="tag">Mistral</span>
</div>
</div>
<!-- Location -->
<div class="tile location-tile">
<b>Belgrade, RS</b>
<span></span>
<b>United States</b>
</div>
<!-- Protocol -->
<div class="tile protocol-tile">
<span class="label">The Protocol</span>
<h2>60-Day MVP Cycle</h2>
<div class="phase">
<span class="phase-title">01 Blueprint</span>
<p class="phase-content">Feasibility & stress-testing ideas.</p>
</div>
<div class="phase">
<span class="phase-title">02 Core Build</span>
<p class="phase-content">Alpha deployment on secure infra.</p>
</div>
<div class="phase">
<span class="phase-title">03 Handover</span>
<p class="phase-content">Full IP transfer and market launch.</p>
</div>
</div>
<!-- Capabilities -->
<div class="tile stack-tile">
<span class="label">Core Tech Stack</span>
<div class="stack-list">
<div class="stack-item"><b>Languages</b> Python, Go, TypeScript</div>
<div class="stack-item"><b>AI Frameworks</b> LangChain, PyTorch, RAG</div>
<div class="stack-item"><b>Infrastructure</b> AWS, Docker, Terraform</div>
<div class="stack-item"><b>Databases</b> pgvector, ClickHouse</div>
</div>
<div class="tag-row" style="margin-top: 15px;">
<span class="tag">Computer Vision</span>
<span class="tag">NLP</span>
<span class="tag">SRE</span>
</div>
</div>
<!-- Stats -->
<div class="tile stats-tile">
<span class="stat-val">430+</span>
<span class="stat-lab">Projects</span>
</div>
<div class="tile stats-tile">
<span class="stat-val">20Y</span>
<span class="stat-lab">Experience</span>
</div>
<!-- Transparency -->
<div class="tile" style="grid-column: span 4;">
<span class="label">Ethics & Ownership</span>
<h2>You own the IP</h2>
<p>Hourly model with real-time transparency via Upwork. No locked boxes or black boxes.</p>
</div>
</div>
</body>
</html>