From 4ab571290f64527bc321df8f1267376ad9b9043d Mon Sep 17 00:00:00 2001 From: salmonik Date: Sat, 7 Feb 2026 00:45:28 +0100 Subject: demake the site, and remove external components --- contact.html | 49 ++++++++ index.html | 124 +++---------------- js/gradient.js | 53 -------- projects.html | 49 ++++++++ styles.css | 374 ++++++++++----------------------------------------------- 5 files changed, 179 insertions(+), 470 deletions(-) create mode 100644 contact.html delete mode 100644 js/gradient.js create mode 100644 projects.html diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..c95e7a1 --- /dev/null +++ b/contact.html @@ -0,0 +1,49 @@ + + + + + + + + Contact - SalmonPage + + + +
+
+ +
+
+ +
+
+

There are many secure ways to contact me:

+ +
+
+ + + + diff --git a/index.html b/index.html index e6286ce..1ef0e08 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,16 @@ + + SalmonPage - - - @@ -15,9 +19,8 @@ @@ -27,109 +30,12 @@
-
-
Hi, my name is
-

Salmon.

-

I build things.

-

I mainly do C++ and whatnot.

-
- Contacts - What did I do -
-
-
- Salmon -
-
-
-
- -
-
-

Who am I?

-
-
-

I am salmon, mainly known for SalmonPaste. Creator of SalmonPaste and a few discord bots.

-

This is my site, proudly hosted on my cheap ass server.

-

Things I work with:

-
- Linux - C++ - Python - Retards - More Linux -
-
-
- About Me -
-
-
-
- -
-
-

My Projects

-
- -
-

SalmonPaste

-

Unmaintained TF2 x64 cheat. greatest.

-
- Discord Server -
-
- C++ - FWare based - Dead -
-
- - -
-

Discord Bots

-

A few bots I made.

-
- My Codeberg -
-
- Python - Pycord - Open Source -
-
- - -
-

FileSiever

-

Extremely fast C++ CLI app to filter out lines from files.

-
- Project's Codeberg page -
-
- C++ - Open Source - CLI -
-
-
-
-
- -
-
-
-

How to contact me

-
- Email - GPG Key - Discord - Telegram -
+
+
Hi, my name is
+

Salmon.

+

I am an open software enthusiast.

+ Salmon
@@ -137,8 +43,8 @@ - \ No newline at end of file diff --git a/js/gradient.js b/js/gradient.js deleted file mode 100644 index 28178f7..0000000 --- a/js/gradient.js +++ /dev/null @@ -1,53 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - // Get the body element to update the cursor position - const body = document.documentElement; - let mouseX = 0; - let mouseY = 0; - let smoothX = 0; - let smoothY = 0; - - // Smoothing factor (lower = smoother, higher = snappier) - const smoothing = 0.1; - - // Handle mouse movement - const handleMouseMove = (e) => { - mouseY = e.clientY - mouseX = e.clientX - - }; - - // Smooth the cursor movement - const updateCursorLight = () => { - // Apply smoothing - smoothX += (mouseX - smoothX) * smoothing; - smoothY += (mouseY - smoothY) * smoothing; - - // Update CSS variables for the cursor position - body.style.setProperty('--cursor-x', `${smoothX}px`); - body.style.setProperty('--cursor-y', `${smoothY}px`); - - // Continue the animation loop - requestAnimationFrame(updateCursorLight); - }; - - // Add event listeners - window.addEventListener('mousemove', handleMouseMove); - - // Handle touch events for mobile - window.addEventListener('touchmove', (e) => { - const touch = e.touches[0]; - handleMouseMove({ - clientX: touch.clientX, - clientY: touch.clientY - }); - }, { passive: false }); - - // Initialize cursor position to center of screen - mouseX = window.innerWidth / 2; - mouseY = window.innerHeight / 2; - smoothX = mouseX; - smoothY = mouseY; - - // Start the animation loop - updateCursorLight(); -}); diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..1cb2dda --- /dev/null +++ b/projects.html @@ -0,0 +1,49 @@ + + + + + + + + Projects - SalmonPage + + + +
+
+ +
+
+ +
+
+

My Codeberg page where it all lives: https://codeberg.org/salmonik

+

This site source code is hosted on Codeberg: https://codeberg.org/salmonik/site

+

suckless st fork: https://codeberg.org/salmonik/suckless-term

+

dotfiles: https://codeberg.org/salmonik/dotfiles

+

