403 lines
20 KiB
HTML
403 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kleinpanic</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
/* ASCII art */
|
|
.ascii-art-left, .ascii-art-right {
|
|
position: fixed;
|
|
opacity: 0.15;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Position the ASCII art */
|
|
.ascii-art-left {
|
|
left: 0;
|
|
top: 0;
|
|
transform: scale(0.4); /* Smaller scale */
|
|
}
|
|
|
|
.ascii-art-right {
|
|
right: 0;
|
|
top: 0;
|
|
transform: scale(0.6); /* Smaller scale */
|
|
}
|
|
|
|
/* Center the main content */
|
|
.ascii-header, .ascii-table, .ascii-banner {
|
|
z-index: 10;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ASCII Art Header */
|
|
.ascii-header pre {
|
|
font-size: 14px;
|
|
background: linear-gradient(135deg, #ff4081, #ff8c00, #ffd700, #00fa9a, #1e90ff, #ff4081);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
animation: gradient-animation 6s ease infinite;
|
|
height: 125px;
|
|
}
|
|
|
|
/* Gradient animation for the header */
|
|
@keyframes gradient-animation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
color: #ff4081;
|
|
font-size: 22px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
/* Table and Banner styling */
|
|
.ascii-table pre, .ascii-banner pre {
|
|
font-size: 16px;
|
|
color: #f0f0f0;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
a {
|
|
color: #1e90ff;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #000000;
|
|
transform: scale(1.1);
|
|
}
|
|
/* Navigation containers */
|
|
.nav-container {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 10px auto;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-container:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.nav-title {
|
|
color: #ff4081;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ASCII lines in containers */
|
|
.ascii-line {
|
|
border: 0;
|
|
height: 1px;
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
|
|
}
|
|
|
|
/* Responsive tweaks for small screens */
|
|
@media (max-width: 768px) {
|
|
.ascii-art-left, .ascii-art-right {
|
|
display: none; /* Hide the ASCII art for smaller screens */
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ASCII Art Background -->
|
|
<div class="ascii-art-left">
|
|
<pre>
|
|
....................................................................................................
|
|
....................................................................................................
|
|
....................................................................................................
|
|
....................................................................................................
|
|
..........................................=..#%#....................................................
|
|
.....................................-###%#%%#%%%%#==*%##%%#%%#.....................................
|
|
.................................#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%=...............................
|
|
.............................-%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%##......................
|
|
..........................##%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#.%...................
|
|
........................%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%................
|
|
.....................%%%%%%%%%%%%%%%%%%%%%%%%=..=............-#%%%#%%%%%%%%%%%%%%%%%%%..............
|
|
..................:%#%%%%%%%%%%%%%%%%%%%%...........................=%%%%%%%%%%%%%%%%%#%............
|
|
................=#%%%%%%%%%%%%%%%%%%+...................................%%%%%%%%%%%%%%%%%%..........
|
|
...............%%%%%%%%%%%%%%%%%-..........................................%%%%%%%%%%%%%%%%%........
|
|
.............#%%%%%%%%%%%%%%%:...............................................%%%%%%%%%%%%%%%%.......
|
|
............%%%%%%%%%%%%%%%##..................................................%%%%%%%%%%%%%%%#.....
|
|
...........#%%%%%%%%%%%%:.......................................................=#%%%%%%%%%%%%#%....
|
|
..........%%%%%%%%%%%#............................................................%%%%%%%%%%%%%%#...
|
|
...#.....%%%%%%%%%%+...............................................................%%%%%%%%%%%%%#*..
|
|
........%%%%%%%%%*..................................................................%%%%%%%%%%%##...
|
|
......%%%%%%%%%%.....................................................................%#%%%%%#...*%..
|
|
.....%%%%%%%%%........................................................................%%%%%%%%%..%..
|
|
....%%%%%%%%#.....................................:%%%%%#%%%%%%%.......................%%%%%%%%.....
|
|
#...%%%%%%%%%..................................#%%%%%%...........%#:...................%%%%%%%%%....
|
|
...%%%%%%%%%.................................%#%%%...................*..................%%%%%%#=...-
|
|
..%%%%%%%%%.................................%%%.........................................%%%%%%%:....
|
|
..%%%%%%%%................................#%%-..........................................%%%%%%%%....
|
|
.%%%%%%%%................................%%%............................................%%%%%%%%....
|
|
.%%%%%%%................................#%%.............................................%%%%%%%#....
|
|
.%%%%%%%...............................##%..............................................%%%%%%%%%...
|
|
.%%%%%%%..............................=%%%................................%.............%%%%%%%#....
|
|
.%%%%%%%..............................%%%.................................:.............%%%%%%#%....
|
|
.%%%%%%-..............................%%%...............................................+#%%%#......
|
|
.%%%%%%...............................%%%#..............................................#%%%%%......
|
|
.%%%%%%...............................%%%%.............................:................#%%%%==.:...
|
|
.%%%%%%...............................%%%%............................=................%%%%%%.......
|
|
.%%%%%%................................%%%%...........................#..............%%#%%%%........
|
|
.#%%%%%................................%%%%%........................................%%%%#%%.........
|
|
.%%%%%%.................................#%%##..............#%%%%....................#%%%=.*.........
|
|
.%%%%%%-.................................%#%%#....................................%%%%%%............
|
|
.%%%%%#%.............................%.....%%%%:................................%%#%%%.%............
|
|
.=%%%%%%+.............................%.*...%#%%%.............................%%%%%#................
|
|
..%%%%%%...............................=..#...%%%##%......................#%%%%%%#..................
|
|
..#%%%%%%...................................=%..-#%%%%%+..............*##%%%%%##....................
|
|
...#%%%%%.....................................%#-..%%%%%%%%%%%%%%%%%%%%%%%%#:.......................
|
|
...%%%%%%%.......................................%%%...#%%%%%%%%%%%%%%#=............................
|
|
....%%%%%%%.........................................:%%.............................................
|
|
....%#%%%%%#%#%............................................#%%%%%-..................................
|
|
.....%%%%%%%%%%#....................................................................................
|
|
......%%%%%%%%#.%...................................................................................
|
|
.......%%%%%%%%%....................................................................................
|
|
.......:#%%%%%%%%...................................................................................
|
|
........:%%%%%%%%%..................................................................................
|
|
..........%%%%%%%#..................................................................................
|
|
...........%%%%%%%%.................................................................................
|
|
............%%%%%%%#................................................................................
|
|
.............#%%%%%%%-..............................................................................
|
|
...............%%%%%%%%.............................................................................
|
|
................%%%%%%%%%...........................................................................
|
|
..................%%%%%%%%..........................................................................
|
|
....................%%%%%%%.........................................................................
|
|
......................%%%%#%%%......................................................................
|
|
........................%%%%%%#%....................................................................
|
|
..........................%#%%%%##..................................................................
|
|
............................:#%%%%##................................................................
|
|
...............................+%%%%%%%-%...........................................................
|
|
...................................%%%%%%%%.........................................................
|
|
.......................................%%%%%%.......................................................
|
|
............................................#%%#%%*.................................................
|
|
....................................................................................................
|
|
....................................................................................................
|
|
....................................................................................................
|
|
....................................................................................................
|
|
</pre>
|
|
</div>
|
|
<div class="ascii-art-right">
|
|
<pre>
|
|
|
|
|
|
..... .... ..... ..... .... ..... .... .... ..... .... ..... .
|
|
..... .... ..... ..... .... ..... .... .... ..... .... ..... .
|
|
.... ..... ..... .... ..... ..:+*****##*- ..... .... ..... ..... ....
|
|
.... ..... ..... .:.. ..... +===+**#%%%%%%##*-..... .:.. ..... ..... ....
|
|
.... ..... ..... .... ..... +=--=+*#%%%%%%%%%%%##*... .... ..... ..... ....
|
|
..... .... ..... ..... .==:-=+*#%%%%%%%%%%%%%%#*- .... ..... .... ..... .
|
|
..... .... ..... ..... .+===+**#%%%%%%%%%%%%%%%%%#-.... ..... .... ..... .
|
|
.... ..... ..... .... ...+==++*#%%%%%%%%%%%%%%@%%%%%#. .... ..... ..... ....
|
|
.... ..... ..... .... ..++++**#%%%%%%%%%%%%%%%%%@%%%## .... ..... ..... ....
|
|
..... .... ..... ..... ++++*#%%%%%%%%%###%%%%%%%%%%%#... ..... .... ..... .
|
|
..... .... ..... ..... ++*###%%%%%@%%%%%%+*%%%%%%%%%#... ..... .... ..... .
|
|
..... .... ..... ..... **..:-%%%%%%%@@:::::==%%%@%%%#... ..... .... ..... .
|
|
.... ..... ..... .... . *:.:::-#@%@@%@...=+::=+@%%%%%#. .... ..... ..... ....
|
|
.... ..... ..... .... . *..-%%#-@@%%%:.++@@@:-=%@%@%%#. .... ..... ..... ....
|
|
..... .... ..... ..... *#.+%@%-@%%@%::#@@@@-=+%@%@%%#... ..... .... ..... .
|
|
..... .... ..... ..... *#=.##*:---+==-%##%-=+@@%%%%%#... ..... .... ..... .
|
|
.... ..... ..... .... ..*#%%:::::----------=+@@@@@@%%#. .... ..... ..... ....
|
|
.... ..... ..... .... ..**:::::::----------=+++@@%@%%%# .... ..... ..... ....
|
|
.... ..... ..... .... ..*:::::::---------==+*#*@%%%%%%# .... ..... ..... ....
|
|
..... .... ..... ..... *#=-::::------===+#***#@%##%%%%#. ..... .... ..... .
|
|
..... .... ..... .....+*%%=++====+++*#*****#%@%#*+#%%%#* ..... .... ..... .
|
|
.... ..... ..... .... .*#%%::=++++****#**###***%%*=*#%%%#*... ..... ..... ....
|
|
.... ..... ..... .... .*#%%=::::-=+************+%%#*+*#%%%##.. ..... ..... ....
|
|
..... .... ..... ...*#%%@...::::-==++++++++=+=-@%%###%%%%#* ..... .... ..... .
|
|
..... .... ..... ..**%%@-.....::::--==========-:@%%%%%@@%%#*-.... .... ..... .
|
|
..... .... ..... .*#%%@%........:::::----=---:::+@@@@@@@@%%#**... .... ..... .
|
|
.... ..... ..... ....*#%%@@............:::::::::::::.#@@@@@@@@@%##*...... ..... ....
|
|
.... ..... ..... ...*#%%@@...................::.......#@@@@@@@@@%##*..... ..... ....
|
|
..... .... ..... .*#%%@@............................:.%%%%%@@@@@%%#*- .... ..... .
|
|
..... .... ..... *#%%@@........... ................#%%%%%@@@@%%##* .... ..... .
|
|
.... ..... ..... .*#%%@%... . . .....:..:::%###%%@@@@@%###. ..... ....
|
|
.... ..... ..... .*#%@@=.... . .........::::%####%%@@@@%### ..... ....
|
|
.... ..... ..... .*#%@@:..... ........:::::%#**#%@@@@@%### ..... ....
|
|
..... .... .:*#%%@::..... ......::::::%*+*#%@@@@@%#**.. ..... .
|
|
..... .... -*#%%%=::.... . ....::::::::#*=+#%@@@@%%#**. ..... .
|
|
.... ..... ...-*#%%##-::.... .. ......:::-:::#*+=*%%@@@@%%#**..... ....
|
|
.... ..... ..:+#%#**-:::... ... .....::::---:#*++%%@@@@@%#*+..... ....
|
|
..... .... +*%%*+#--::... ... ......::::----%#**%@@@@@@%%#*+ ..... .
|
|
..... .... =+#%#++*--::.... .... .....::::-----####%@@@@@@@%#*+ ..... .
|
|
..... .... =*#%#+=+=-::.... ..... ......:::------#%%%@@@@@@@@%#*+ ..... .
|
|
.... ..... .+*#%%*=+=--::.... ..... ......:::---===%%%@@@@@@@@%%#*+.... ....
|
|
.... ..... .=*#%@#++==-:::... . ....... ........::---====@@=+***#*%@%%*+:.... ....
|
|
..... .... :====#%**+=--::.... . ........ .........::::--======*##%%@@@%%%#*+ ..... .
|
|
..... ....------=+%#*#==-::................ ........::::---=====*#%@@@@@@@@@%# ..... .
|
|
.... ..... :--------==+@%##==-::......................:::::-======+#%@@@@@@@@@@@#*++... ....
|
|
.... ......:-----------=+@@%%%=--:::.................:::::--======-=#%@@@@@@@@@@#**+=... ....
|
|
........::::---------------=+@@@%%@==--:::::::::....:.:::::---======----=#@@@@@@%#*+*+++-...........
|
|
.-=---------------------=+%@@@@@%==--::::::::::::::::---=====--=-----==+*++#*++++++++...... .
|
|
.-----------------------==+*@@@@@@*===--::::::::::--=-=====+=-=-------==============++=.... .
|
|
.... ------------------------==+*@@@@@%*++==--------=-=======+++@:-----------==============+: ....
|
|
.... :------------------------==+*@@@%##**++==============++++@@@:-=-------===============+=++:....
|
|
.:-------------------------==+*@%%%##**++++=====++++++++@@@@@-==------==================++++ .
|
|
.:---------=-==-==---------===++%@%%##***++++++++++++%@@@@@@@-=-=---=================++++**. .
|
|
.....-=-------===========-------===++*@@@@@#*+++++++#@@@@@@@@@@@===-=-================+=+++*+.......
|
|
.....==------=-==============--=====++*@@@@@@@@@@@@@@@@@@@@@@@%%-==---=============+++++**. ....
|
|
....:+==-=-=-==================-=-==+++*%%@@@@@@@@@@@@@@@@%%%%%#-=-=---===========++++*.... ....
|
|
..=+============================+++*#%%%%%%@%%@%%%%%%%%%*: -===---=-=======++++*+. ..... .
|
|
..... +++++=+++================+++#... .--:. .... -=====--=======+++*.... ..... .
|
|
.... ..... ..=*++++++=======+++** ..... .... ....==========++++**.. ..... ....
|
|
.... ..... ..... .**+++++++++=.. ..... .... .....+======++++*-.... ..... ....
|
|
..............................-++=.................................=*++***+.........................
|
|
..... .... ..... ..... .... ..... .... .... ..... .... ..... .
|
|
..... .... ..... ..... .... ..... .... .... ..... .... ..... .
|
|
</pre>
|
|
</div>
|
|
<a href="/art">
|
|
<!-- ASCII Art Header -->
|
|
<div class="ascii-header">
|
|
<pre>
|
|
_ ___ _ _____ _
|
|
| |/ / | (_) | __ \ (_)
|
|
| ' /| | ___ _ _ __ | |__) |_ _ _ __ _ ___
|
|
| < | |/ _ \ | '_ \| ___/ _` | '_ \| |/ __|
|
|
| . \| | __/ | | | | | | (_| | | | | | (__
|
|
|_|\_\_|\___|_|_| |_|_| \__,_|_| |_|_|\___|
|
|
</pre>
|
|
<!-- subheader -->
|
|
<pre>
|
|
_____ _ _ ___ _ ___
|
|
|_ _| |_ ___| |/ / |___(_)_ _ | _ \__ _ __ _ ___
|
|
| | | ' \/ -_) ' <| / -_) | ' \| _/ _` / _` / -_)
|
|
|_| |_||_\___|_|\_\_\___|_|_||_|_| \__,_\__, \___|
|
|
|___/
|
|
</pre>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Navigation Section for Projects -->
|
|
<div class="nav-container">
|
|
<a href="/projects">
|
|
<div class="nav-title">Projects</div>
|
|
<pre>
|
|
+ ------------------------------------------------------------ +
|
|
| Check out all of my open-source, and licenced, projected. |
|
|
| I do a little bit of everything, or I try to, but I love low |
|
|
| level coding, system interactions, scripting, things of that |
|
|
| nature. All open-source, personal code. MIT Open sourced. |
|
|
+ ------------------------------------------------------------ +
|
|
</pre>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Navigation Section for Blog -->
|
|
<div class="nav-container">
|
|
<a href="/blog">
|
|
<div class="nav-title">Blog</div>
|
|
<pre>
|
|
+ ------------------------------------------------------------ +
|
|
| Read, or even subscribe to my blogs. Includes my thoughts on |
|
|
| Neuro, Linux, my coding projects, and other topics! Blogs |
|
|
| include tutorials, insights, and more! |
|
|
+ ------------------------------------------------------------ +
|
|
</pre>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Navigation Section for Contact -->
|
|
<div class="nav-container">
|
|
<a href="/contact">
|
|
<div class="nav-title">Contact</div>
|
|
<pre>
|
|
+ ------------------------------------------------------------ +
|
|
| Reach out to me, learn about my socials, and get in touch! |
|
|
| Discuss open-source projects, or tell me about an issue with |
|
|
| a project of mine! I woud love to discus improvements to my |
|
|
| code, and future project ideas. |
|
|
+ ------------------------------------------------------------ +
|
|
</pre>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Navigation Section for Monitor -->
|
|
<div class="nav-container">
|
|
<a href="/monitor">
|
|
<div class="nav-title">Monitor</div>
|
|
<pre>
|
|
+ ------------------------------------------------------------ +
|
|
| This page will feature project monitoring tools and stats. |
|
|
| Under maintenance, coming soon! |
|
|
+ ------------------------------------------------------------ +
|
|
</pre>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Navigation Section for About Me -->
|
|
<div class="nav-container">
|
|
<a href="/about">
|
|
<div class="nav-title">About Me</div>
|
|
<pre>
|
|
+ ------------------------------------------------------------ +
|
|
| A page about Klein Panic. Learn about me, and background, my |
|
|
| hobbies, my skillies, and the projects that inspire me. |
|
|
+ ------------------------------------------------------------ +
|
|
</pre>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
</body>
|
|
</html> |