Init
This commit is contained in:
84
.eslintrc.cjs
Normal file
84
.eslintrc.cjs
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
/**
|
||||||
|
* This is intended to be a basic starting point for linting in your app.
|
||||||
|
* It relies on recommended configs out of the box for simplicity, but you can
|
||||||
|
* and should modify this configuration to best suit your team's needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @type {import('eslint').Linter.Config} */
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
sourceType: "module",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
ignorePatterns: ["!**/.server", "!**/.client"],
|
||||||
|
|
||||||
|
// Base config
|
||||||
|
extends: ["eslint:recommended"],
|
||||||
|
|
||||||
|
overrides: [
|
||||||
|
// React
|
||||||
|
{
|
||||||
|
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||||
|
plugins: ["react", "jsx-a11y"],
|
||||||
|
extends: [
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react/jsx-runtime",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:jsx-a11y/recommended",
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: "detect",
|
||||||
|
},
|
||||||
|
formComponents: ["Form"],
|
||||||
|
linkComponents: [
|
||||||
|
{ name: "Link", linkAttribute: "to" },
|
||||||
|
{ name: "NavLink", linkAttribute: "to" },
|
||||||
|
],
|
||||||
|
"import/resolver": {
|
||||||
|
typescript: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Typescript
|
||||||
|
{
|
||||||
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
plugins: ["@typescript-eslint", "import"],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
settings: {
|
||||||
|
"import/internal-regex": "^~/",
|
||||||
|
"import/resolver": {
|
||||||
|
node: {
|
||||||
|
extensions: [".ts", ".tsx"],
|
||||||
|
},
|
||||||
|
typescript: {
|
||||||
|
alwaysTryTypes: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:import/recommended",
|
||||||
|
"plugin:import/typescript",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Node
|
||||||
|
{
|
||||||
|
files: [".eslintrc.cjs"],
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
|
||||||
|
/.cache
|
||||||
|
/build
|
||||||
|
.env
|
||||||
18
app/entry.client.tsx
Normal file
18
app/entry.client.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* By default, Remix will handle hydrating your app on the client for you.
|
||||||
|
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
|
||||||
|
* For more information, see https://remix.run/file-conventions/entry.client
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { RemixBrowser } from "@remix-run/react";
|
||||||
|
import { startTransition, StrictMode } from "react";
|
||||||
|
import { hydrateRoot } from "react-dom/client";
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
hydrateRoot(
|
||||||
|
document,
|
||||||
|
<StrictMode>
|
||||||
|
<RemixBrowser />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
});
|
||||||
140
app/entry.server.tsx
Normal file
140
app/entry.server.tsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
/**
|
||||||
|
* By default, Remix will handle generating the HTTP Response for you.
|
||||||
|
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
|
||||||
|
* For more information, see https://remix.run/file-conventions/entry.server
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { PassThrough } from "node:stream";
|
||||||
|
|
||||||
|
import type { AppLoadContext, EntryContext } from "@remix-run/node";
|
||||||
|
import { createReadableStreamFromReadable } from "@remix-run/node";
|
||||||
|
import { RemixServer } from "@remix-run/react";
|
||||||
|
import { isbot } from "isbot";
|
||||||
|
import { renderToPipeableStream } from "react-dom/server";
|
||||||
|
|
||||||
|
const ABORT_DELAY = 5_000;
|
||||||
|
|
||||||
|
export default function handleRequest(
|
||||||
|
request: Request,
|
||||||
|
responseStatusCode: number,
|
||||||
|
responseHeaders: Headers,
|
||||||
|
remixContext: EntryContext,
|
||||||
|
// This is ignored so we can keep it in the template for visibility. Feel
|
||||||
|
// free to delete this parameter in your app if you're not using it!
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
loadContext: AppLoadContext
|
||||||
|
) {
|
||||||
|
return isbot(request.headers.get("user-agent") || "")
|
||||||
|
? handleBotRequest(
|
||||||
|
request,
|
||||||
|
responseStatusCode,
|
||||||
|
responseHeaders,
|
||||||
|
remixContext
|
||||||
|
)
|
||||||
|
: handleBrowserRequest(
|
||||||
|
request,
|
||||||
|
responseStatusCode,
|
||||||
|
responseHeaders,
|
||||||
|
remixContext
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBotRequest(
|
||||||
|
request: Request,
|
||||||
|
responseStatusCode: number,
|
||||||
|
responseHeaders: Headers,
|
||||||
|
remixContext: EntryContext
|
||||||
|
) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let shellRendered = false;
|
||||||
|
const { pipe, abort } = renderToPipeableStream(
|
||||||
|
<RemixServer
|
||||||
|
context={remixContext}
|
||||||
|
url={request.url}
|
||||||
|
abortDelay={ABORT_DELAY}
|
||||||
|
/>,
|
||||||
|
{
|
||||||
|
onAllReady() {
|
||||||
|
shellRendered = true;
|
||||||
|
const body = new PassThrough();
|
||||||
|
const stream = createReadableStreamFromReadable(body);
|
||||||
|
|
||||||
|
responseHeaders.set("Content-Type", "text/html");
|
||||||
|
|
||||||
|
resolve(
|
||||||
|
new Response(stream, {
|
||||||
|
headers: responseHeaders,
|
||||||
|
status: responseStatusCode,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
pipe(body);
|
||||||
|
},
|
||||||
|
onShellError(error: unknown) {
|
||||||
|
reject(error);
|
||||||
|
},
|
||||||
|
onError(error: unknown) {
|
||||||
|
responseStatusCode = 500;
|
||||||
|
// Log streaming rendering errors from inside the shell. Don't log
|
||||||
|
// errors encountered during initial shell rendering since they'll
|
||||||
|
// reject and get logged in handleDocumentRequest.
|
||||||
|
if (shellRendered) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
setTimeout(abort, ABORT_DELAY);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBrowserRequest(
|
||||||
|
request: Request,
|
||||||
|
responseStatusCode: number,
|
||||||
|
responseHeaders: Headers,
|
||||||
|
remixContext: EntryContext
|
||||||
|
) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let shellRendered = false;
|
||||||
|
const { pipe, abort } = renderToPipeableStream(
|
||||||
|
<RemixServer
|
||||||
|
context={remixContext}
|
||||||
|
url={request.url}
|
||||||
|
abortDelay={ABORT_DELAY}
|
||||||
|
/>,
|
||||||
|
{
|
||||||
|
onShellReady() {
|
||||||
|
shellRendered = true;
|
||||||
|
const body = new PassThrough();
|
||||||
|
const stream = createReadableStreamFromReadable(body);
|
||||||
|
|
||||||
|
responseHeaders.set("Content-Type", "text/html");
|
||||||
|
|
||||||
|
resolve(
|
||||||
|
new Response(stream, {
|
||||||
|
headers: responseHeaders,
|
||||||
|
status: responseStatusCode,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
pipe(body);
|
||||||
|
},
|
||||||
|
onShellError(error: unknown) {
|
||||||
|
reject(error);
|
||||||
|
},
|
||||||
|
onError(error: unknown) {
|
||||||
|
responseStatusCode = 500;
|
||||||
|
// Log streaming rendering errors from inside the shell. Don't log
|
||||||
|
// errors encountered during initial shell rendering since they'll
|
||||||
|
// reject and get logged in handleDocumentRequest.
|
||||||
|
if (shellRendered) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
setTimeout(abort, ABORT_DELAY);
|
||||||
|
});
|
||||||
|
}
|
||||||
36
app/root.tsx
Normal file
36
app/root.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import {
|
||||||
|
Links,
|
||||||
|
Meta,
|
||||||
|
Outlet,
|
||||||
|
Scripts,
|
||||||
|
ScrollRestoration,
|
||||||
|
} from "@remix-run/react";
|
||||||
|
import type { LinksFunction } from "@remix-run/node";
|
||||||
|
|
||||||
|
import "./tailwind.css";
|
||||||
|
|
||||||
|
export const links: LinksFunction = () => [
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="icon" href="https://cdn.reversed.dev/pictures/cat.png" type="image/png" />
|
||||||
|
<Meta />
|
||||||
|
<Links />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{children}
|
||||||
|
<ScrollRestoration />
|
||||||
|
<Scripts />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return <Outlet />;
|
||||||
|
}
|
||||||
502
app/routes/_index.tsx
Normal file
502
app/routes/_index.tsx
Normal file
@@ -0,0 +1,502 @@
|
|||||||
|
import type { MetaFunction } from "@remix-run/node";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { json } from "@remix-run/node";
|
||||||
|
import { useLoaderData, Link } from "@remix-run/react";
|
||||||
|
|
||||||
|
export const meta: MetaFunction = () => {
|
||||||
|
return [
|
||||||
|
{ title: "Paul W." },
|
||||||
|
{ name: "description", content: "This is my Profile!" },
|
||||||
|
{
|
||||||
|
name: "keywords",
|
||||||
|
content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
interface BlogPost {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
excerpt: string;
|
||||||
|
date: string;
|
||||||
|
access: string; // Where its located in the folder
|
||||||
|
tags: string[];
|
||||||
|
hide_date?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loader() {
|
||||||
|
const posts: BlogPost[] = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
title: "My First Post",
|
||||||
|
excerpt: "Yeah, as it says, this is my first post.",
|
||||||
|
date: "2024-01-23",
|
||||||
|
access: "myfirstpost",
|
||||||
|
tags: ["Hello, World!"],
|
||||||
|
hide_date: true,
|
||||||
|
},
|
||||||
|
// Add more posts here
|
||||||
|
];
|
||||||
|
|
||||||
|
return json({ posts });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
const { posts } = useLoaderData<typeof loader>();
|
||||||
|
|
||||||
|
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="w-56 h-56 mb-6 overflow-hidden rounded-full">
|
||||||
|
<img
|
||||||
|
src="https://cdn.reversed.dev/pictures/cat.png"
|
||||||
|
alt="Paul W"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-3">
|
||||||
|
<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
|
||||||
|
</div>
|
||||||
|
<span className="px-3 py-1.5 text-base bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100 rounded-full">
|
||||||
|
Developer & Gamer
|
||||||
|
</span>
|
||||||
|
<p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* About Section */}
|
||||||
|
<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">
|
||||||
|
About Me
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
|
||||||
|
flex flex-col md:flex-row gap-8 items-center"
|
||||||
|
>
|
||||||
|
<div className="flex-1 space-y-6">
|
||||||
|
<p className="text-gray-300 text-lg leading-relaxed">
|
||||||
|
Hey! I'm <span className="underline font-bold">Paul</span>, a
|
||||||
|
passionate Developer from{" "}
|
||||||
|
<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">
|
||||||
|
I specialize in JavaScript and Node.js development, crafting
|
||||||
|
digital experiences that make a difference. When I'm not
|
||||||
|
coding, you'll find me gaming or scrolling through my
|
||||||
|
Instagram feed.
|
||||||
|
</span>
|
||||||
|
</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">
|
||||||
|
Fun Facts About Me
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
|
||||||
|
<span className="text-2xl">🚲</span>
|
||||||
|
<span>Avid Cyclist</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
|
||||||
|
<span className="text-2xl">🎮</span>
|
||||||
|
<span>Gaming Enthusiast</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
|
||||||
|
<span className="text-2xl">🛠️</span>
|
||||||
|
<span>Builder at Heart</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
|
||||||
|
<span className="text-2xl">🐕</span>
|
||||||
|
<span>Dog Dad to Charly</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* My Blog Posts */}
|
||||||
|
<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">
|
||||||
|
Blog Posts
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className="p-8 rounded-xl border dark: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 dark:border-gray-700 bg-white dark: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-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 rounded-full"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100">
|
||||||
|
{post.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark: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">
|
||||||
|
My Dawg
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
|
||||||
|
flex flex-col md:flex-row gap-8 items-center"
|
||||||
|
>
|
||||||
|
<div className="flex-1 space-y-6">
|
||||||
|
<img
|
||||||
|
src="https://cdn.reversed.dev/pictures/20250103_121234.jpg"
|
||||||
|
alt="Charly Image"
|
||||||
|
className="w-full h-96 object-cover rounded-lg shadow-lg"
|
||||||
|
/>
|
||||||
|
<p className="text-gray-300 text-lg leading-relaxed">
|
||||||
|
This is Charly🙏 This lil guy is about{" "}
|
||||||
|
<span className="italic">13</span> Years old. Very mixed.
|
||||||
|
</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">
|
||||||
|
Charly
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-4">
|
||||||
|
<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 (probably)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Projects Section */}
|
||||||
|
<section className="w-full">
|
||||||
|
<h2 className="text-3xl font-bold mb-8 text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
|
||||||
|
Projects
|
||||||
|
</h2>
|
||||||
|
<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) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-6 rounded-xl border dark:border-gray-700 bg-white dark:bg-gray-800
|
||||||
|
transform transition-all duration-300 hover:scale-105 hover:shadow-xl
|
||||||
|
backdrop-blur-sm hover:bg-opacity-90"
|
||||||
|
>
|
||||||
|
{project.image && (
|
||||||
|
<div className="mb-6 items-center justify-center flex flex-col">
|
||||||
|
<img
|
||||||
|
src={project.image}
|
||||||
|
alt={project.name}
|
||||||
|
className="h-40 w-40 object-cover rounded-full shadow-lg
|
||||||
|
outline outline-gray-600 outline-2 hover:outline-blue-500
|
||||||
|
transition-all duration-300"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100">
|
||||||
|
{project.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-base mb-4">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||||
|
<a
|
||||||
|
href={
|
||||||
|
project.link +
|
||||||
|
"?utm_source=portfolio&utm_medium=referral&ref=space"
|
||||||
|
}
|
||||||
|
target="_blank"
|
||||||
|
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
|
||||||
|
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
Visit {project.name}
|
||||||
|
</a>
|
||||||
|
{project.open_source && (
|
||||||
|
<a
|
||||||
|
href={project.open_source.link}
|
||||||
|
target="_blank"
|
||||||
|
className="px-6 py-2 border border-gray-300 dark:border-gray-600
|
||||||
|
rounded-full font-medium transition-all duration-300
|
||||||
|
hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
View Source
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact */}
|
||||||
|
<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">
|
||||||
|
Contact
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg
|
||||||
|
transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
|
||||||
|
>
|
||||||
|
<p className="text-gray-300 text-lg text-center">
|
||||||
|
You can contact me via Email or on Discord. I'm always open for a
|
||||||
|
chat or a <span className="line-through">coffee</span> tea🫖
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
|
||||||
|
<a
|
||||||
|
href="mailto:paul.w@betternews.app"
|
||||||
|
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
|
||||||
|
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://discord.com/users/456443941169004545"
|
||||||
|
target="_blank"
|
||||||
|
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
|
||||||
|
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
Discord
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* My "Skills" */}
|
||||||
|
<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">
|
||||||
|
Skills
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-300 text-lg mb-4 text-center">
|
||||||
|
Skills? Whats that? Never heard of it🤔
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
className="p-6 rounded-xl border dark: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-8 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 dark: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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const skills: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
name: "JavaScript",
|
||||||
|
description:
|
||||||
|
"I'm a JavaScript Developer with a lot of experience in JS. I love to build things with JS. Js my beloved♥️",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/js_logo.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vue.JS",
|
||||||
|
description:
|
||||||
|
"I have not much experience with Vue.js, but i its fun to play around with.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/vue.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Node.js",
|
||||||
|
description:
|
||||||
|
"Node.js is my go-to Framework for Backend Development. I love to build things with Node.js.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/nodejs.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "TailwindCSS",
|
||||||
|
description: "TailwindCSS is my go-to CSS Framework. TailwindCss 🙏🙏🙏",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/tailwind.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "TypeScript",
|
||||||
|
description:
|
||||||
|
"TypeScript is my go-to Language for larger Projects with type-safety. Typescript 🔥",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/ts.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Docker",
|
||||||
|
description: "Docker is the best Containerization Tool imo. ",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/languages/docker.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "HTML",
|
||||||
|
description: "HTML is the language of the Web. I dont need to say more.",
|
||||||
|
image:
|
||||||
|
"https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/51703b85-ef3f-4d45-fae0-c39d4c733900/preview",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projects: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
open_source: { link: string } | false;
|
||||||
|
link: string;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
name: "BetterNews",
|
||||||
|
description:
|
||||||
|
"A news aggregator app, custom built. No ads, no tracking, just news.",
|
||||||
|
image: "https://betternews.app/assets/icon.png",
|
||||||
|
open_source: false,
|
||||||
|
link: "https://betternews.app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Reversed.Dev",
|
||||||
|
description:
|
||||||
|
"An upcomming overlooking platform showing off Projects under the Reversed.Dev Brand.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/icon.png",
|
||||||
|
open_source: false,
|
||||||
|
link: "https://reversed.dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Luna",
|
||||||
|
description: "Luna is an All-In-One Discord Bot with a lot of AI features.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/luna/lunasmol.jpg",
|
||||||
|
open_source: false,
|
||||||
|
link: "https://luna.reversed.dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Whatsapp-Chat-Analyzer",
|
||||||
|
description:
|
||||||
|
"A simple Chat Analyzer for WhatsApp Chats. All private, all yours.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/wca.png",
|
||||||
|
open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
|
||||||
|
link: "https://whatstat.reversed.dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Free QrCode Generator",
|
||||||
|
description:
|
||||||
|
"A simple QR Code Generator for free. No tracking, no ads, just QR Codes. Just like we love em.",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
|
||||||
|
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
|
||||||
|
link: "https://qrcode.reversed.dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tyler-The-Creator Countdown",
|
||||||
|
description:
|
||||||
|
"A simple Countdown for the next Tyler-The-Creator Album 'Chromokopia'. Just for fun, and because i can.",
|
||||||
|
link: "https://tyler.reversed.dev",
|
||||||
|
open_source: {
|
||||||
|
link: "https://github.com/Space-Banane/tylerthecreatorcounter",
|
||||||
|
},
|
||||||
|
image: "https://i.scdn.co/image/ab67616d00001e02124e9249fada4ff3c3a0739c",
|
||||||
|
},
|
||||||
|
];
|
||||||
52
app/routes/blog.myfirstpost.tsx
Normal file
52
app/routes/blog.myfirstpost.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
app/tailwind.css
Normal file
12
app/tailwind.css
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
@apply bg-white dark:bg-gray-950;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
43
package.json
Normal file
43
package.json
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "my-portfolio",
|
||||||
|
"private": true,
|
||||||
|
"sideEffects": false,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "remix vite:build",
|
||||||
|
"dev": "remix vite:dev",
|
||||||
|
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
||||||
|
"start": "remix-serve ./build/server/index.js",
|
||||||
|
"typecheck": "tsc"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/node": "^2.15.2",
|
||||||
|
"@remix-run/react": "^2.15.2",
|
||||||
|
"@remix-run/serve": "^2.15.2",
|
||||||
|
"isbot": "^4.1.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@remix-run/dev": "^2.15.2",
|
||||||
|
"@types/react": "^18.2.20",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||||
|
"@typescript-eslint/parser": "^6.7.4",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^8.38.0",
|
||||||
|
"eslint-import-resolver-typescript": "^3.6.1",
|
||||||
|
"eslint-plugin-import": "^2.28.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"typescript": "^5.1.6",
|
||||||
|
"vite": "^5.1.0",
|
||||||
|
"vite-tsconfig-paths": "^4.2.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
7508
pnpm-lock.yaml
generated
Normal file
7508
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
22
tailwind.config.ts
Normal file
22
tailwind.config.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
"Inter",
|
||||||
|
"ui-sans-serif",
|
||||||
|
"system-ui",
|
||||||
|
"sans-serif",
|
||||||
|
"Apple Color Emoji",
|
||||||
|
"Segoe UI Emoji",
|
||||||
|
"Segoe UI Symbol",
|
||||||
|
"Noto Color Emoji",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
} satisfies Config;
|
||||||
32
tsconfig.json
Normal file
32
tsconfig.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
"**/.server/**/*.ts",
|
||||||
|
"**/.server/**/*.tsx",
|
||||||
|
"**/.client/**/*.ts",
|
||||||
|
"**/.client/**/*.tsx"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||||
|
"types": ["@remix-run/node", "vite/client"],
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"strict": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["./app/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Vite takes care of building everything, not tsc.
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
30
vite.config.ts
Normal file
30
vite.config.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { vitePlugin as remix } from "@remix-run/dev";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
|
||||||
|
declare module "@remix-run/node" {
|
||||||
|
interface Future {
|
||||||
|
v3_singleFetch: true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
remix({
|
||||||
|
future: {
|
||||||
|
v3_fetcherPersist: true,
|
||||||
|
v3_relativeSplatPath: true,
|
||||||
|
v3_throwAbortReason: true,
|
||||||
|
v3_singleFetch: true,
|
||||||
|
v3_lazyRouteDiscovery: true
|
||||||
|
},
|
||||||
|
/*routes: async (defineRoutes) => {
|
||||||
|
return defineRoutes((route) => {
|
||||||
|
route("/", "routes/_index.tsx");
|
||||||
|
route("/blog/:blog", "routes/blog.tsx");
|
||||||
|
});
|
||||||
|
},*/
|
||||||
|
}),
|
||||||
|
tsconfigPaths(),
|
||||||
|
],
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user