kleinpanic/kleinpanicWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
klein panic
2024-10-20 17:49:24 -04:00
commit 36ab4a789e
33 changed files with 8858 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
views/about.html Normal file
View File

@@ -0,0 +1,393 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - 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;
}
/* ASCII art */
.ascii-art-left, .ascii-art-right {
position: fixed;
opacity: 0.15;
font-size: 12px; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
h2, h3 {
color: #ff4081;
}
.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;
cursor: pointer;
}
.ascii-header pre:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.ascii-table 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;
max-width: 100%;
}
.ascii-banner pre {
font-size: 16px;
color: #f0f0f0;
}
a {
color: #1e90ff;
text-decoration: none;
}
a:hover {
color: #ff4081;
}
.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));
}
.ascii-table:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.01);
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<!-- ASCII Art Background -->
<div class="ascii-art-left">
<pre>
.=@%%%%%%*.
.+%%* -%%#.
.+%%+ -%%#:
.+%%+ -%%%:
.*%%=. :#%#:
.*%%= :#%#-
.#%@- :#%%-
.#%%- :#%%-
.#%%:. .#%%=
+%%: .#%%.
.%% *%=
.%% ...=%-
+%. .+%%%%%%#
*%. .=%%%%%%%%%%.
*%. =%%%%%%%%%%%%%.
*%. .=%%%%%%%%%%%%%%%%.
*%. -%%%%%%%%%%%%%%%%%%%.
*%. -%%%%%%%%%%%%%%%%%%%%%%.
*%. :%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. :%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. .%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. :%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%%+ :++%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%* .%%%%%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%. .%@%%%%%%%%%%%%%%%%%%%%%%%%.
*%. %%%%%%: :%%%%%%%%%%%%%%%%%%%%%.
+%. %%%%%%%#=-: .%%%%%%%%%%%%%%%%%%%%%
.%# %%%%%%%%%%%+ .%%%%%%%%%+%%%%%%%%%%=
-%% %%%%%%%%%%% #%%%%%#+++#%%%%%%%%%*
@%#. %%%%%%* .%%%%%+++#%%%%%%%%%%%.
+%%#. %%%%%%. . #%%%%%#%%%%%%%%%%%%.
=%%%: %%%%%%%%% :%%%%%%%%%%%%%%%#.
=%%%: %%%%%%%%%%%%%%%%%%%%%%%*.
=%%%- %%%%%%%%%%%%%%%%%%%%*
-%%%- %%%%%%%%%%%%%%%%%+.
-%%%- %%%%%%%%%%%%%%=.
:%%%- %%%%%%%%%%%=.
:%%%= -%%%%%%%-
.%%%%%%%%@-.
</pre>
</div>
<div class="ascii-art-right">
<pre>
@@@@@@%#%@@@@@@. :@@@@@@@=
-@@ . :@# @@ @@ +@-
*@: @@@@@@@@@@@ @@% #@. @@@@@ @@ @@@@@@@@@@@@@ @+
@@ :*@@@@@% .. @: @ . @@@@@@ @+
.@ @@@@@+ =@@* :+##++ +@@@@@@#. :@@. @@@@@ @
@# @@@@@. .@. @ +@@@@# %#
@. @@@@@ @ @ @@@@. .@
+: .@@@@. .@ -@+ %@- *@. +@. @ @@@@ =-
@ @@@@. @ @ .-:. @ @= .:. @ @ @@@@ @
@ @@@@@ @ @. -@@@@@@@@@@@@ @@@+@@@:@@@@@@@@. @ :-@@@. :
@ @@@@% @ @# @@@@@@@@@@@@@@@@@ @@ %@-@@@@@@@@% @ @ .@@@@ @
@ %@@@% @ @ @@@@@@@@@@@@@@@@@@@@ @. #@@@@@@@@@@. @ @ @@@@ @
@ @@@@@ @ @. @@@@@@@@@@@@@@@@@@@@@@ @ @.@@@@@@@@@@ @ @ @@@@@ @
@ @@@ %: #@ .@@@@@@@@@@@@@@@@@@@@- @ . %.@@@@@@@@@@@@ := % @@@. @
@ %@@@@@ @ @ @@@@@@@@@@- =% @. @@ -@@@@@@@ @ @ .@@@@% @
=. -@@@: @@ @. @@@@@. @ %@* * %. @@@@. @ .@ @@@ @
@ @@@@@@@ .@@@# .@@@@ @@@@@@ .@@= -@ @@. @ @@@@# :@@@@@@ @
*= @@@@@@ +@@@@@ @. @@@ =: @@. @ @@@@@@% :@@@@@@@@ *=
@. @@@@@@@@@@@=@@@@@+ @@. @ .@. :: + @@@ . @ @@@@@@@@@@@@@@@ =%
@: .@@@@@@@@@@@@@@: @ @ @ @@ .% @@@@@@@@@@@@ @=
.@ @ @@@@@@@@@* @@@@@@@@@ # -@@@@@@@ .@@@@@@@ @ . @
@. @..@.@@@@ . @ @@@@ . %@@@@-.. =@@#@ @ @@
@= :#@ % @. *% # @. *@ @@ @#
#@@ @. @ - @. @ @@@@@
+@@@ @@ @ @= @
:@ @:@ @.@ .@. .@
@@ .@ @ @+ .@@@ @
@. @% @ .@% =@- @@ --.
*@ -@# @.@@@ *@. +@. :@
@@ :@@@ @ @@ *# #
@@ @@@@ @. * @@@@@. @
@ @@@@@ @@ @@ @ .+ %@
: @+ @@ .: # - @@
@: -@@ @ @@
@- @ @ #@@@
@@ @. @ @+
@@ .*@@ @ @
@ @@@@ @@. +@@@@@@@@@
@@ @@ -@@@@@+ @
@ @@ @
@ @@@:. :@
@ @@@% .@@@@@@@@@@@@-
@ @ # @@@. @@
%% @@% @@@. @*
@ @@: @@@@@@ @
@ .@@@@@@@. @ @-
@ @@@ @@% @.%-@*
@. @@@@+ @@@@@@
@@@* @@@- @@@@@@@@
@ @@@@@ @@@@@@@@@@ #
=@ @@@@@@@@@@@@@@@*@@
= @@@@@@@=@@@@@@@
@@ @@@ @@@@
</pre>
</div>
<!-- ASCII Art Header, clickable -->
<a href="/">
<div class="ascii-header">
<pre>
_ _ _ ___ _
/\ | | | | | |/ / | (_)
/ \ | |__ ___ _ _| |_ | ' /| | ___ _ _ __
/ /\ \ | '_ \ / _ \| | | | __|| < | |/ _ \ | '_ \
/ ____ \| |_) | (_) | |_| | |_ | . \| | __/ | | | |
/_/ \_\_.__/ \___/ \__,_|\__||_|\_\_|\___|_|_| |_|
___ _ _ _ _____ _ ___
| _ ) ___| |_ (_)_ _ __| |_ _| |_ ___/ __| __ _ _ ___ ___ _ _
| _ \/ -_) ' \| | ' \/ _` | | | | ' \/ -_)__ \/ _| '_/ -_) -_) ' \
|___/\___|_||_|_|_||_\__,_| |_| |_||_\___|___/\__|_| \___\___|_||_|
</pre>
</div>
</a>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- ASCII Art Banner for sections -->
<div class="ascii-banner">
<pre>
+ ---------------- + ---------------- + ---------------- + ---------------- + ---------------- +
| <a href="#skills">Skills</a> | <a href="#education">Education</a> | <a href="#interests">Interests</a> | <a href="#experience">Experience</a> | <a href="#projects">Main-Projects</a> |
+ ---------------- + ---------------- + ---------------- + ---------------- + ---------------- +
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Skills Section -->
<section id="skills">
<h3>Skills</h3>
<div class="ascii-table">
<pre>
+ ------------------------------ + --------------------------------------------------- +
| Category | Skills |
+ ------------------------------ + --------------------------------------------------- +
| Programming Languages | Python, JavaScript, C, C++, Java, Ruby, Go, Rust |
| Frontend Frameworks | React, Vue.js, Angular, Svelte, Bootstrap |
| Backend Frameworks | Django, Flask, Express, Node.js, Ruby on Rails |
| Databases | MySQL, PostgreSQL, MongoDB, SQLite, Redis |
| DevOps Tools | Docker, Kubernetes, Jenkins, Ansible, Terraform |
| Version Control | Git, GitHub, GitLab, Bitbucket |
| Cloud Platforms | AWS, Google Cloud, Azure, Heroku, DigitalOcean |
| Mobile Development | Flutter, React Native, Swift, Kotlin |
| Testing Frameworks | Jest, Mocha, Cypress, PyTest, Selenium |
| CI/CD Tools | CircleCI, TravisCI, GitHub Actions, Jenkins |
| Operating Systems | Linux/GNU Debian, macOS, Windows, GNU/Alpine, |
| Scripting Languages | Bash, PowerShell, Perl |
| Cybersecurity Tools | Wireshark, Metasploit, Nmap, Burp Suite |
| APIs & Protocols | REST, GraphQL, WebSocket, gRPC, SOAP |
| Containerization/Orchestration | Docker, Kubernetes, OpenShift |
| Software & Tools | Visual Studio Code, Vim, Neovim, IntelliJ IDEA |
| Machine Learning | TensorFlow, PyTorch, Scikit-learn |
| Data Science Tools | Pandas, NumPy, Jupyter, Matplotlib |
| Networking | TCP/IP, DNS, HTTP/HTTPS, FTP, SSH |
| Project Management Tools | Jira, Trello, Asana, Monday.com |
| APIs | Google Maps API, Twitter API, Stripe API |
+ ------------------------------ + --------------------------------------------------- +
</pre>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Education Section -->
<section id="education">
<h3>Education</h3>
<div class="ascii-table">
<pre>
+ ------------------------------------- + ----------------------------------------- + ------------------------------- +
| Degree / Certificatee | Institution | Additional Information |
+ ------------------------------------- + ----------------------------------------- + ------------------------------- +
| High School Diploma | Palisades High School, Pennsylvania | |
| Bachelor of Science Degree, Neuro | Virginia Tech, Virginia | |
| | | |
+ ------------------------------------- + ----------------------------------------- + ------------------------------- +
</pre>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Interests Section -->
<section id="interests">
<h3>Interests</h3>
<div class="ascii-table">
<pre>
+--------------+------------+-----------+
| Interests | Experience | Expertise |
+--------------+------------+-----------+
| Coding | | |
| Skiing | | |
| Woodworiking | | |
| Guitar | | |
| Robotics | | |
| Medicine | | |
| Neuoscience | | |
+--------------+------------+-----------+
</pre>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Work Experience Section -->
<section id="experience">
<h3>Work Experience</h3>
<div class="ascii-table">
<pre>
+ --------------------------- + ----------------------------- + -------------------- +
| Job Title | Company | Duration |
+ --------------------------- + ----------------------------- + -------------------- +
| Linux Developer | Freelance | 2 years |
| Research Assistant | Virginia Tech Neuroscience Lab| 1 year |
+ --------------------------- + ----------------------------- + -------------------- +
</pre>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Main Projects Section -->
<section id="projects">
<h3>Main Projects</h3>
<div class="ascii-table">
<pre>
+ ------------------------- + -------------------- + ---------------------------- + ----------------------- +
| Name | Language & Framework | Description | Link to Source |
+ ------------------------- + -------------------- + ---------------------------- + ----------------------- +
| | | | |
| | | | |
| | | | |
+ ------------------------- + -------------------- + ---------------------------- + ----------------------- +
</pre>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Contact Section -->
<section id="contact">
<h3>Contact Me</h3>
<div class="ascii-table">
<a href="/contact">
<pre>
+ ------------------------ +
| Reach out on the Contact |
| Page for more details! |
+ ------------------------ +
</pre>
</a>
</div>
</section>
<!-- Separator Line -->
<hr class="ascii-line">
</body>
</html>

5167
views/art.html Normal file
View File

File diff suppressed because it is too large Load Diff

314
views/blog.html Normal file
View File

@@ -0,0 +1,314 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - Kleinpanic</title>
<link rel="stylesheet" href="/style.css">
<style>
body {
font-family: 'Courier New', 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; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
/* ASCII header style */
.ascii-header, .ascii-table-wrapper {
z-index: 10;
text-align: center;
background-color: rgba(255, 255, 255, 0.05); /* Light grey with transparency */
border-radius: 8px;
padding: 20px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.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;
cursor: pointer;
}
.ascii-header pre:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
.ascii-table-wrapper:hover {
background-color: rgba(255, 255, 255, 0.1); /* Slightly brighter grey on hover */
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
transform: scale(1.01);
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.blog-link {
display: block; /* Make the anchor act like a block-level element */
text-decoration: none; /* Remove underline from the link */
}
.blog-link:hover .blog-preview {
background-color: #333333; /* Fallback solid background color */
background-color: rgba(255, 255, 255, 0.1); /* Desired rgba background color */
transform: scale(1.01); /* Slight zoom on hover */
transition: all 0.3s ease;
}
.blog-preview {
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;
margin-bottom: 20px;
white-space: pre; /* ASCII look */
width: 800px; /* Set fixed width */
height: auto; /* Set fixed height for previews */
overflow: hidden; /* Prevent overflow of text */
}
.blog-preview h3 {
margin-bottom: 5px;
}
.blog-preview a {
text-decoration: none;
color: #1e90ff;
}
.blog-preview a:hover {
text-decoration: underline;
}
.blog-preview p {
margin: 10px 0;
color: #ccc;
}
/* Clickable container styling */
.clickable-container {
cursor: pointer;
text-align: center;
}
/* Hover effect for clickable container */
.clickable-container:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Separator line style */
.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));
}
.post-title {
color: #ff4081; /* Pink for the post title */
font-size: 18px;
margin: 0;
}
.post-date, .post-preview {
color: #ffaa00; /* Amber for the date and preview */
margin: 5px 0;
}
.blog-preview p {
margin: 5px 0;
}
</style>
</head>
<body>
<!-- ASCII Art Background -->
<div class="ascii-art-left">
<pre>
+========+
===============+
======================
============================
==================================
========================================
================================================
======================================================
============================================================
==================================================================
=========================================================================+
================================================================================
====================================++=-::::::-=++====================================
=================================+= .=+=================================
===============================+- -================================
==============================: :+============================#
============================+ +======================+#####
==========================+ +=================*########
========================+ +============*###########
======================== -========###############
======================. .====##################
====================+. ..:--:.. .#####################
==================== ================ -########################
===================. -====================- +###########################
==================- :========================: .###############################
=================+ +==========================+ .##################################
=================- +==========================+#####################################
================= =========================+########################################
================+ .======================*###########################################
================+ -===================###############################################
================= =================##################################################
================+ -============+%%%%%%###############################################
================+ .=========+%%%%%%%%%%%%############################################
================= ======*%%%%%%%%%%%%%%%%%%#########################################
=================- +=#%%%%%%%%%%%%%%%%%%%%%%%%%#####################################
=================+ %%%%%%%%%%%%%%%%%%%%%%%%%%%% .##################################
==================- -%%%%%%%%%%%%%%%%%%%%%%%%= .###############################
===================. +%%%%%%%%%%%%%%%%%%%%+ +###########################
==================== #%%%%%%%%%%%%%%# -########################
=====================. .:=++=:. :#####################
==================%%%%. .%%%%##################
===============%%%%%%%%* +%%%%%%%%###############
===========+%%%%%%%%%%%%% %%%%%%%%%%%%%############
========*%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%#########
=====#%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%#####
=#%%%%%%%%%%%%%%%%%%%%%%%%%%%%= -%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%= =%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%* .*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#+--::--+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%
%%%%%%%%%%
</pre>
</div>
<div class="ascii-art-right">
<pre>
.+%%%#:
%%%%%%%%%:
%%%%%%%%%%%.
:*#%%%%%%*: %%%%%%%%%%%-
:#%%%%%%%%%%%%%%%%%%%%- +%%%%%%%%%%.
+%%%%%%%%%%%%%%%%%%%%%%%%%%%% :%%%%%%%%%%
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:.%%%= ...
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+
:%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%= ::
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%. :%*:#+*= .#+
#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%# %- #+.%.%%%*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%. +%##+.% -%%.
:%%%%%- %%. %%* %: . %%%%%%+ . ..
*%%%%%- %%# +%%%%%% =% .#%%%%: %%: @%= #%%%%%* . . .: %=..... . . :-% :
*%%%%%- %%# +% .:: =%%+. %: %%= %%* #%%%%%# % +*=%*% %- :%*%+*.%.% -%-%*%:
-%%%%%- %%# ++ -- .* .:: %: %%= %%* #%%%%%+ % +*.%%% +%% ##-% .% %%#% %%%
%%%%%#**%%%**#%#--#%#==##*--=#%%***%%#**%%%**%%%%%%.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ... .. ... .. ... .. %-. %. .. . .
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%: :=#+-%= .%+..%-%=#+:%.%:%-.% %.**=%.%-.
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%* %#%%-%%#:%%% %%%.#=:% %:%%%% %#-%%#.%
*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
=%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
:%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:
#%%%%%%%%%%%%%%%%%%%%%%.
:=#%%%%%%%%%%+:
</pre>
</div>
<!-- ASCII Art Header for Blog Page, wrapped with an anchor -->
<div class="ascii-header clickable-container">
<pre>
_______ _ _ ___ _ ____ _
|__ __| | | |/ / | (_) | _ \| |
| | | |__ ___ | ' /| | ___ _ _ __ | |_) | | ___ __ _
| | | '_ \ / _ \| < | |/ _ \ | '_ \ | _ <| |/ _ \ / _` |
| | | | | | __/| . \| | __/ | | | || |_) | | (_) | (_| |
|_| |_| |_|\___||_|\_\_|\___|_|_| |_||____/|_|\___/ \__, |
__/ |
|___/
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- RSS feed link -->
<div style="margin-top: 20px;">
<a href="/blog/rss.xml">Subscribe to the RSS Feed</a>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Blog preview section -->
<div id="blog-container">
<!-- Dynamic blog previews will be injected here by JavaScript -->
</div>
<!-- External JS file -->
<script src="/js/blog.js"></script>
<!-- Separator Line -->
<hr class="ascii-line">
<script src="/js/clickableHeader.js"></script>
</body>
</html>

367
views/contact.html Normal file
View File

@@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - 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; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
.ascii-header, .ascii-table, .contact-text-container, .form-container {
z-index: 10;
text-align: center;
}
.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;
cursor: pointer;
}
.ascii-header pre:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.ascii-table 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;
max-width: 100%;
margin-bottom: 20px;
}
.ascii-table:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.01);
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}
a {
color: #1e90ff;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
}
a:hover {
color: #ff4081;
transform: scale(1.1);
}
.contact-text-container {
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 5px;
max-width: 800px;
margin: 20px auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-text-container:hover {
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
}
.contact-text {
font-size: 16px;
}
.form-container {
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 5px;
max-width: 800px;
margin: 20px auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.ascii-form-table pre {
white-space: pre; /* Ensure that text wraps within the table */
margin: 0;
padding: 0;
overflow-wrap: hidden; /* Prevent overflow of long words or text */
width: 100%; /* Make sure the pre tags don't overflow */
}
.ascii-form-table {
font-size: 16px;
color: #f0f0f0;
background-color: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-bottom: 20px;
display: inline-block;
width: 90%;
max-width: 600px;
}
.ascii-form-table input {
height: 40px; /* Set a consistent height for input fields */
}
.ascii-form-table textarea {
height: 100px; /* Set a consistent height for the textarea */
resize: vertical; /* Allow vertical resizing but not horizontal */
}
.form-container form {
display: flex;
flex-direction: column;
align-items: center;
}
.form-container input, .form-container textarea {
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid #fff;
padding: 10px;
margin: 10px 0;
color: #fff;
border-radius: 5px;
font-family: 'Courier New', monospace;
width: 80%;
/* max-width: 600px; */
box-sizing: border-box;
}
.form-container button {
background-color: #1e90ff;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
max-width: 200px;
}
.form-container button:hover {
background-color: #ff4081;
}
.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));
}
</style>
</head>
<body>
<!-- ASCII Art Background -->
<div class="ascii-art-left">
<pre>
..........:-=+****+++++++******==-....... .
.....=++++++*+++++++++++**++*++****+**:.. ..
...:++++++++++++++++++++++++*************=....
..-+++++++==++++++++++++++*****************:..
....:+++++=......++*+++++++********************:....
....-+++++........+*+++++***********************....
....-+++++........*++++*************************....
....-++++++.....:++*+***************************....
....-+++++++*+*+*+******************************....
....=+++++++++++++******************************....
....=++++++++++*********************************....
.................................=*********************............
.........................................+*********************....................
........:=+++++++++++++++++++++************************************...:::::...::::.....
......=+++++++++++++++++++++***************************************...:::::::::::::::.....
....=++++++++++++++++++++++****************************************...::::::::::::::::....
...++++++++++++++++++++++++****************************************...:::::::::::::::::...
..=+++++++++++++++++++++++*****************************************...::::::::::::::::::..
.:+++++++++++++++++++++********************************************...:::::::::::::::::::.
.=+++++++++++++++++++++*******************************************+...:::::::::::::::::::.....
.+++++++++++++++++++**********************************************...:::::::::::::::::::::....
-+++++++++++++++*************************************************....:::::::::::::::::::::....
=+++++++++++++++**********************************************#:...:::::::::::::::::::::::....
+++++++++++++++*******************************************#*-....:::::::::::::::::::::::::....
+++++++++++++***************+-:.................................::::::::::::::::::::::::::....
++++++++++++*************+:................................::::::::::::::::::::::::::::::::...
++*++++++++*************:....:::.:.:::::::::::::::::::::::::::::::::::::::::::::::::::::::....
=++++++++*************+....:::::..::::::::::::::::::::::::::::::::::::::::::::::::::::::::....
:**+++++*************+....::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....
.++++****************....:.:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....
.-*+****************+...:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.
..+*****************+...::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::..
..-*****************+...::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::..
...-****************+...:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::...
....-+**************+...::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....
..=*************+...::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::...
.....-=+********+...:::::::::::::::::::::::::::::::::::::::::::::::::::::::::......
...................:::::::::::::::::::::..........................................
............:::::::::::::::::::::::::::::::::::::::::::............
.........:::::::::::::::::::::::::::::::::::::::::::....
.... .....:::::::::::::::::::::::::::::::::::::::::::....
.....::::::::::::::::::::::::::::::::...::::::::....
.....::::::::::::::::::::::::::::::.......::::::....
.....:::::::::::::::::::::::::::::.... ....:::::....
.....::::::::::::::::::::::::::::::... ...::::::....
.. ...::::::::::::::::::::::::::::::.....::::::.. ..
.. ....::::::::::::::::::::::::::::::::::::::.... ..
......:::::::::::::::::::::::::::::::::.....
..........:::::::::::::::::::::::::.........
.........::::::::::.........
..........................
</pre>
</div>
<div class="ascii-art-right">
<pre>
..:--.....
............. .
...... ....:++++++. .@@@ @@@@@@@@ .@@@@@@@@
==:.........=++++++++: @@@@@ @@:..@@@@...%@@. .
.+++++++++++++++++++++++-. =@@ @@. @@:.@@*#@. %@@.
.=:...........:=+++++++++. @@@%@@@. @@:.@@@@#@@ %@@.
.............. ...:-=++++++ @@@@@@@@# @@:.@@..@@@.%@@.
. ...........:@@. %@@.@@:. -@@@.-@%@@.
...................:------- ==-. = = = .. ..
.+++=:.....-+++++++++++++.. . @ +@%.@ @ @ .@@...@%..@@..:%.@@ @@.@@. @@...@@. @@.
.+++++++++++++++++++++++=.. : .@ @@@.@ @ @ .@@%.. ..@ @ ...@@ . @ @ @...@@@@ @@.
.=++++++++++++++++++++: @@@..@@@ @ @ @@@@%@@@.#@@ -@@. @@%@.@ @@= @....@@..@@*.
..++++++++++++++++++.
..................
..:--.. ......
</pre>
</div>
<!-- ASCII Art Header, clickable -->
<a href="/">
<div class="ascii-header">
<pre>
_ ___ _ _____ _ _
| |/ / | (_) / ____| | | | |
| ' /| | ___ _ _ __ | | ___ _ __ | |_ __ _ ___| |_
| < | |/ _ \ | '_ \ | | / _ \| '_ \| __/ _` |/ __| __|
| . \| | __/ | | | || |___| (_) | | | | || (_| | (__| |_
|_|\_\_|\___|_|_| |_| \_____\___/|_| |_|\__\__,_|\___|\__|
___ _ ___ _____ _
/ __|___| |_|_ _|_ |_ _|__ _ _ __| |_
| (_ / -_) _|| || ' \| |/ _ \ || / _| ' \
\___\___|\__|___|_||_|_|\___/\_,_\__|_||_|
</pre>
</div>
</a>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- ASCII Art Table Section with Clickable Links and Descriptions -->
<div class="ascii-table">
<pre>
+ ---------- + ----------------------------------- + ------------------------------------------------------ +
| <a href="https://github.com/kleinpanic" target="_blank">GitHub</a> | <a href="https://github.com/kleinpanic" target="_blank">https://github.com/kleinpanic</a> | All my open source projects listed with install curl! |
| <a href="https://www.youtube.com/@KleinPanic" target="_blank">YouTube</a> | <a href="https://www.youtube.com/@KleinPanic" target="_blank">https://www.youtube.com/@KleinPanic</a> | Watch videos I made about Linux and other stuff! |
| <a href="mailto:kleinpanic@gmail.com">Email Me</a> | <a href="mailto:kleinpanic@gmail.com">Email me directly</a> | Email me directly about whatever you want! |
+ ---------- + ----------------------------------- + ------------------------------------------------------ +
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Contact Description Text -->
<div class="contact-text-container">
<p class="contact-text">+ ----------------------------------------------------------------------- +</p>
<p class="contact-text">Hello, My Pseudonym is Klein (Panic). It's a spoof off Kernel Panic. I am a Linux Enthusiast, and a Debian-enjoyer. I love hobby-coding and making projects for Linux systems that better improve my workflow or give me real-world utilities. If you notice or experience any issues with my open source projects, please feel free to email me with a description of the issue or open a GitHub issue publicly.</p>
<!-- <p class="contact-text">93 / ΤΚΦ</p> -->
<p class="contact-text">+ ----------------------------------------------------------------------- +</p>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Simple Contact Form -->
<div class="form-container">
<h3>Contact Me Directly</h3>
<div class="ascii-form-table">
<pre>
+ ------------------------------------------------------- +
<input type="text" placeholder="Your Name" required>
+ ------------------------------------------------------- +
</pre>
</div>
<div class="ascii-form-table">
<pre>
+ ------------------------------------------------------- +
<input type="email" placeholder="Your Email" required>
+ ------------------------------------------------------- +
</pre>
</div>
<div class="ascii-form-table">
<pre>
+ ------------------------------------------------------- +
<textarea rows="1" placeholder="Your Message"></textarea>
+ ------------------------------------------------------- +
</pre>
</div>
<button type="submit">Send Message</button>
</div>
<script src="/js/contact.js" defer></script>
<!-- Separator Line -->
<hr class="ascii-line">
</body>
</html>

403
views/index.html Normal file
View File

@@ -0,0 +1,403 @@
<!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>

0
views/lynx-index.html Normal file
View File

110
views/monitor.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitor - Kleinpanic</title>
<link rel="stylesheet" href="/style.css">
<style>
body {
font-family: 'Courier New', 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: hidden;
position: relative;
}
/* ASCII header and subheader style */
.ascii-header, .ascii-subheader {
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;
text-align: center;
}
/* Gradient animation */
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Separator line style */
.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));
}
/* Block of text for maintenance message */
.maintenance-message {
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 5px;
text-align: center;
max-width: 800px;
margin: 20px auto;
font-size: 16px;
}
/* Styling for clickable anchor */
a {
text-decoration: none;
color: inherit;
}
a:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<!-- ASCII Art Header as a clickable anchor -->
<a href="/" class="ascii-header">
<pre>
__ __ _ _ _ ___ _
| \/ | (_) | | |/ / | (_)
| \ / | ___ _ __ _| |_ ___ _ __ | ' /| | ___ _ _ __
| |\/| |/ _ \| '_ \| | __/ _ \| '__|| < | |/ _ \ | '_ \
| | | | (_) | | | | | || (_) | | | . \| | __/ | | | |
|_| |_|\___/|_| |_|_|\__\___/|_| |_|\_\_|\___|_|_| |_|
</pre>
</a>
<!-- ASCII Art Subheader -->
<div class="ascii-subheader">
<pre>
_ _ _ _ _ _ _ _ _ _
(_) |_( )___ _ _ ___| |_ __ __ _| |_ __ _| |_ _ _ ___ _ _ | |_| |_ (_)_ _ | |__
| | _|/(_-< | ' \/ _ \ _| \ V V / ' \/ _` | _| | || / _ \ || | | _| ' \| | ' \| / /
|_|\__| /__/ |_||_\___/\__| \_/\_/|_||_\__,_|\__| \_, \___/\_,_| \__|_||_|_|_||_|_\_\
|__/
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Maintenance Message -->
<div class="maintenance-message">
<p>This page is under maintenance and will be up soon.</p>
</div>
</body>
</html>

