feat: Add demo landing page
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
FROM nginx:alpine:latest
|
||||
WORKDIR /usr/share/nginx/html
|
||||
COPY . .
|
||||
CMD [ "nginx", "-g", "daemon off;" ]
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,14 @@
|
||||
services:
|
||||
homepage:
|
||||
container_name: landing
|
||||
volumes:
|
||||
- ./homepage:/usr/share/nginx/html:ro
|
||||
ports:
|
||||
- "8080:80"
|
||||
restart: always
|
||||
networks:
|
||||
- traefik-proxy
|
||||
|
||||
networks:
|
||||
traefik-proxy:
|
||||
external: true
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>forust — terminal landing</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #000000;
|
||||
color: #E6E6E6;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
background: #00FF9C;
|
||||
margin-left: 2px;
|
||||
animation: blink 0.8s infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
50.01%, 100% { opacity: 0; }
|
||||
}
|
||||
.scanline {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(255,255,255,0.03) 0px,
|
||||
rgba(255,255,255,0.03) 1px,
|
||||
rgba(0,0,0,0) 2px
|
||||
);
|
||||
opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-full flex flex-col items-center justify-center text-center p-6">
|
||||
|
||||
<div class="scanline"></div>
|
||||
|
||||
<div id="intro" class="text-xl md:text-2xl">
|
||||
<span class="text-[#00FF9C]">forust@home:</span>~$ whoami
|
||||
<div id="typed" class="inline"></div>
|
||||
<div class="cursor"></div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="opacity-0 transition-all duration-700 mt-10 max-w-xl text-base md:text-lg text-[#9E9E9E]">
|
||||
<p>>> OSINT / Pentesting</p>
|
||||
<p>>> Linux enjoyer</p>
|
||||
<p>>> self-hosting & automation</p>
|
||||
<p class="mt-4">> projects: <span class="text-[#00FF9C]">soon™</span></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const text = " forust";
|
||||
const typed = document.getElementById("typed");
|
||||
const content = document.getElementById("content");
|
||||
let i = 0;
|
||||
|
||||
function type() {
|
||||
if (i < text.length) {
|
||||
typed.textContent += text.charAt(i);
|
||||
i++;
|
||||
setTimeout(type, 120);
|
||||
} else {
|
||||
content.classList.remove("opacity-0");
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(type, 600);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user