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

2
.env Normal file
View File

@@ -0,0 +1,2 @@
EMAIL_USER=kleinpanic@gmail.com
EMAIL_PASSWORD=ffmaxxhcrsyzlicg

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
.env/
node_modules/

25
blog/first-post.md Normal file
View File

@@ -0,0 +1,25 @@
---
title: "First Post - Welcome to KleinPanic"
date: "2024-10-12"
preview: "The first blog of this website. A little bit about my first website, my first youtube video, and my first blog"
---
# Welcome to the First Blog of Klein Panic
## The New Website
I made a new website! If you're reading this you're on it. It's kleinpanic.com. I hope this website can be used to store all of my projects, and allow the online universe to get to know me (within reason).
I wanted to share a little about this website. I am starting to add support for W3m and Lynx browsers, but currently I have default for larger windows on all visual based web browsers (I think). Next step is to get it to look better for the mobile enviornment but for now I'm content.
Currently we have support for Curl! Curl https://kleinpanic.com to see all my project, and curl https://kleinpanic.com/ip to checkout your IP address! I have to improve the bash install script that is used for the curl install portion of this website but that is a problem for the future.
I plan on posting more about this website, changes I make to, advacements. I also want to start posting about the coding projects I make and the videos I create.
## The New Youtube channel.
![Spacey](/images/space.jpg)
I just like that image and wanted to share it, but also right now it is the face of my youtube! Checkout the new youtube at https://www.youtube.com/@KleinPanic! I just made my first video tonight, talking about the linux/GNU os, common distros and a short overview of some gnu core utils!
The youtube will hopefully be able to be used to teach my friends about linux, inform indiviudals on my projects that I build, and hopefully inspire everyone to make the switch to Linux.
## The blog and myself
Kleinpanic is my name. Kernelpanic is my game. I am in College as of this blog post, and hopefully for the coming year I will continue to be. I am not a comp sci student. I am a neuroscience student interested in Medicine, but I have a love and a passion for comp sci and I do plan on adding it as my minor. I love computer science, and if I am able to make the switch to linux, anyone is.
Anyways this blog is just going to be about whatever I want to post. Future posts will have more strucutre and will be about my projects, my videos, or explicit things of that nature and hopefully will be more entertaining to read.
**P.S** If you are reading this, I love you, thank you for checking out my site, and my blog. Consider subbing to the RSS feed. 9.3
Kleinpanic

30
package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"name": "KleinPanic",
"version": "1.0.0",
"description": "Your project description",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"author": "Your Name",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"csurf": "^1.11.0",
"ejs": "^3.1.10",
"envdot": "^0.0.3",
"express": "^4.17.1",
"express-mongo-sanitize": "^2.0.0",
"express-rate-limit": "^5.2.6",
"front-matter": "^4.0.2",
"helmet": "^4.4.1",
"marked": "^14.1.2",
"nodemailer": "^6.9.1",
"package.json": "^2.0.1",
"rss": "^1.2.2",
"xss-clean": "^0.1.0"
}
}

BIN
public/images/space.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 707 KiB

27
public/js/blog.js Normal file
View File

@@ -0,0 +1,27 @@
fetch('/blog/blog-posts')
.then(response => response.json())
.then(posts => {
const blogContainer = document.getElementById('blog-container');
posts.forEach(post => {
// Create a clickable link wrapping the entire blog preview
const blogLink = document.createElement('a');
blogLink.href = `/blog/${post.slug}`;
blogLink.className = 'blog-link'; // Optional class for styling
blogLink.style.textDecoration = 'none'; // Remove the underline from the link
const blogPreview = document.createElement('div');
blogPreview.className = 'blog-preview';
// Create the blog preview with the title, date, and preview
blogPreview.innerHTML = `
<h3 class="post-title">${post.title}</h3> <!-- Apply the pink color to the title -->
<p class="post-date">Published on ${post.date}</p> <!-- Apply the amber color to the date -->
<p class="post-preview">${post.preview}...</p> <!-- Apply the amber color to the preview -->
`;
// Append the preview div inside the link, then add the link to the container
blogLink.appendChild(blogPreview);
blogContainer.appendChild(blogLink);
});
})
.catch(error => console.error('Error fetching blog posts:', error));