346
views/post.ejs Normal file
View File

@@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" href="/style.css">
<style>
body {
font-family: 'Courier New', 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; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
/* ASCII Art Title */
.ascii-header, .ascii-table-wrapper {
font-size: 14px;
background-color: rgba(255, 255, 255, 0.05); /* Apply the same grey transparent background */
color: transparent;
animation: gradient-animation 6s ease infinite;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
padding: 20px; /* Add padding to match other sections */
border-radius: 8px; /* Add rounded corners */
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2); /* Add box-shadow for consistency */
transition: background-color 0.3s ease, transform 0.3s ease;
}
.ascii-header:hover {
background-color: rgba(255, 255, 255, 0.1); /* Slightly brighter grey on hover */
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3); /* Enhance the shadow on hover */
transform: scale(1.01); /* Add a slight zoom effect */
}
.ascii-header pre {
font-size: 14px;
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 6s ease infinite;
cursor: pointer;
}
.ascii-header pre:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
.ascii-table-wrapper:hover {
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
transform: scale(1.01);
}
.ascii-header a {
text-decoration: none;
color: inherit;
}
@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.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));
}
/* Blog content styling */
.post-container {
background-color: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 5px;
max-width: 800px;
margin: 0 auto;
text-align: left;
line-height: 1.6;
font-size: 16px;
height: auto; /* Make height dynamic */
width: 100%; /* Ensure the container takes the full width */
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2); /* Match box-shadow for consistency */
transition: background-color 0.3s ease, transform 0.3s ease;
}
.post-content {
color: #ccc;
white-space: pre-wrap;
}
/* Style images inside the blog post */
.post-container img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto; /* Center images */
}
/* ASCII-styled box around the content */
.ascii-box {
font-size: 16px;
color: #f0f0f0;
background-color: rgba(255, 255, 255, 0.05);
padding: 20px; /* Ensure enough padding for proper spacing */
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-bottom: 20px;
white-space: pre;
width: 100%;
height: auto; /* Dynamic height */
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2); /* Add shadow */
/* Flexbox to center content */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Centering text */
text-align: center; /* Horizontally center the text */
}
.ascii-box h1 {
font-size: 2em; /* Adjust the size for emphasis */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
text-align: center; /* Ensure it's centered horizontally */
color: #ff4081;
}
.ascii-box p {
font-size: 1.2em; /* Slightly smaller for the published date */
margin: 10px 0 0 0; /* Add margin only above the paragraph */
text-align: center; /* Ensure it's centered horizontally */
color: #ffaa00;
}
.ascii-box:hover, .post-container:hover {
background-color: rgba(255, 255, 255, 0.1); /* Slightly brighter grey on hover */
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3); /* Enhance shadow on hover */
transform: scale(1.01);
}
.post-content {
color: #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<!-- ASCII Art Background -->
<div class="ascii-art-left">
<pre>
@@@@@@ @@@@@
@@@@@@@@@@ @@@@@@@@@@
@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@ #@@@@@@ @@@@@@@@@@@@@@
@@@@@@@@@@@ @@@@@@@@@@@
@@@@@@@@@+ @@@@@@@@@
@@@@@@@@ @@@@@@@@
@@@@@@@@ @@@@@@@
@@@@@@@ @@@@@@@
@@@@@@ @@@@@@@
@@@@@ @@@@@@@ @@@@@@ @@@@@@
@@@@@@@@@ @@@@@@@@@@
@@ @@@@@@ @@@@@ @@
@@@@@: @@@@@
@@@@@@ @@@@@
@@@@@@@. .@@@@@@
@@ @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@ = @@@@@@@@@@@@@@@@@@
@@+ @ @@@@@@@@@@@@@@@@@@@@
@@@ @ @@@@@@@@@@@@@@@@@@@@@@
@@@ @@ @@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@ @ @ @@@@@@ @@@@@ @@@@@@@@@@@
@@@@@@@@@@@@@@@@@ @@@@@ @@@@@ @@@@@
@@@@@@@@@@@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@
@@@@@ @@@@@ @@@@@ @@@@@:
. #@@@@@ @@@@@ @@@@@ @@@@@@
@@ @@@@ @@@@@ +@@
@@@ @@@
</pre>
</div>
<div class="ascii-art-right">
<pre>
@@@
@####@
@#####@ ###@
@#####% ####@
@######% @#####@
@########@ @@@@@@@ @#####@
@#########@ @################@@ @######@
##################################@ @#######@
@#######@########%%####@#############@ @#########@
@#####@#################%##############%##############
@####@##@ @####@ @####@###########################%
%##%#@ @##@ %###############################@
@#@#@ @#@ ##############################@
@@#@ #@ @############################%
@#@ . @% @###########################@
## @ @@ @#. @@@@ ##########################@
@#@ @ @@ #@ @ :@@ @########################@
@##% @@@ @#@@@@@@@ ######################@
@####@ %##@@@@@@: @#####################@
%######@@@####@.@@ *#######################@
@#####@##########%@@##########################@
@:@ @#####@#######################################
@::::@ @######@#########%###########################@
::@ @:@:* @##########################################@
:::::@ ::@ @####@@##################################@
@@ ::::@ @:@ @%###@################%@@@############@
@::@@ @ @:::@@::@ @##@############@%##############@
@::::@ @::::@ @##@@@%@@@@################@
@:::@ @:::::::@@######@ @######################@
@:::::::::@@ @:::########@ ####################
@@@ @-@######% ####################@
#######@####@@@@######################@
@########%####@###%@%###################@
@#############@#########@################
@@@@@######@#############@@@@@#########@
@######@###@#########################@
@##@@###########################@
@#############################
@###########################
@@########################@#
###@#################@@#####@
@######@@#####@@#%+::::@######
###################@::::-%###@
@####################%-:::@###@
@######################@@#####%
@@#############################@
@****@@###@***@######@*@#########@
@*******#******%*******@@##########@
@********@**+---#***@..%*@ @############@@
@@@@*=-=******@@***+---***%...@** @##############@@@
@@ #*******=-*@*--+*****@@******@@@***@ @@################%@@
@@ @ =#@@******************@@ @@@%##############@
=@@@@@@@ % -***************#@. @ @@@######@
@ .@ @********#@@ @ @ @#####@
@@@@@@ .:+%@%*-. @@ @### @####%
@ @@@ @######@ @######@
@@@@@@@@@ @###################@
@@##############@@@@
@##%%%@@@@@@@@@@@@@@
</pre>
</div>
<!-- Clickable ASCII Art Title for the Blog Post -->
<div class="ascii-header">
<a href="/blog/">
<pre>
_______ _ _ ___ _ ____ _
|__ __| | | |/ / | (_) | _ \| |
| | | |__ ___ | ' /| | ___ _ _ __ | |_) | | ___ __ _
| | | '_ \ / _ \| < | |/ _ \ | '_ \ | _ <| |/ _ \ / _` |
| | | | | | __/| . \| | __/ | | | || |_) | | (_) | (_| |
|_| |_| |_|\___||_|\_\_|\___|_|_| |_||____/|_|\___/ \__, |
__/ |
|___/
</pre>
</a>
</div>
<!-- ASCII Separator Line -->
<hr class="ascii-line">
<!-- Blog Post Title in ASCII-styled box -->
<div class="ascii-box">
<h1><%= title %></h1>
<p>Published on <%= date %></p>
</div>
<!-- ASCII Separator Line -->
<hr class="ascii-line">
<!-- ASCII-styled content -->
<div class="post-container">
<div class="post-content">
<%- content %> <!-- Use unescaped tag to prevent entities from rendering -->
</div>
</div>
<!-- ASCII Separator Line -->
<hr class="ascii-line">
</body>
</html>

279
views/projects.html Normal file
View File

@@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="/style.css">
<style>
/* Styling clickable project name */
.clickable-repo {
color: #1e90ff;
text-decoration: none;
font-weight: bold;
}
.clickable-repo:hover {
color: #ff4081;
}
/* ASCII art */
.ascii-art-left, .ascii-art-right {
position: fixed;
opacity: 0.15;
font-size: 12px; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
/* ASCII Table style */
.ascii-table {
width: 100%;
max-width: 1075px;
margin: 0 auto;
padding: 20px;
font-family: monospace;
text-align: left;
white-space: pre;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Hover effect for the table */
.ascii-table:hover {
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.3);
transform: scale(1.02);
}
/* General body styling */
body {
padding: 20px;
font-family: 'Courier New', monospace;
background: radial-gradient(circle, rgba(0, 0, 0, 0.9), #111);
}
/* Detailed install instructions section */
.install-instructions {
text-align: left;
margin: 20px auto;
max-width: 800px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 8px;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
font-family: 'Courier New', monospace;
}
.install-instructions h2 {
text-align: center;
color: #ff4081;
margin-bottom: 20px;
}
.install-instructions p {
font-size: 1.1em;
margin-bottom: 20px;
}
.install-instructions pre {
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 8px;
color: #1e90ff;
font-size: 1.1em;
}
.install-instructions ul {
list-style-type: none;
padding-left: 0;
}
.install-instructions ul li {
margin: 10px 0;
font-weight: bold;
}
/* Title styling inside the table */
.ascii-table-header {
font-weight: bold;
color: #ff4081;
border-bottom: 2px solid #fff;
}
/* Clickable container styling */
.clickable-container {
cursor: pointer;
text-align: center;
}
/* Hover effect for clickable container */
.clickable-container:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Separator line style */
.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));
}
</style>
</head>
<body>
<!-- ASCII Art Background -->
<div class="ascii-art-left">
<pre>
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%%@@@@@@@@@@@@@@@@%%%%%%%%%@@@@@@@%%%%%%%%%@@@@@@@@%%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%% %%%%%%%%%
</pre>
</div>
<div class="ascii-art-right">
<pre>
++++++++
++++++++++++
+++++++++++++++
++++++++++++++++++
++++++++++++++++++++++
++++++++++++++++++++++++++
++++++++++++++++++++++++++++
++++++++++++++++++++++++++++
+ ++++++++++++++++++++++++++++
++++ ++++++++++++++++++++++++++++
++++++++ ++++++++++++++++++++++++++++
++++++++++++ ++++++++++++++++++++++++++++
++++++++++++++++ +++++++++++++++++++++++
+++++++++++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++++ ++++++++++++++++++++++++
++++++++++++++++++++++++++ +++++++++++++++++++++++++
++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++* ++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++ + ++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++ +++ ++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++ +++++ ++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++ ++++++ ++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++ ++++++++ ++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++ *+++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++ ++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++ +++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++ +++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++
++++++++++++++++++++++++++ +++++++++++++++++++++++++
++++++++++++++++++++++++ +++++++++++++++++++++++
++++++++++++++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++ ++++++++++++++++++++++
++++++++++++++++++++++ +++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++
++++++++++++++++++++++++++
++++++++++++++++++++++
++++++++++++++++++
+++++++++++++++
+++++++++++
++++++++
</pre>
</div>
<!-- ASCII Art Header -->
<div class="ascii-header clickable-container">
<pre>
_ ___ _ _____ _ _
| |/ / | (_) | __ \ (_) | |
| ' /| | ___ _ _ __ | |__) | __ ___ _ ___ ___| |_ ___
| < | |/ _ \ | '_ \ | ___/ '__/ _ \| |/ _ \/ __| __/ __|
| . \| | __/ | | | || | | | | (_) | | __/ (__| |_\__ \
|_|\_\_|\___|_|_| |_||_| |_| \___/| |\___|\___|\__|___/
_/ |
|__/
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Title indicating that the install code uses curl -->
<div class="install-instructions">
<h2>How to Install Projects</h2>
<p>
To install any of the projects listed below, use the following command in your terminal. Make sure to replace <strong>X</strong> with the appropriate <em>repo_id</em> for the project you want to install:
</p>
<pre><code>curl https://kleinpanic.com/install.sh?repo_id=X | bash</code></pre>
<p>
This script will automatically clone the specified project repository from GitHub and run any installation commands associated with the project. If you encounter any issues, ensure you have <code>git</code> and <code>bash</code> installed on your system.
</p>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- ASCII Table Section with Projects -->
<pre class="ascii-table">
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
| <span class="ascii-table-header">Project Name | Description | Install Command </span> |
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
<span id="projects-table-content"></span>
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
</pre>
<!-- External JavaScript Files -->
<script src="/js/projects.js"></script>
<script src="/js/clickableHeader.js"></script>
<!-- Separator Line -->
<hr class="ascii-line">
</body>
</html>

107
views/w3m-index.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kleinpanic - W3M Version</title>
<style>
body {
font-family: monospace;
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
}
pre {
color: #fff;
}
a {
color: #1e90ff;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Title -->
<h1>Kleinpanic</h1>
<!-- ASCII Art Header -->
<div>
<pre>
_ ___ _ _____ _
| |/ / | (_) | __ \ (_)
| ' /| | ___ _ _ __ | |__) |_ _ _ __ _ ___
| < | |/ _ \ | '_ \| ___/ _` | '_ \| |/ __|
| . \| | __/ | | | | | | (_| | | | | | (__
|_|\_\_|\___|_|_| |_|_| \__,_|_| |_|_|\___|
</pre>
</div>
<!-- Navigation Section for Projects -->
<h2>Projects</h2>
<div>
<pre>
+ ------------------------------------------------------------ +
| Check out all of my open-source, and licenced, projects. |
| 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 href="/projects">Visit Projects</a>
</div>
<!-- Navigation Section for Blog -->
<h2>Blog</h2>
<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 href="/blog">Visit Blog</a>
</div>
<!-- Navigation Section for Contact -->
<h2>Contact</h2>
<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! |
+ ------------------------------------------------------------ +
</pre>
<a href="/contact">Visit Contact</a>
</div>
<!-- Navigation Section for Monitor -->
<h2>Monitor</h2>
<div>
<pre>
+ ------------------------------------------------------------ +
| This page will feature project monitoring tools and stats. |
| Under maintenance, coming soon! |
+ ------------------------------------------------------------ +
</pre>
<a href="/monitor">Visit Monitor</a>
</div>
<!-- Navigation Section for About Me -->
<h2>About Me</h2>
<div>
<pre>
+ ------------------------------------------------------------ +
| A page about Klein Panic. Learn about me, and background, my |
| hobbies, my skills, and the projects that inspire me. |
+ ------------------------------------------------------------ +
</pre>
<a href="/about">Visit About Me</a>
</div>
</body>
</html>

190
views/w3m-projects.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="/style.css">
<style>
/* Styling clickable project name */
.clickable-repo {
color: #1e90ff;
text-decoration: none;
font-weight: bold;
}
.clickable-repo:hover {
color: #ff4081;
}
/* ASCII art */
.ascii-art-left, .ascii-art-right {
position: absolute;
opacity: 0.15;
font-size: 12px; /* Smaller font size for better scaling */
white-space: pre-wrap;
pointer-events: none;
z-index: 1;
}
/* Position the ASCII art */
.ascii-art-left {
left: 0;
top: 0;
transform: scale(1.0);
}
.ascii-art-right {
right: 0;
top: 0;
transform: scale(1.0);
}
/* ASCII Table style */
.ascii-table {
width: 100%;
max-width: 1075px;
margin: 0 auto;
padding: 20px;
font-family: monospace;
text-align: left;
white-space: pre;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Hover effect for the table */
.ascii-table:hover {
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.3);
transform: scale(1.02);
}
/* General body styling */
body {
padding: 20px;
font-family: 'Courier New', monospace;
background: radial-gradient(circle, rgba(0, 0, 0, 0.9), #111);
}
/* Detailed install instructions section */
.install-instructions {
text-align: left;
margin: 20px auto;
max-width: 800px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 8px;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
font-family: 'Courier New', monospace;
}
.install-instructions h2 {
text-align: center;
color: #ff4081;
margin-bottom: 20px;
}
.install-instructions p {
font-size: 1.1em;
margin-bottom: 20px;
}
.install-instructions pre {
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 8px;
color: #1e90ff;
font-size: 1.1em;
}
.install-instructions ul {
list-style-type: none;
padding-left: 0;
}
.install-instructions ul li {
margin: 10px 0;
font-weight: bold;
}
/* Title styling inside the table */
.ascii-table-header {
font-weight: bold;
color: #ff4081;
border-bottom: 2px solid #fff;
}
/* Clickable container styling */
.clickable-container {
cursor: pointer;
text-align: center;
}
/* Hover effect for clickable container */
.clickable-container:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Separator line style */
.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));
}
</style>
</head>
<body>
<!-- ASCII Art Header -->
<div class="ascii-header clickable-container">
<pre>
_ ___ _ _____ _ _
| |/ / | (_) | __ \ (_) | |
| ' /| | ___ _ _ __ | |__) | __ ___ _ ___ ___| |_ ___
| < | |/ _ \ | '_ \ | ___/ '__/ _ \| |/ _ \/ __| __/ __|
| . \| | __/ | | | | | | | | | (_) | | __/ (__| |_\__ \
|_|\_\_|\___|_|_| |_| |_| |_| \___/| |\___|\___|\__|___/
_/ |
|__/
</pre>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- Title indicating that the install code uses curl -->
<div class="install-instructions">
<h2>How to Install Projects</h2>
<p>
To install any of the projects listed below, use the following command in your terminal. Make sure to replace <strong>X</strong> with the appropriate <em>repo_id</em> for the project you want to install:
</p>
<pre><code>curl https://kleinpanic.com/install.sh?repo_id=X | bash</code></pre>
<p>
This script will automatically clone the specified project repository from GitHub and run any installation commands associated with the project. If you encounter any issues, ensure you have <code>git</code> and <code>bash</code> installed on your system.
</p>
</div>
<!-- Separator Line -->
<hr class="ascii-line">
<!-- ASCII Table Section with Projects -->
<pre class="ascii-table">
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
| <span class="ascii-table-header">Project Name | Description | Install Command </span> |
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
<span id="projects-table-content"></span>
+ ------------------------ + --------------------------------------------------------------- + ------------------------------ +
</pre>
<!-- External JavaScript Files -->
<script src="/js/projects.js"></script>
<script src="/js/clickableHeader.js"></script>
<!-- Separator Line -->
<hr class="ascii-line">
</body>
</html>