Fixed my cringe ahh profile

This commit is contained in:
2025-08-27 18:12:08 +02:00
parent 18d0cbbf94
commit 54e4bc705c
2 changed files with 281 additions and 605 deletions

View File

@@ -50,7 +50,7 @@ export default function Index() {
if (status === "online") { if (status === "online") {
setBorderStatus("border-green-500"); setBorderStatus("border-green-500");
} else if (status === "offline") { } else if (status === "offline") {
setBorderStatus("border-red-500"); setBorderStatus("border-gray-500");
} else if (status === "dnd") { } else if (status === "dnd") {
setBorderStatus("border-red-600"); setBorderStatus("border-red-600");
} else if (status === "idle") { } else if (status === "idle") {
@@ -62,7 +62,7 @@ export default function Index() {
useEffect(() => { useEffect(() => {
fetch( fetch(
"https://shsf-api.cottonfieldworkers.shop/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6" "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
) )
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
@@ -114,7 +114,7 @@ export default function Index() {
/> />
</div> </div>
<div> <div>
<p className="text-2xl text-gray-300">Self-proclaimed Developer</p> <p className="text-2xl text-gray-300">A Self-proclaimed Developer</p>
</div> </div>
</div> </div>
@@ -129,170 +129,26 @@ export default function Index() {
> >
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
<p className="text-gray-300 text-lg leading-relaxed"> <p className="text-gray-300 text-lg leading-relaxed">
Hey! I'm <span className="underline font-bold">Paul</span>, a Hi! I'm <span className="underline font-bold">Paul</span>, a
passionate Developer from{" "} passionate developer from <span className="font-bold">Germany</span> 🇩🇪.
<span className="bg-gradient-to-r from-gray-800 via-red-500 to-yellow-400 font-bold bg-clip-text text-transparent">
Germany
</span>{" "}
🇩🇪.
<span className="block mt-4"> <span className="block mt-4">
I specialize in JavaScript and Node.js development, crafting I specialize in JavaScript/TypeScript development, building fun backend systems, experimenting with frontend, and occasionally breaking TypeScript.
digital experiences that make a difference. When I'm not </span>
coding, you'll find me gaming or scrolling through my <span className="block mt-4">
Instagram feed. I'm a big fan of open-source projects and I hope I can make a small but meaningful impact through my work.
</span> </span>
</p> </p>
<div className="bg-white/5 p-6 rounded-lg backdrop-blur-sm">
<h3 className="text-xl font-bold text-gray-100 mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
About Me
</h3>
<div className="grid grid-cols-4 gap-4">
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🤓</span>
<span>Nerd</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🎮</span>
<span>Gamer</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🛠</span>
<span>Developer</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">👥</span>
<span>Introvert</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* My Blog Posts */}
<section className="w-full">
<h2
className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
style={{ lineHeight: "normal" }}
>
Blog Posts
</h2>
<p className="text-gray-300 text-lg mb-4 text-center">
Man i love this posting thing, can't you tell?
</p>
<div
className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
flex flex-col md:flex-row gap-8 items-center"
>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
{posts.map((post) => (
<article
key={post.id}
className="p-6 rounded-xl border border-gray-700 bg-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-xl
backdrop-blur-sm hover:bg-opacity-90"
>
<div className="flex flex-wrap gap-2 mb-3">
{!post.hide_date && (
<time className="text-sm text-gray-500">
{new Date(post.date).toLocaleDateString()}
</time>
)}
{post.tags.map((tag) => (
<span
key={tag}
className="px-3 py-1 text-sm bg-gray-900 text-gray-100 rounded-full"
>
{tag}
</span>
))}
</div>
<h3 className="text-xl font-bold mb-3 text-gray-100">
{post.title}
</h3>
<p className=" text-gray-400 text-base mb-4">
{post.excerpt}
</p>
<Link
to={`/blog/${post.access}`}
className="inline-flex items-center px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-full font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
>
Read More
<svg
className="w-4 h-4 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
</Link>
</article>
))}
</div>
</div>
</section>
{/* My Dawg */}
<section className="w-full">
<h2
className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
style={{ lineHeight: "normal" }}
>
Ma Dawg
</h2>
<div className="p-4 sm:p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg flex flex-col gap-8 items-center">
<div className="flex-1 space-y-6 w-full">
<img
src="https://cdn.reversed.dev/pictures/20250103_121234.jpg"
alt="Charly Image"
className="w-full h-64 sm:h-96 object-cover rounded-lg shadow-lg"
/>
<p className="text-gray-300 text-base sm:text-lg leading-relaxed">
This is Charly🙏 This lil fella is about{" "}
<span className="italic">13</span> Years old. Very mixed.
</p>
<div className="bg-white/5 p-4 sm:p-6 rounded-lg backdrop-blur-sm">
<h3 className="text-xl font-bold text-gray-100 mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
Charly
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-gray-800 p-4 rounded-lg">
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🗣️</span>
<span>the guy is a little deaf</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🚶</span>
<span>Runs faster than me</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🐶</span>
<span>Barks</span>
</div>
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
<span className="text-2xl">🐕</span>
<span>Is a Dog (debatable)</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
{/* Projects Section */} {/* Projects Section */}
<section className="w-full"> <section className="w-full">
<h2 className="text-3xl font-bold text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"> <h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
Projects Projects
</h2> </h2>
<p className="text-gray-300 text-lg mb-4 text-left"> <p className="text-gray-300 text-lg mb-4 text-center">
Here are some of my projects. Some are open-source, some are not. Here are some of my favorite projects. Some are open-source, some are not.
</p> </p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
{projects.map((project, index) => ( {projects.map((project, index) => (
@@ -364,30 +220,6 @@ export default function Index() {
<span>Source Code</span> <span>Source Code</span>
</a> </a>
)} )}
{project.blog_post && (
<a
href={project.blog_post}
className="inline-flex items-center px-4 py-2 bg-gray-800
text-gray-200 rounded-lg font-medium transition-all duration-300
hover:bg-gray-700 hover:shadow-lg hover:scale-105 border border-gray-600"
>
<svg
className="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
/>
</svg>
<span>Read Blog</span>
</a>
)}
</div> </div>
</div> </div>
))} ))}
@@ -404,12 +236,11 @@ export default function Index() {
transform transition-all duration-300 hover:scale-105 hover:shadow-xl" transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
> >
<p className="text-gray-300 text-lg text-center"> <p className="text-gray-300 text-lg text-center">
You can contact me via Email or on Discord. I'm always open for a Feel free to reach out to me via Discord or Email. I usually respond quicker to emails.
chat or a <span className="line-through">coffee</span> tea🫖
</p> </p>
<div className="flex flex-col sm:flex-row gap-3 justify-center mt-6"> <div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
<a <a
href="mailto:paul.w@betternews.app" href="mailto:space@reversed.dev"
className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-full font-medium transition-all duration-300 text-white rounded-full font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg" hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
@@ -428,125 +259,22 @@ export default function Index() {
</div> </div>
</div> </div>
</section> </section>
{/* My "Skills" */}
<section className="w-full">
<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
Skills
</h2>
<p className="text-gray-300 text-lg mb-2 text-center">
Skills? What dat
</p>
<div
className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
hover:shadow-xl"
>
<ul className="space-y-4 text-center">
{skills.map((skill, index) => (
<li
key={index}
className="flex items-center gap-4 text-gray-300 text-lg transition-all duration-300 hover:text-blue-400"
>
{skill.image && (
<img
src={skill.image}
alt={skill.name}
className="h-12 w-12 object-cover rounded-full shadow-lg"
/>
)}
<span>
{skill.name} - {skill.description}
</span>
</li>
))}
</ul>
</div>
</section>
{/* What's Next Section */}
<section className="w-full">
<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
What's Next?
</h2>
<div
className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
>
<ul className="space-y-4 text-center">
<li className="text-gray-300 text-lg transition-all duration-300 hover:text-blue-400">
• Learning more ways to build Apps
</li>
<li className="text-gray-300 text-lg transition-all duration-300 hover:text-blue-400">
• Building more fun little open-source Projects
</li>
<li className="text-gray-300 text-lg transition-all duration-300 hover:text-blue-400">
• Working on existing Projects
</li>
</ul>
</div>
</section>
</div> </div>
</div> </div>
); );
} }
const skills: {
name: string;
description: string;
image?: string;
}[] = [
{
name: "JavaScript",
description:
"I'm a JavaScript Developer with a lot of experience in breaking packages. Js is shit and the learning curve is REALLY easy. Love it",
image: "https://cdn.reversed.dev/pictures/languages/js_logo.png",
},
{
name: "Vue.JS",
description: "Not much experience but its fine",
image: "https://cdn.reversed.dev/pictures/languages/vue.png",
},
{
name: "Node.js",
description: "Node on the server is NOT that bad❗",
image: "https://cdn.reversed.dev/pictures/languages/nodejs.jpg",
},
{
name: "TailwindCSS",
description: "Tailwind my beloved. All screens, crazy responsive design♥",
image: "https://cdn.reversed.dev/pictures/languages/tailwind.png",
},
{
name: "TypeScript",
description:
"Love it, broke it wayy to many times. 1k Compiler errors incoming",
image: "https://cdn.reversed.dev/pictures/languages/ts.png",
},
{
name: "Docker",
description: "As i have found out, deploying isn't that hard...",
image: "https://cdn.reversed.dev/pictures/languages/docker.png",
},
{
name: "HTML",
description: "Yes",
image:
"https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/51703b85-ef3f-4d45-fae0-c39d4c733900/preview",
},
];
const projects: { const projects: {
name: string; name: string;
description: string; description: string;
image?: string; image?: string;
open_source: { link: string } | false; open_source: { link: string } | false;
link: string; link: string;
blog_post?: string;
}[] = [ }[] = [
{ {
name: "BetterNews", name: "BetterNews",
description: description:
"A news aggregator app, custom built. No ads, no tracking, just news.", "A news feed where you submit the news.",
image: "https://betternews.app/assets/icon.png", image: "https://betternews.app/assets/icon.png",
open_source: false, open_source: false,
link: "https://betternews.app", link: "https://betternews.app",
@@ -554,7 +282,7 @@ const projects: {
{ {
name: "SHSF", name: "SHSF",
description: description:
"SHSF is a very simple self hostable API & UI for selfhosting Cloudfunctions on hard ware you already own.", "Self-hostable \"Cloud Functions\" for your own hardware.",
link: "https://github.com/Space-Banane/shsf", link: "https://github.com/Space-Banane/shsf",
open_source: { link: "https://github.com/Space-Banane/shsf" }, open_source: { link: "https://github.com/Space-Banane/shsf" },
image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png", image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
@@ -562,14 +290,14 @@ const projects: {
{ {
name: "Lil Cats", name: "Lil Cats",
link: "https://cats.reversed.dev", link: "https://cats.reversed.dev",
description: "Funny Cat website. Follow cats around and feed them.", description: "Follow cats around and feed them. (Made with GPT-4.1 because I wanted to test it)",
image: "https://cats.reversed.dev/lil-cats.png", image: "https://cats.reversed.dev/lil-cats.png",
open_source: { link: "https://github.com/Space-Banane/lil-cats" }, open_source: { link: "https://github.com/Space-Banane/lil-cats" },
}, },
{ {
name: "Whatsapp-Chat-Analyzer", name: "Whatsapp-Chat-Analyzer",
description: description:
"A simple Chat Analyzer for WhatsApp Chats. All private, all yours.", "Analyze your Whatsapp chats with ease. Get insights, stats and more.",
image: "https://cdn.reversed.dev/pictures/wca.png", image: "https://cdn.reversed.dev/pictures/wca.png",
open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" }, open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
link: "https://whatstat.reversed.dev", link: "https://whatstat.reversed.dev",
@@ -577,16 +305,16 @@ const projects: {
{ {
name: "Free QrCode Generator", name: "Free QrCode Generator",
description: description:
"A simple QR Code Generator for free. No tracking, no ads, just QR Codes. Just like we love em.", "I love QR codes that DO NOT NEED A REGISTER!!!! (or ones that expire)",
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg", image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" }, open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
link: "https://qr.reversed.dev", link: "https://qr.reversed.dev",
}, },
{ {
// Is Twitch streamer live, "Is-live", https://shsf-api.cottonfieldworkers.shop/api/exec/6/22b5d292-ccf1-473b-8838-4db550d6a1e6 // Is Twitch streamer live, "Is-live", https://shsf-api.reversed.dev/api/exec/6/22b5d292-ccf1-473b-8838-4db550d6a1e6
name: "Is-Live", name: "Is-Live",
description: description:
"Is a Twitch streamer live? Check it out. Simple API, no tracking, no ads.", "Is a Twitch streamer live? I don't know, find out!",
image: "https://cdn.reversed.dev/pictures/islive.png", image: "https://cdn.reversed.dev/pictures/islive.png",
open_source: { link: "https://github.com/Space-Banane/is-live" }, open_source: { link: "https://github.com/Space-Banane/is-live" },
link: "https://is-live.reversed.dev", link: "https://is-live.reversed.dev",

View File

@@ -1,52 +0,0 @@
import { MetaFunction } from "@remix-run/react";
export const meta: MetaFunction = () => {
return [
{ title: "My first Post" },
{ name: "description", content: "This is my first post?" },
{
name: "keywords",
content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
},
];
};
export default function myfirstpost() {
return (
<div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
<div className="absolute inset-0 z-0">
<div className="h-full w-full bg-black">
<div
className="absolute inset-0"
style={{
backgroundImage:
"linear-gradient(#ffffff15 1px, transparent 1px), linear-gradient(90deg, #ffffff15 1px, transparent 1px)",
backgroundSize: "20px 20px",
}}
/>
</div>
</div>
<div className="relative z-10 flex flex-col items-center gap-8 max-w-6xl w-full">
{/* Hero */}
<div className="text-center">
<div className="flex items-center justify-center gap-3 mb-3">
<h1 className="text-6xl font-bold text-gray-100">
My First (useless) Blog Post
</h1>
</div>
<p className="text-xl text-gray-300 mt-4">
Somehow have to fill the empty space 🤷
</p>
</div>
<hr className="w-full border-t border-gray-700" />
{/* Content */}
<div className="flex flex-col gap-4">
<p className="text-lg text-gray-300">Sorry, no content to see!</p>
</div>
</div>
</div>
);
}