9
public/js/clickableHeader.js Normal file
View File

@@ -0,0 +1,9 @@
document.addEventListener('DOMContentLoaded', function() {
const clickableContainer = document.querySelector('.clickable-container');
if (clickableContainer) {
clickableContainer.addEventListener('click', function() {
window.location.href = 'https://kleinpanic.com/';
});
}
});

72
public/js/contact.js Normal file
View File

@@ -0,0 +1,72 @@
document.querySelector('button').addEventListener('click', function(event) {
event.preventDefault(); // Prevent form submission
// Grab the form inputs
const name = document.querySelector('input[type="text"]').value.trim();
const email = document.querySelector('input[type="email"]').value.trim();
const message = document.querySelector('textarea').value.trim();
// Simple frontend validation
if (!name || !email || !message) {
alert("Please fill in all fields.");
return;
}
// Validate email format
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return;
}
// Disable the button to prevent spamming
const sendButton = document.querySelector('button');
sendButton.disabled = true;
sendButton.innerText = "Sending...";
// Prepare data to send
const data = {
name: name,
email: email,
message: message
};
// Send data to the backend via fetch API
fetch('/contact/submit-contact-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => {
// Check if the response is OK (status code 200)
if (!response.ok) {
// If response status is not ok, attempt to get error message
return response.json().then(errData => {
throw new Error(errData.message || "Unknown error occurred.");
});
}
return response.json(); // Parse the success response JSON
})
.then(data => {
if (data.success) {
// Show success message and reset the form
alert("Message sent successfully! Thank you for reaching out.");
document.querySelector('form').reset(); // Reset the form after successful submission
} else {
// Show error message returned from server
alert(data.message || "There was an error sending your message. Please try again later.");
}
})
.catch((error) => {
// Log the error and display the error message to the user
console.error('Error:', error);
alert(error.message || "There was an error sending your message. Please try again later.");
})
.finally(() => {
// Always re-enable the button and reset the button text
sendButton.disabled = false;
sendButton.innerText = "Send Message";
});
});

64
public/js/projects.js Normal file
View File

@@ -0,0 +1,64 @@
async function fetchProjects() {
let repos = [];
let page = 1;
let perPage = 100;
try {
// Fetch all repositories using pagination
while (true) {
const response = await fetch(`/projects/fetch?page=${page}&per_page=${perPage}`);
const pageRepos = await response.json();
if (pageRepos.length === 0) {
break; // No more repos to fetch
}
repos = repos.concat(pageRepos);
page++;
}
// Function to truncate text with "..." only if necessary
function truncateText(text, maxLength) {
return text.length > maxLength ? text.slice(0, maxLength - 3) + '...' : text;
}
// Function to pad text with spaces to ensure proper column alignment
function padText(text, length) {
return text.padEnd(length, ' ');
}
// Function to dynamically pad the repo_id (install command) for alignment
function padRepoId(index) {
const id = index + 1; // Repo index starts from 1
return `/install.sh?repo_id=${id}`; // Removed the "example.com" part
}
// Column widths to match the HTML header size
const maxNameLength = 24; // Adjusted to ensure proper width
const maxDescriptionLength = 63; // Adjusted for consistency
const maxInstallCommandLength = 30; // Adjusted for the install command path
// Build table rows (without the header since it's in HTML)
const tableContent = repos.map((repo, index) => {
const name = padText(truncateText(repo.name || 'Unknown', maxNameLength), maxNameLength); // Pad and truncate name
const description = padText(truncateText(repo.description || 'No description', maxDescriptionLength), maxDescriptionLength); // Pad and truncate description
// Make the project name clickable, linking to the GitHub URL
const clickableName = `<a href="${repo.html_url}" class="clickable-repo" target="_blank">${name}</a>`;
// Curl install command dynamically generated based on the index with proper padding
const curlInstall = padText(padRepoId(index), maxInstallCommandLength);
// Return the formatted ASCII table row with the clickable project name
return `| ${clickableName} | ${description} | ${curlInstall} |`;
}).join('\n');
// Add the table rows to the pre-existing header and footer in HTML
document.getElementById('projects-table-content').innerHTML = tableContent; // Insert as HTML to preserve the clickable links
} catch (error) {
console.error('Error fetching projects:', error);
}
}
// Fetch projects when the page loads
fetchProjects();

