xamidev/xami.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
xamidev
2025-12-28 18:31:36 +01:00
commit 766f0e0f29
5 changed files with 212 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
VT323-Regular.ttf Normal file
View File

Binary file not shown.

97
index.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid"></div>
<div id="all">
<div id="header" class="box">
<div id="headerContent">
<h1>xami.dev</h1>
</div>
</div>
<div id="page">
<div id="content">
<div class="box" id="cool-stuff">
<div class="header-with-icon">
<h2>Welcome to my garbage stash!</h2>
<span class="icon">⚡</span>
</div>
<img style="margin-top:10px" src="me.png" width="100" height="100">
<p>free software advocate; privacy and cybersecurity enthusiast; low-level development enjoyer.</p>
</div>
<div class="box" id="cool-stuff">
<div class="header-with-icon">
<h2>some of my projects...</h2>
<span class="icon">🚧</span>
</div>
<p>
Nunc ornare convallis nibh. Aliquam id mi tincidunt, gravida elit vitae, vehicula neque. Nullam at eleifend
risus, ac placerat arcu. Morbi faucibus et sem eget ultrices. Mauris scelerisque bibendum arcu, non accumsan
odio semper nec. Sed convallis suscipit tortor, vitae rhoncus massa dapibus volutpat. Sed arcu massa,
tristique nec lorem eu, eleifend pharetra metus. Donec pellentesque augue lacus, fermentum volutpat diam
laoreet vitae. Duis at rhoncus neque. Etiam lobortis ac dui sed elementum. Mauris egestas aliquam tellus,
sed feugiat neque consectetur eu.
</p>
</div>
<div class="box" id="cool-stuff">
<div class="header-with-icon">
<h2>CTF content...</h2>
<span class="icon">🏴‍☠️</span>
</div>
<p>Blah blah blah I'm a hacker!</p>
</div>
</div>
<div id="sideBar" class="box">
<div class="header-with-icon">
<h2>Links</h2>
<span class="icon">🔗</span>
</div>
<ul>
<li>ligma</li>
<li>ballz</li>
<li>china</li>
</ul>
<div class="header-with-icon">
<h2>Bands</h2>
<span class="icon">🥁</span>
</div>
<ul>
<li>System Of A Down</li>
<li>Linkin Park</li>
<li>Slipknot</li>
<li>Pink Floyd</li>
<li>Kino</li>
<li>Radiohead</li>
<li>BMTH</li>
<li>Rammstein</li>
<li>RHCP</li>
<li>RATM</li>
<li>and many others</li>
</ul>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

0
main.js Normal file
View File

BIN
me.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

115
style.css Normal file
View File

@@ -0,0 +1,115 @@
html, body {
height: 100%;
}
body {
margin: 0;
background: black;
font-family: VT323;
color:white;
}
p, li {
font-size: large;
}
@font-face {
font-family: VT323;
src: url(VT323-Regular.ttf);
}
.box {
border: solid 2px #3f3f3f;
border-radius: 2px;
padding: 10px;
margin: 10px;
display: block;
box-sizing: border-box;
background: black;
}
#page {
display: flex;
height: calc(100vh - 30px);
gap: 10px;
}
#content {
flex: 1 1 auto;
min-width: 0;
}
#sideBar {
width: 200px;
flex-shrink: 0;
}
#cool-stuff {
width: 100%;
box-sizing: border-box;
}
#all {
padding:2% 20%;
}
#header {
height: 50px;
display: flex;
align-items: center;
color: #bbbbbb;
}
#headerContent {
width:100%;
text-align: center;
}
/* background animation */
.grid {
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 200%;
pointer-events: none;
z-index: -1; /* behind everything */
background-image:
linear-gradient(90deg, rgba(255, 0, 0, 0.3) 10%, transparent 10%),
linear-gradient(rgba(255, 0, 0, 0.3) 10%, transparent 10%);
background-size: 50px 50px;
animation: moveGrid 10s linear infinite;
}
@keyframes moveGrid {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-300px, -300px);
}
}
.content {
position: relative;
padding: 50px;
text-align: center;
}
/* Align header and icon */
.header-with-icon {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg, #df2929, rgba(0,0,0,0));
}
.header-with-icon h2 {
margin: 0;
}
.header-with-icon .icon {
cursor: pointer;
font-size: 1.2em;
}