Initial commit: AI topics static site
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
node_modules/
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
# ai-topics
|
||||||
|
|
||||||
|
A simple static HTML site providing a short overview of core Artificial
|
||||||
|
Intelligence topics: Machine Learning, Deep Learning, Natural Language
|
||||||
|
Processing, Computer Vision, and AI Ethics.
|
||||||
|
|
||||||
|
## Files
|
||||||
|
|
||||||
|
- `index.html` — the page content
|
||||||
|
- `styles.css` — the styling
|
||||||
|
|
||||||
|
## View locally
|
||||||
|
|
||||||
|
Just open `index.html` in your browser, or run a tiny static server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m http.server 8000
|
||||||
|
```
|
||||||
|
|
||||||
|
Then visit http://localhost:8000.
|
||||||
|
|
||||||
|
## Publish
|
||||||
|
|
||||||
|
Push to Gitea and enable the repository's static site / Pages feature, or host
|
||||||
|
the files on any static hosting provider.
|
||||||
+91
@@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>AI Topics</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Artificial Intelligence</h1>
|
||||||
|
<p class="tagline">A simple overview of the core topics shaping modern AI.</p>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#machine-learning">Machine Learning</a>
|
||||||
|
<a href="#deep-learning">Deep Learning</a>
|
||||||
|
<a href="#nlp">NLP</a>
|
||||||
|
<a href="#computer-vision">Computer Vision</a>
|
||||||
|
<a href="#ethics">Ethics</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<section id="intro" class="section">
|
||||||
|
<h2>What is AI?</h2>
|
||||||
|
<p>
|
||||||
|
Artificial Intelligence (AI) is the field of computer science focused on
|
||||||
|
building systems that can perform tasks typically requiring human
|
||||||
|
intelligence — such as reasoning, perception, language
|
||||||
|
understanding, and decision making.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="machine-learning" class="section">
|
||||||
|
<h2>Machine Learning</h2>
|
||||||
|
<p>
|
||||||
|
Machine Learning (ML) is a subset of AI where systems learn patterns
|
||||||
|
from data instead of being explicitly programmed. Common approaches
|
||||||
|
include supervised, unsupervised, and reinforcement learning.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Supervised learning:</strong> learns from labeled examples.</li>
|
||||||
|
<li><strong>Unsupervised learning:</strong> finds structure in unlabeled data.</li>
|
||||||
|
<li><strong>Reinforcement learning:</strong> learns by trial, error, and reward.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="deep-learning" class="section">
|
||||||
|
<h2>Deep Learning</h2>
|
||||||
|
<p>
|
||||||
|
Deep Learning uses multi-layered neural networks to model complex
|
||||||
|
patterns in large datasets. It powers many state-of-the-art results in
|
||||||
|
image, speech, and text tasks.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="nlp" class="section">
|
||||||
|
<h2>Natural Language Processing</h2>
|
||||||
|
<p>
|
||||||
|
Natural Language Processing (NLP) enables machines to understand,
|
||||||
|
interpret, and generate human language. Applications include
|
||||||
|
translation, summarization, chatbots, and large language models (LLMs).
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="computer-vision" class="section">
|
||||||
|
<h2>Computer Vision</h2>
|
||||||
|
<p>
|
||||||
|
Computer Vision lets computers derive meaning from images and video.
|
||||||
|
Typical tasks include classification, object detection, and segmentation.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="ethics" class="section">
|
||||||
|
<h2>AI Ethics</h2>
|
||||||
|
<p>
|
||||||
|
Responsible AI considers fairness, transparency, privacy, accountability,
|
||||||
|
and the societal impact of deployed systems. Designing for safety and
|
||||||
|
bias mitigation is essential as AI adoption grows.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 AI Topics · Built as a simple HTML project.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+99
@@ -0,0 +1,99 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0f172a;
|
||||||
|
--surface: #1e293b;
|
||||||
|
--text: #e2e8f0;
|
||||||
|
--muted: #94a3b8;
|
||||||
|
--accent: #38bdf8;
|
||||||
|
--border: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 4rem 0 2.5rem;
|
||||||
|
background: radial-gradient(1200px 400px at 50% -10%, #1e3a8a 0%, transparent 60%), var(--surface);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
margin: 0 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0.35rem 0.7rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(56, 189, 248, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 2.25rem 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section p {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section ul {
|
||||||
|
color: var(--muted);
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section ul li {
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section ul strong {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 1.5rem 0 2.5rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user