6
public/logo.txt Normal file
View File

@@ -0,0 +1,6 @@
 _ ___ _ _____ _
| |/ / | (_) | __ \ (_)
| ' /| | ___  _ _ __ | |__) |_ _ _ __  _ ___
|  < | |/ _ \| | '_ \| ___/ _` | '_ \| |/ __|
| . \| | __/| | | | | | | (_| | | | | | (__ 
|_|\_\_|\___||_|_| |_|_| \__,_|_| |_|_|\___|

57
public/scripts/install.sh Normal file
View File

@@ -0,0 +1,57 @@
#!/bin/bash
# A function to handle error messages and exit
error_exit() {
echo "$1" >&2
exit 1
}
# Check if repo_id was passed as an argument
if [ -z "$1" ]; then
error_exit "Error: No repo_id provided. Usage: curl https://example.com/install.sh?repo_id=X | sh"
fi
# Function to check if a command is installed
check_command() {
if ! command -v "$1" &> /dev/null; then
error_exit "Error: '$1' is not installed. Please install it and try again."
fi
}
# Check if essential dependencies are installed
check_command "curl"
check_command "git"
check_command "jq"
# GitHub API endpoint to fetch repos for a specific user (replace 'kleinpanic' with your GitHub username)
github_api_url="https://api.github.com/users/kleinpanic/repos"
# Fetch the list of repositories from GitHub
repos=$(curl -s "$github_api_url" | jq -r '.[] | "\(.id) \(.clone_url)"')
# Map repo_id to the GitHub repo URL by searching the fetched repo list
repo_url=$(echo "$repos" | grep "^$1 " | awk '{print $2}')
# Check if a valid repo_url was found for the given repo_id
if [ -z "$repo_url" ]; then
error_exit "Error: Invalid repo_id. No project found for repo_id=$1"
fi
# Clone the repository
echo "Cloning project from $repo_url ..."
git clone "$repo_url" || error_exit "Error: Failed to clone repository."
# Navigate into the project directory (assuming the repo name matches the project)
repo_name=$(basename "$repo_url" .git)
cd "$repo_name" || error_exit "Error: Failed to enter project directory."
# Perform any necessary installation steps here
if [ -f "install.sh" ]; then
echo "Running project-specific install script..."
bash install.sh || error_exit "Error: Project install script failed."
else
echo "No specific install script found. Installation complete."
fi
# Output success message
echo "Project installed successfully."

285
public/style.css Normal file
View File

@@ -0,0 +1,285 @@
/* Body styling */
body {
font-family: 'Courier New', Courier, monospace;
background-color: #000; /* Black background */
color: #fff; /* White text */
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
overflow-y: auto;
background: radial-gradient(circle, rgba(0, 0, 0, 0.9), #111);
scroll-behavior: smooth; /* Smooth scrolling for a better experience */
}
body .pink-text {
color: #ff4081 !important;
}
body .amber-text {
color: #ffaa00 !important;
}
/* Smooth transitions for all elements */
* {
transition: all 0.3s ease;
}
/* Centering the ASCII table and header */
.ascii-table-container {
display: flex;
justify-content: center;
width: 100%;
}
.ascii-table-wrapper {
width: 100%;
max-width: 1200px; /* Set a max width for the container */
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 12px;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Add shadow and scale effect on hover */
.ascii-table-wrapper:hover {
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.3);
transform: scale(1.02);
}
/* ASCII header with gradient */
.ascii-header pre {
text-align: center;
font-size: 16px;
white-space: pre;
background: linear-gradient(135deg, #ff4081, #ff8c00, #ffd700, #00fa9a, #1e90ff, #ff4081);
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 6s ease infinite;
word-wrap: break-word; /* Ensure text doesn't overflow */
}
/* Gradient Animation */
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Title styling */
h2 {
color: #ff4081;
font-size: 28px;
margin: 10px 0;
letter-spacing: 2px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
/* ASCII table styling */
.ascii-table {
width: 100%;
max-width: 1200px;
margin: 20px 0;
padding: 0;
font-size: 14px;
table-layout: fixed;
border-collapse: collapse;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 8px; /* Rounded corners */
overflow: hidden; /* Ensure the table remains inside the container */
}
/* Table rows and cells */
.ascii-table pre {
font-size: 14px;
color: #f0f0f0;
background-color: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
line-height: 1.5;
text-align: left;
white-space: pre-wrap;
}
/* Even out columns in the table */
.ascii-table td, .ascii-table th {
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
/* Adjust column widths */
.ascii-table th:nth-child(1), .ascii-table td:nth-child(1) {
width: 25%;
}
.ascii-table th:nth-child(2), .ascii-table td:nth-child(2) {
width: 50%;
}
.ascii-table th:nth-child(3), .ascii-table td:nth-child(3) {
width: 25%;
}
/* Styling for clickable links */
a.clickable-repo {
color: #1e90ff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease, background-color 0.3s ease;
}
a.clickable-repo:hover {
color: #fff;
background-color: #ff4081;
border-radius: 5px;
padding: 2px 5px;
}
/* Install command style */
.install-command {
font-family: monospace;
background-color: rgba(255, 64, 129, 0.1);
padding: 5px;
border-radius: 4px;
word-break: break-all;
}
/* Hover effect for table */
.ascii-table pre:hover {
background-color: rgba(255, 64, 129, 0.2);
box-shadow: 0 6px 12px rgba(255, 64, 129, 0.2);
}
/* Profile circle inside the box with hover effect */
.ascii-banner pre a {
color: inherit;
text-shadow: none;
}
.ascii-banner pre a:hover {
background-color: rgba(255, 255, 255, 0.2);
padding: 5px 15px;
border-radius: 10px;
}
/* Horizontal line separator */
.ascii-line {
width: 80%;
margin: 20px auto;
border: none;
height: 2px;
background: linear-gradient(to right, rgba(255, 64, 129, 0), rgba(255, 64, 129, 1), rgba(255, 64, 129, 0));
}
/* Center the entire container */
.ascii-header, .ascii-table, .ascii-banner {
text-align: center;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
/* Hover effect for entire sections */
.ascii-header:hover, .ascii-table:hover, .ascii-banner:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
}
/* Buttons styling */
button, input[type="submit"] {
background-color: #ff4081;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: inherit;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
button:hover, input[type="submit"]:hover {
background-color: #1e90ff;
}
/* Form fields style */
input[type="text"], input[type="email"], textarea {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
margin: 10px 0;
color: #fff;
width: 100%;
max-width: 600px;
font-size: 16px;
border-radius: 5px;
}
/* Focus state for form fields */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
border-color: #ff4081;
box-shadow: 0 0 10px rgba(255, 64, 129, 0.5);
outline: none;
}
/* Table adjustments for smaller screens */
@media (max-width: 768px) {
.ascii-table {
font-size: 12px;
}
.ascii-table th:nth-child(1), .ascii-table td:nth-child(1) {
width: 30%;
}
.ascii-table th:nth-child(2), .ascii-table td:nth-child(2) {
width: 45%;
}
.ascii-table th:nth-child(3), .ascii-table td:nth-child(3) {
width: 25%;
}
/* Hide ASCII art on smaller screens */
.ascii-art-background {
display: none;
}
button, input[type="submit"] {
font-size: 14px;
}
}
/* Larger screens adjustments */
@media (min-width: 1024px) {
.ascii-table pre {
font-size: 14px;
}
button, input[type="submit"] {
font-size: 18px;
}
}

10
routes/about.js Normal file
View File

@@ -0,0 +1,10 @@
const express = require('express');
const router = express.Router();
const path = require('path');
// Serve about.html
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/about.html'));
});
module.exports = router;

10
routes/art.js Normal file
View File

@@ -0,0 +1,10 @@
const express = require('express');
const router = express.Router();
const path = require('path');
// Route to serve the art page
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/art.html'));
});
module.exports = router;

107
routes/blog.js Normal file
View File

@@ -0,0 +1,107 @@
const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const { marked } = require('marked');
const fm = require('front-matter'); // For parsing front matter
const RSS = require('rss'); // Import RSS package
// Directory containing Markdown blog posts
const blogDirectory = path.join(__dirname, '../blog');
// Function to get all Markdown files in the blog directory
function getBlogPosts() {
const files = fs.readdirSync(blogDirectory);
return files.filter(file => file.endsWith('.md')).map(file => {
const content = fs.readFileSync(path.join(blogDirectory, file), 'utf-8');
// Parse front matter
const parsed = fm(content);
const { title, date, preview } = parsed.attributes; // Get title, date, and preview from front matter
// Remove Markdown formatting by converting to HTML and stripping the tags
const htmlContent = marked(parsed.body);
const plainText = htmlContent.replace(/<\/?[^>]+(>|$)/g, ""); // Strip HTML tags from Markdown-converted content
// Truncate the plain text to create the preview
const generatedPreview = plainText.split(' ').slice(0, 30).join(' ').substring(0, 150); // First 150 characters
// Use the preview from front matter if available, otherwise use the generated plain-text preview
const finalPreview = preview || generatedPreview;
const slug = file.replace('.md', ''); // Remove file extension for slug
console.log(`Preview for ${title}: ${finalPreview}`); // Log the preview to verify
return {
title,
date,
preview: finalPreview, // Ensure the correct preview is sent
slug
};
});
}
// New Route to generate RSS feed - put this before the dynamic slug route
router.get('/rss.xml', (req, res) => {
const feed = new RSS({
title: 'The Klein Blog',
description: 'Latest updates from The Klein Blog',
feed_url: `${req.protocol}://${req.get('host')}/rss.xml`,
site_url: `${req.protocol}://${req.get('host')}`,
language: 'en',
pubDate: new Date().toUTCString(),
});
// Add each blog post to the RSS feed
const posts = getBlogPosts();
posts.forEach(post => {
feed.item({
title: post.title,
description: post.preview, // Short preview for the RSS feed
url: `${req.protocol}://${req.get('host')}/blog/${post.slug}`, // Link to the blog post
date: post.date, // Published date
});
});
// Set the content type to XML and send the RSS feed
res.set('Content-Type', 'application/rss+xml');
res.send(feed.xml());
});
// Route to serve the blog posts as JSON
router.get('/blog-posts', (req, res) => {
const posts = getBlogPosts(); // Get all blog posts
res.json(posts); // Return posts as JSON to be fetched by the client-side JS
});
// Route to serve the main blog page (serve blog.html)
router.get('/', (req, res) => {
// Render the blog.html file from the views directory
res.sendFile(path.join(__dirname, '../views/blog.html'));
});
marked.setOptions({
gfm: true, // GitHub-flavored Markdown
breaks: true, // Enable line breaks
smartypants: true, // Use smart quotes, dashes, etc.
sanitize: false, // This is the important option to allow HTML tags
});
// Route to serve individual blog posts dynamically
router.get('/:slug', (req, res) => {
const { slug } = req.params;
const filePath = path.join(blogDirectory, `${slug}.md`);
if (fs.existsSync(filePath)) {
const content = fs.readFileSync(filePath, 'utf-8');
const parsed = fm(content); // Parse front matter
const htmlContent = marked(parsed.body); // Convert markdown body to HTML
res.render('post', { content: htmlContent, title: parsed.attributes.title, date: parsed.attributes.date }); // Render post view
} else {
res.status(404).send('Blog post not found');
}
});
module.exports = router;

78
routes/contact.js Normal file
View File

@@ -0,0 +1,78 @@
const express = require('express');
const router = express.Router();
const path = require('path');
const nodemailer = require('nodemailer');
const rateLimit = require('express-rate-limit');
const fs = require('fs');
require('dotenv').config(); // Load environment variables
// Define the log file path
const logFilePath = path.join(__dirname, '../stderr.log');
// Helper function to log errors to stderr.log
function logError(message) {
const logMessage = `${new Date().toISOString()} - ${message}\n`;
fs.appendFile(logFilePath, logMessage, (err) => {
if (err) {
console.error('Error writing to stderr.log:', err);
}
});
}
// Nodemailer setup using environment variables
const transporter = nodemailer.createTransport({
service: 'gmail', // Use your email service (like Gmail, Outlook, etc.)
auth: {
user: process.env.EMAIL_USER, // Fetch email from environment variable
pass: process.env.EMAIL_PASSWORD // Fetch password from environment variable
}
});
// Rate limiter to allow only one submission per 24 hours per IP
const contactFormLimiter = rateLimit({
windowMs: 24 * 60 * 60 * 1000, // 24 hours
max: 1, // Limit each IP to 1 request per window
message: 'You have already submitted a message. Please try again after 24 hours.'
});
// Route to serve the contact page
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/contact.html'));
});
// Route to handle form submissions
router.post('/submit-contact-form', contactFormLimiter, (req, res) => {
const { name, email, message } = req.body;
// Backend validation for the form fields
if (!name || !email || !message) {
logError('Form submission failed: Missing fields.');
return res.status(400).json({ success: false, message: 'All fields are required.' });
}
// Check if environment variables are set
if (!process.env.EMAIL_USER || !process.env.EMAIL_PASSWORD) {
logError('Error: EMAIL_USER or EMAIL_PASSWORD environment variables not set.');
return res.status(500).json({ success: false, message: 'Server configuration error: Environment variables not set.' });
}
// Email options for sending the message
const mailOptions = {
from: email, // Sender's email
to: process.env.EMAIL_USER, // Your email where you'll receive messages
subject: `New Contact Form Submission from ${name}`,
text: `You have received a new message from ${name} (${email}):\n\n${message}`
};
// Send the email
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
logError(`Error sending email: ${error.message}`);
return res.status(500).json({ success: false, message: 'Error sending email.' });
}
logError(`Email sent successfully: ${info.response}`);
res.json({ success: true, message: 'Your message has been sent successfully.' });
});
});
module.exports = router;

