add static site
This commit is contained in:
@@ -63,6 +63,16 @@ services:
|
|||||||
- wordpress
|
- wordpress
|
||||||
restart: always
|
restart: always
|
||||||
|
|
||||||
|
static_site:
|
||||||
|
build: ./requirements/static_site
|
||||||
|
image: static_site:inception
|
||||||
|
container_name: static_site
|
||||||
|
networks:
|
||||||
|
- inception
|
||||||
|
ports:
|
||||||
|
- "8080:80"
|
||||||
|
restart: always
|
||||||
|
|
||||||
networks:
|
networks:
|
||||||
inception:
|
inception:
|
||||||
driver: bridge
|
driver: bridge
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
FROM debian:bookworm-slim
|
||||||
|
|
||||||
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
|
nginx \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
COPY conf/nginx.conf /etc/nginx/sites-available/default
|
||||||
|
COPY html/ /var/www/static/
|
||||||
|
|
||||||
|
RUN rm -f /etc/nginx/sites-enabled/default \
|
||||||
|
&& ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name static.oriabenk.42.fr;
|
||||||
|
|
||||||
|
root /var/www/static;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ =404;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>oriabenk — 42 Student</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="avatar">O</div>
|
||||||
|
<h1>oriabenk</h1>
|
||||||
|
<p class="tagline">Student at 42 School — Systems & Infrastructure</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>About</h2>
|
||||||
|
<p>
|
||||||
|
I'm a 42 School student working through the common core, focused on
|
||||||
|
systems programming, networking, and infrastructure. This page is served
|
||||||
|
as a standalone static site — part of the <strong>Inception</strong>
|
||||||
|
project's bonus scope, running in its own Docker container.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<ul class="skills">
|
||||||
|
<li>C</li>
|
||||||
|
<li>Docker & Docker Compose</li>
|
||||||
|
<li>Linux system administration</li>
|
||||||
|
<li>Networking</li>
|
||||||
|
<li>Shell scripting</li>
|
||||||
|
<li>Git</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>Inception — Project Highlights</h2>
|
||||||
|
<ul class="projects">
|
||||||
|
<li><span class="dot"></span> NGINX with TLSv1.2/1.3, single entrypoint</li>
|
||||||
|
<li><span class="dot"></span> WordPress + php-fpm, no bundled web server</li>
|
||||||
|
<li><span class="dot"></span> MariaDB, isolated in its own container</li>
|
||||||
|
<li><span class="dot"></span> Docker secrets for all credentials</li>
|
||||||
|
<li><span class="dot"></span> Bonus: FTP server on the WordPress volume</li>
|
||||||
|
<li><span class="dot"></span> Bonus: this static site, in plain HTML/CSS/JS</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p id="year"></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
document.getElementById("year").textContent =
|
||||||
|
"© " + new Date().getFullYear() + " oriabenk — served from a static container";
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0f1115;
|
||||||
|
--card: #171a21;
|
||||||
|
--border: #262b36;
|
||||||
|
--text: #e6e8ec;
|
||||||
|
--muted: #9aa3b2;
|
||||||
|
--accent: #5eb1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 24px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
margin: 0 auto 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, var(--accent), #8a6bff);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f1115;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills li {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user