wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusted css

Browse Source
This commit is contained in:
Wyatt J. Miller
2025-07-14 20:09:10 -04:00
parent 29011c8f48
commit 13d022d44c
7 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Footer.tsx
View File

@@ -2,7 +2,7 @@ import * as hi from "jsr:@preact-icons/hi2";
export default function Footer() { export default function Footer() {
return ( return (
<footer class="bg-[#313244] text-[#cdd6f4] py-8"> <footer class="bg-[#313244] text-[#cdd6f4] py-8 mt-auto">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
{/* Grid layout that switches from 2 to 1 column on small screens */} {/* Grid layout that switches from 2 to 1 column on small screens */}
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

39
frontend/components/PostCard.tsx
View File

@@ -3,22 +3,31 @@ import { truncateString } from "../lib/truncate.ts";
import { Post } from "../types/index.ts"; import { Post } from "../types/index.ts";
export const PostCard = function PostCard({ post }: { post: Post }) { export const PostCard = function PostCard({ post }: { post: Post }) {
const handleCardClick = (e: MouseEvent) => {
// Don't navigate if clicking on the author link
if ((e.target as HTMLElement).closest("a")) {
return;
}
window.location.href = `${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`;
};
return ( return (
<div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"> <div
<a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}> class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105 cursor-pointer"
<h2 class="text-white text-lg font-bold mb-2">{post.title}</h2> onClick={handleCardClick}
<p class="text-white"> >
Written by{" "} <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
<a <p class="text-white">
class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer" Written by{" "}
href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`} <a
> class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
{post.first_name} {post.last_name} href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
</a>{" "} >
at {convertUtc(post.created_at)} {post.first_name} {post.last_name}
</p> </a>{" "}
<p class="text-gray-400">{truncateString(post.body, 15)}</p> at {convertUtc(post.created_at)}
</a> </p>
<p class="text-gray-400">{truncateString(post.body, 15)}</p>
</div> </div>
); );
}; };

2
frontend/components/PostHeader.tsx
View File

@@ -8,7 +8,7 @@ export const PostHeader = function PostHeader({ post }: PostHeaderOpts) {
<Head> <Head>
<title>Wyatt J. Miller | {post.title}</title> <title>Wyatt J. Miller | {post.title}</title>
</Head> </Head>
<div class="p-6 bg-[#313244]"> <div class="p-4 bg-[#313244]">
<div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md"> <div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
<div class="sm:mt-14 sm:mb-14 mt-8 mb-8 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row"> <div class="sm:mt-14 sm:mb-14 mt-8 mb-8 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<div class="space-y-2 text-center md:text-left"> <div class="space-y-2 text-center md:text-left">

4
frontend/islands/ProjectCard.tsx
View File

@@ -1,9 +1,9 @@
export const ProjectCard = function ProjectCard(props: ProjectProps) { export const ProjectCard = function ProjectCard(props: ProjectProps) {
return ( return (
<div <div
class={`group space-y-1 rounded-md ${ class={`md:m-8 group space-y-1 rounded-md ${
props.wip ? "border-2 border-dashed" : "cursor-pointer" props.wip ? "border-2 border-dashed" : "cursor-pointer"
} bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`} } bg-[#45475a] px-3 py-2 m-4 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
onClick={() => props.repo && open(props.repo, "_blank")} onClick={() => props.repo && open(props.repo, "_blank")}
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">

15
frontend/routes/contact/index.tsx
View File

@@ -26,7 +26,6 @@ export const handler: Handlers = {
message: formData.get("message")?.toString(), message: formData.get("message")?.toString(),
}; };
// Validation logic
const errors: FormState["errors"] = {}; const errors: FormState["errors"] = {};
if (!state.name || state.name.trim() === "") { if (!state.name || state.name.trim() === "") {
@@ -44,7 +43,6 @@ export const handler: Handlers = {
errors.message = "Message is required"; errors.message = "Message is required";
} }
// If there are errors, return the form with error messages
if (Object.keys(errors).length > 0) { if (Object.keys(errors).length > 0) {
return ctx.render({ return ctx.render({
...state, ...state,
@@ -56,7 +54,6 @@ export const handler: Handlers = {
method: "POST", method: "POST",
body: formData, body: formData,
}); });
console.log(res);
if (!res.ok || res.status !== 200) { if (!res.ok || res.status !== 200) {
return ctx.render({ return ctx.render({
@@ -77,11 +74,15 @@ export default function Contact({ data }: PageProps<FormState>) {
<div class="bg-[#313244] min-h-screen"> <div class="bg-[#313244] min-h-screen">
<div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] min-h-screen w-full md:max-w-md"> <div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] min-h-screen w-full md:max-w-md">
<Head> <Head>
<title>Contact</title> <title>Wyatt J. Miller | Contact</title>
</Head> </Head>
<h1 class="text-3xl text-white font-bold uppercase text-center"> <h1 class="text-3xl text-white font-bold uppercase text-center">
Contact Contact
</h1> </h1>
<p class="md:text-lg sm:text-md text-white mt-5 mb-5">
Got a question? Here to yell at me? Send me something!
</p>
<br />
{data?.submitted && ( {data?.submitted && (
<div <div
class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative" class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
@@ -114,7 +115,7 @@ export default function Contact({ data }: PageProps<FormState>) {
required required
placeholder="Your Name" placeholder="Your Name"
value={data?.name || ""} value={data?.name || ""}
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent
${data?.errors?.name ? "border-[#f38ba8]" : "border-[#313244]"}`} ${data?.errors?.name ? "border-[#f38ba8]" : "border-[#313244]"}`}
/> />
{data?.errors?.name && ( {data?.errors?.name && (
@@ -137,7 +138,7 @@ export default function Contact({ data }: PageProps<FormState>) {
required required
placeholder="your@email.com" placeholder="your@email.com"
value={data?.email || ""} value={data?.email || ""}
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent
${data?.errors?.email ? "border-[#f38ba8]" : "border-[#313244]"}`} ${data?.errors?.email ? "border-[#f38ba8]" : "border-[#313244]"}`}
/> />
{data?.errors?.email && ( {data?.errors?.email && (
@@ -159,7 +160,7 @@ export default function Contact({ data }: PageProps<FormState>) {
required required
placeholder="Write your message here..." placeholder="Write your message here..."
rows={4} rows={4}
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent
${data?.errors?.message ? "border-red-500" : "border-gray-300"}`} ${data?.errors?.message ? "border-red-500" : "border-gray-300"}`}
> >
{data?.message || ""} {data?.message || ""}

2
frontend/routes/index.tsx
View File

@@ -3,7 +3,7 @@ import { PhotoCircle } from "../components/PhotoCircle.tsx";
export default function Home() { export default function Home() {
return ( return (
<body> <body>
<div class="min-w-screen flex flex-col items-center justify-between bg-[#313244] sm:min-h-screen"> <div class="flex flex-col items-center justify-between bg-[#313244] min-h-screen">
<div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row"> <div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<PhotoCircle <PhotoCircle
src="https://wyattjmiller.us-ord-1.linodeobjects.com/IMG_1480-min.png" src="https://wyattjmiller.us-ord-1.linodeobjects.com/IMG_1480-min.png"

8
frontend/routes/projects/index.tsx
View File

@@ -31,11 +31,17 @@ export default function Projects({ data }: PageProps<ProjectData>) {
<div class="space-y-12 px-10 py-8 sm:min-h-screen bg-[#313244]"> <div class="space-y-12 px-10 py-8 sm:min-h-screen bg-[#313244]">
<section <section
id="projects" id="projects"
class="lg:grid-cols-desktop grid scroll-mt-16 grid-cols-1 gap-x-10 gap-y-4 bg-[#313244] " class="lg:grid-cols-desktop grid scroll-mt-8 grid-cols-1 gap-x-4 gap-y-2 bg-[#313244] "
> >
<h1 class="text-3xl text-white font-bold uppercase text-center"> <h1 class="text-3xl text-white font-bold uppercase text-center">
Projects Projects
</h1> </h1>
<p class="md:text-lg sm:text-md text-white">
Here's a collection of software and electronics projects I've been
tinkering with during my free time - some are ongoing adventures,
others are finished experiments, but they've all been exciting
challenges that keep me busy when I'm not doing the "real work" stuff!
</p>
<div class="grid grid-cols-1 sm:grid-cols-2"> <div class="grid grid-cols-1 sm:grid-cols-2">
{projects.map((project: any) => { {projects.map((project: any) => {
return ( return (