44
routes/index.js Normal file
View File

@@ -0,0 +1,44 @@
const express = require('express');
const router = express.Router();
const path = require('path');
// Function to detect curl requests
function isCurl(req) {
const userAgent = req.headers['user-agent'];
return userAgent && userAgent.includes('curl');
}
// Serve index.html for browser requests or plain text for curl
router.get('/', (req, res) => {
if (isCurl(req)) {
res.type('text/plain');
res.send(`
_ ___ _ _____ _
| |/ / | (_) | __ \\ (_)
| ' /| | ___ _ _ __ | |__) |_ _ _ __ _ ___
| < | |/ _ \\ | '_ \\| ___/ _\` | '_ \\| |/ __|
| . \\| | __/ | | | | | | (_| | | | | | (__
|_|\\_\\_|\\___|_|_| |_|_| \\__,_|_| |_|_|\\___|
My Awesome Website
Source: https://github.com/your-username/your-repo
+ ------------------------- + -------------------------------------- + -------------------- +
| TITLE | DESCRIPTION | VIDEO |
+ ------------------------- + -------------------------------------- + -------------------- +
| | | |
| | | |
| | | |
| | | |
+ ------------------------- + -------------------------------------- + -------------------- +
last updated: ${new Date().toUTCString()}
`);
} else {
// Render HTML for normal browser requests
res.sendFile(path.join(__dirname, '../views/index.html'));
}
});
module.exports = router;