senator sperma discord bot I made for my group chat: https://codeberg.org/salmonik/senator-sperma

+

[dead] overlord discord bot made for my now-dead discord server: https://codeberg.org/salmonik/overlord

+

[dead] user installed bot for discord I made for fun: https://codeberg.org/salmonik/userbot

+

[dead] FileSiever: a bad attempt at grep: https://codeberg.org/salmonik/FileSiever

+
+
+ + + + diff --git a/styles.css b/styles.css index 8a9dccd..7bdf11b 100644 --- a/styles.css +++ b/styles.css @@ -1,64 +1,42 @@ +/* + This File is part of SalmonPage + Copyright (C) 2025 Salmon + https://codeberg.org/salmonik/site + License: GPL-3.0 +*/ + /* Base Styles */ :root { - --cursor-x: 50%; - --cursor-y: 50%; - --bg: #111827; - --bg-secondary: #1f2937; - --bg-tertiary: #374151; - --text: #f9fafb; - --text-secondary: #d1d5db; - --primary: #3b82f6; - --primary-hover: #2563eb; - --border: #374151; - --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --white: #ffffff; - --black: #111827; + --text-primary: #e0e0e0; + --text-secondary: #999999; + --border: #333333; + --accent: #3366ff; + --bg-primary: #0a0a0a; + --bg-secondary: #000066; + --bg-footer: #2e2e2e; } -/* Base background and cursor light effect */ html { - scroll-behavior: smooth; - scroll-padding-top: 80px; /* Adjust this value based on your header height */ + scroll-padding-top: 80px; } html, body { - min-height: 100%; margin: 0; padding: 0; - background: #111827; /* Base dark background */ - overflow-x: hidden; - /* Default cursor is now visible */ -} - -/* Cursor light effect */ -body::before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: radial-gradient( - circle at var(--cursor-x, 50%) var(--cursor-y, 50%), - rgba(31, 41, 55, 0.8) 0%, - rgba(17, 24, 39, 0.95) 70%, - #111827 100% - ); - pointer-events: none; - z-index: 0; -} - -/* Ensure content is above the cursor effect */ -body > * { - position: relative; - z-index: 1; + background-color: var(--bg-primary); + font-family: Arial, sans-serif; + line-height: 1.4; + color: var(--text-primary); + min-height: 100vh; + display: flex; + flex-direction: column; } -body { - font-family: 'Inter', sans-serif; - line-height: 1.6; - color: var(--text); - background-color: var(--bg); +main { + flex: 1; + display: flex; + align-items: center; + justify-content: center; } .container { @@ -69,14 +47,12 @@ body { /* Header */ header { - background: rgba(17, 24, 39, 0.8); - backdrop-filter: blur(8px); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + background: var(--bg-secondary); position: fixed; width: 100%; top: 0; - z-index: 100; - padding: 1.5rem 0; + z-index: 1000; + padding: 1rem 0; border-bottom: 1px solid var(--border); } @@ -89,25 +65,23 @@ nav { .logo { font-size: 1.5rem; font-weight: 700; - color: var(--primary); + color: var(--text-primary); text-decoration: none; } .nav-links a { - color: var(--text); + color: var(--text-primary); text-decoration: none; margin-left: 2rem; font-weight: 500; - transition: color 0.3s ease; } .nav-links a:hover { - color: var(--primary); + color: var(--accent); } /* Hero Section */ .hero { - min-height: 100vh; display: flex; align-items: center; padding: 8rem 0 4rem; @@ -119,7 +93,7 @@ nav { .hero-content { display: grid; grid-template-columns: 1fr 1fr; - gap: 4rem; + gap: 2rem; align-items: center; width: 100%; } @@ -128,292 +102,76 @@ nav { max-width: 600px; } -.hero-image { - display: flex; - justify-content: center; - align-items: center; -} - -.hero-image .hero-img { - width: 100%; - max-width: 300px; +.hero-img { + max-width: 100%; height: auto; - border-radius: 1rem; - border: none; - box-shadow: none; + border-radius: 0.5rem; } .greeting { font-size: 1.25rem; - color: var(--primary); + color: var(--accent); margin-bottom: 1rem; } -h1 { +main h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; - margin-bottom: 1.5rem; - background: linear-gradient(90deg, #60a5fa, #3b82f6); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; -} - -.tagline { - font-size: 1.25rem; - color: var(--text-secondary); - margin-bottom: 2rem; - max-width: 600px; -} - -/* Buttons */ -.btn { - display: inline-block; - padding: 0.75rem 1.5rem; - border-radius: 0.375rem; - font-weight: 500; - text-decoration: none; - transition: all 0.3s ease; - margin-right: 1rem; -} - -.btn-primary { - background-color: var(--primary); - color: white; - border: 2px solid var(--primary); -} - -.btn-primary:hover { - background-color: var(--primary-hover); - border-color: var(--primary-hover); -} - -.btn-outline { - background-color: transparent; - color: var(--primary); - border: 2px solid var(--primary); -} - -.btn-outline:hover { - background-color: rgba(59, 130, 246, 0.1); - color: var(--primary-hover); - border-color: var(--primary-hover); -} - -/* Sections */ -section { - padding: 6rem 0; - background-color: var(--bg); -} - -.section-title { + margin: 0 0 1.5rem 0; + color: var(--text-primary); text-align: center; - font-size: 2.25rem; - margin-bottom: 3rem; } -/* About Section */ -.about { - padding: 6rem 0; - background: transparent; - position: relative; - z-index: 1; -} - -.about-content { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - align-items: center; -} - -.about-image { - display: flex; - justify-content: center; - align-items: center; -} - -.about-img { - max-width: 100%; - height: auto; - border-radius: 0.5rem; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); -} - -.skills { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.5rem; -} - -.skill-tag { - background-color: rgba(59, 130, 246, 0.1); - color: #60a5fa; - padding: 0.375rem 0.75rem; - border-radius: 9999px; - font-size: 0.875rem; - border: 1px solid rgba(59, 130, 246, 0.2); -} - -/* Projects Section */ -.projects { - background: transparent; - padding: 6rem 0; -} - -.projects-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 2rem; - margin-top: 2rem; -} - -.project-card { - background: var(--bg-secondary); - border-radius: 0.5rem; - padding: 1.5rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; - border: 1px solid var(--border); -} - -.project-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); +@media (max-width: 768px) { + main h1 { + font-size: 2.25rem; + } } -.project-title { +.tagline { font-size: 1.25rem; - font-weight: 600; - color: var(--text); - margin-bottom: 0.75rem; -} - -.project-description { color: var(--text-secondary); - margin-bottom: 1.25rem; - line-height: 1.6; -} - -.project-links { - margin-bottom: 1rem; -} - -.project-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: 1rem; -} - -.project-tag { - background: rgba(96, 165, 250, 0.1); - color: #60a5fa; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 500; -} - -/* Contact Section */ -.contact { - background-color: var(--bg-secondary); - text-align: center; - border-radius: 1rem; - margin: 2rem auto; - max-width: 1400px; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.contact-content { - max-width: 1400px; - margin: 0 auto; - text-align: center; + margin-bottom: 2rem; + max-width: 600px; } -.contact-methods { - display: flex; - flex-wrap: wrap; - gap: 15px; - justify-content: center; - margin: 20px 0; - padding: 0 20px; -} -.contact-methods .btn { - margin: 5px; - flex: 0 0 auto; -} /* Footer */ footer { text-align: center; - padding: 2rem 0; + padding: 0.1rem 0; color: var(--text-secondary); font-size: 0.875rem; - background-color: var(--bg-secondary); + background-color: var(--bg-footer); border-top: 1px solid var(--border); } -/* Responsive */ -@media (max-width: 1024px) { - .hero-content { - grid-template-columns: 1fr; - gap: 3rem; - text-align: center; - } - .hero-text { - margin: 0 auto; - } - .cta-buttons { - justify-content: center; - } + +main p { + margin-bottom: 1rem; + line-height: 1.6; } -@media (max-width: 768px) { - .nav-links { - display: none; - } - - h1 { - font-size: 2.25rem; - } - - .about-content { - grid-template-columns: 1fr; - gap: 2rem; - text-align: center; - } - - .skills { - justify-content: center; - } - - .about-img { - max-width: 80%; - margin: 0 auto; - } +main ul { + margin-bottom: 2rem; + padding-left: 2rem; } -/* Hover Effects */ -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); +main li { + margin-bottom: 0.5rem; + line-height: 1.6; } -.btn-outline:hover { - transform: translateY(-2px); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); +main a { + color: #718096; + text-decoration: underline; } -/* Image Placeholder */ -.image-placeholder { - background-color: var(--bg-tertiary); - height: 300px; - border-radius: 0.5rem; - border: 1px solid var(--border); +main a:hover { + color: #a0aec0; } + -- cgit v1.2.3