9
routes/monitor.js Normal file
View File

@@ -0,0 +1,9 @@
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/monitor.html'));
});
module.exports = router;

31
routes/projects.js Normal file
View File

@@ -0,0 +1,31 @@
const express = require('express');
const router = express.Router();
const axios = require('axios');
const path = require('path');
// Route for /projects page
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views/projects.html'));
});
// Route for fetching GitHub projects dynamically via JavaScript
router.get('/fetch', async (req, res) => {
const page = req.query.page || 1;
const per_page = req.query.per_page || 100; // Maximum is 100 items per page
try {
// Fetch user's GitHub repositories with pagination
const response = await axios.get(`https://api.github.com/users/kleinpanic/repos`, {
params: {
page,
per_page,
},
});
res.json(response.data);
} catch (error) {
res.status(500).json({ error: 'Unable to fetch GitHub repositories.' });
}
});
module.exports = router;

314
server.js Normal file
View File

@@ -0,0 +1,314 @@
const express = require('express');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
const cors = require('cors');
const xssClean = require('xss-clean');
const mongoSanitize = require('express-mongo-sanitize');
const cookieParser = require('cookie-parser');
const path = require('path');
const fs = require('fs');
const app = express();
const port = 8080; // Port 80 for HTTP
// Set security HTTP headers using Helmet
app.use(helmet());
// Rate limiting to prevent DoS attacks
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100, // limit each IP to 100 requests per windowMs
message: 'Too many requests from this IP, please try again later',
});
app.use(limiter);
// Enable CORS for external API calls
app.use(cors());
// Sanitize data to prevent NoSQL injection and XSS attacks
app.use(mongoSanitize());
app.use(xssClean());
// Body parser to read data into req.body
app.use(express.json({ limit: '10kb' }));
// Cookie-parser middleware
app.use(cookieParser());
// Set EJS as the view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); // Set the views directory
// Function to detect w3m requests
function isW3M(req) {
const userAgent = req.headers['user-agent'];
return userAgent && userAgent.toLowerCase().includes('w3m');
}
// Function to detect Lynx
function isLynx(req) {
const userAgent = req.headers['user-agent'];
return userAgent && userAgent.toLowerCase().includes('lynx');
}
// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));
// Function to detect curl requests
function isCurl(req) {
const userAgent = req.headers['user-agent'];
return userAgent && userAgent.includes('curl');
}
// Serve the install.sh script dynamically based on query parameter repo_id
app.get('/install.sh', (req, res) => {
const repoId = req.query.repo_id;
if (!repoId) {
return res.status(400).send('Error: No repo_id provided.');
}
// Path to the install.sh script
const scriptPath = path.join(__dirname, 'public/scripts/install.sh');
// Make sure the file exists
if (!fs.existsSync(scriptPath)) {
return res.status(404).send('Error: install.sh not found.');
}
// Read the install.sh script and send it as a response with the correct content type
res.setHeader('Content-Type', 'application/x-sh');
fs.createReadStream(scriptPath).pipe(res);
});
// In-house IP address retrieval API
app.get('/ip', (req, res) => {
//const userIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
const userIp = (req.headers['x-forwarded-for'] || req.connection.remoteAddress).split(',')[0].trim();
// If request is made using curl, send a plain text response
if (isCurl(req)) {
res.setHeader('Content-Type', 'text/plain');
res.send(`Public IP: ${userIp}\n`);
} else {
// request is made on browser, send simple HTML response
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Public IP</title>
<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;
}
.ip-container {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 20px;
text-align: center;
width: fit-content;
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
margin: 20px 0;
}
.ip-container:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3);
}
.ip-container p {
font-size: 24px;
color: #ff4081;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<!-- Clickable container that redirects to the homepage -->
<a href="/">
<div class="ip-container">
<p>Public IP: ${userIp}</p>
</div>
</a>
</body>
</html>
`);
}
});
// Function to get the gradient title from logo.txt
function getGradientTitle() {
const logoPath = path.join(__dirname, 'public', 'logo.txt'); // Ensure this points to where your file is located
try {
// Read the logo file containing pre-colored ANSI text
const logo = fs.readFileSync(logoPath, 'utf8');
return logo;
} catch (error) {
console.error('Error reading logo.txt:', error);
return ''; // Return empty string if the file cannot be read
}
}
function getDescription() {
//return `\nx1b[90mKleinPanic\nLinux Projects and Utilities.\nhttps://kleinpanic.com\n\nGitHub: https://github.com/kleinpanic\x1b[0m`;
return `
\x1b[90mKleinPanic\x1b[0m
\x1b[90mLinux Projs and Utils.\x1b[0m
\x1b[34mhttps://kleinpanic.com\x1b[0m
\x1b[90mGitHub:\x1b[0m \x1b[34mhttps://github.com/kleinpanic\x1b[0m
`;
}
// Function to color each table row
function getColoredTableRow(name, description, installCommand) {
const nameColor = '\x1b[38;5;36m'; // Green for project name
const descriptionColor = '\x1b[38;5;33m'; // Blue for description
const installCommandColor = '\x1b[38;5;135m'; // Cyan for install command
const resetColor = '\x1b[0m'; // Reset color
return `| ${nameColor}${name}${resetColor} | ${descriptionColor}${description}${resetColor} | ${installCommandColor}${installCommand}${resetColor} |`;
}
const axios = require('axios');
// Serve the curl-specific route
app.get('/', async (req, res) => {
if (isCurl(req)) {
try {
//const response = await axios.get('https://api.github.com/users/kleinpanic/repos');
const response = await axios.get('https://api.github.com/users/kleinpanic/repos', {
params: {
per_page: 100, // Request up to 100 repositories
}
});
const repos = response.data;
// Function to truncate text with "..." if needed
function truncateText(text, maxLength) {
return text.length > maxLength ? text.slice(0, maxLength - 3) + '...' : text;
}
// Function to pad text for alignment
function padText(text, length) {
return text.padEnd(length, ' ');
}
// Combine title and description lines
const titleLines = getGradientTitle().split('\n');
const descriptionLines = getDescription().split('\n');
// Combine title and description side by side line by line
let combinedTitleDescription = '';
for (let i = 0; i < titleLines.length || i < descriptionLines.length; i++) {
const titleLine = titleLines[i] || ''; // Handle empty title lines
const descriptionLine = descriptionLines[i] || ''; // Handle empty description lines
combinedTitleDescription += `${titleLine} ${descriptionLine}\n`; // Combine them
}
// Create the table headers with grey borders
let tableHeader = `\x1b[90m+ ------------------------- + -------------------------------------- + ---------------------- +
| PROJECT NAME | DESCRIPTION | INSTALL COMMAND |
+ ------------------------- + -------------------------------------- + ---------------------- +\x1b[0m`;
// Format the project list into the table rows with color
const tableRows = repos.map((repo, index) => {
const name = padText(truncateText(repo.name || 'Unknown', 25), 25);
const description = padText(truncateText(repo.description || 'No description', 38), 38);
// Add extra whitespace for the first 9 install commands
const installCommand = index < 9
? padText(`/install.sh?repo_id=${index + 1} `, 20) // Adding a space at the end for alignment
: padText(`/install.sh?repo_id=${index + 1}`, 20);
return getColoredTableRow(name, description, installCommand);
}).join('\n');
// Create the table footer with last updated
const tableFooter = `\x1b[90m+ ------------------------- + -------------------------------------- + ---------------------- +
Last updated: ${new Date().toUTCString()}\n\x1b[0m`; // Newline added at the end
// Combine everything together
const output = `
${combinedTitleDescription}
${tableHeader}
${tableRows}
${tableFooter}`;
res.setHeader('Content-Type', 'text/plain');
res.send(output);
} catch (error) {
res.status(500).send('Error fetching projects from GitHub.\n');
}
} else if (isW3M(req)) {
res.sendFile(path.join(__dirname, 'views', 'w3m-index.html')); // Serve w3m-specific index
} else if (isLynx(req)) {
res.sendFile(path.join(__dirname, 'views', 'lynx-index.html')); // Serve Lynx-specific index
} else {
// Serve index.html for browser requests
res.sendFile(path.join(__dirname, 'views', 'index.html'));
}
});
// Serve projects page with different views for w3m
app.get('/projects', (req, res) => {
if (isW3M(req)) {
res.sendFile(path.join(__dirname, 'views', 'w3m-projects.html')); // Serve w3m-friendly HTML
} else {
res.sendFile(path.join(__dirname, 'views', 'projects.html')); // Serve normal HTML for other browsers
}
});
// Routes
const indexRoute = require('./routes/index');
const aboutRoute = require('./routes/about');
const projectsRoute = require('./routes/projects');
const blogRoute = require('./routes/blog');
const contactRoute = require('./routes/contact');
const monitorRoute = require('./routes/monitor');
const artRoute = require('./routes/art');
app.use('/', indexRoute);
app.use('/about', aboutRoute);
app.use('/projects', projectsRoute);
app.use('/blog', blogRoute);
app.use('/contact', contactRoute);
app.use('/monitor', monitorRoute);
app.use('/art', artRoute);
// Error handling middleware for CSRF errors - ADD LATER AFTER FIXING PUBLIC JS ISSUES
app.use((err, req, res, next) => {
if (err.code === 'EBADCSRFTOKEN') {
res.status(403).send('Form tampered with.');
} else {
next(err);
}
});
// Start the server on port 80
app.listen(port, () => {
console.log(`Server running on http://kleinpanic.com`);
});

0
stderr.log Normal file
View File

0
tmp/restart.txt Normal file
View File

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>