all projects added

src/projects/good-morning/index.tsx

@@ -0,0 +1,106 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "good morning!",
+	description:
+		"An app for couples or friends to share daily notices with songs and photos",
+	date: "October 2025",
+	slug: "good-morning",
+	image: "/good-morning-icon.png",
+	url: "https://gm.ob248.com",
+	github: "https://github.com/hex248/good-morning",
+	hidden: false,
+	tags: [
+		"Web",
+		"React",
+		"TypeScript",
+		"Go",
+		"PostgreSQL",
+		"AWS S3",
+		"Databases",
+		"OAuth2",
+		"Spotify API",
+	],
+	type: "personal",
+};
+
+export function GoodMorningProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				"good morning!" is a web app I built to help couples or friends share
+				daily notices, songs, and photos with each other. It features a simple
+				and intuitive interface for sending and receiving messages, along with
+				support for photo attachments. The app is built with React and
+				TypeScript on the frontend, and Go with PostgreSQL on the backend. Media
+				files are stored securely using Cloudflare R2 (AWS S3).
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Create daily notices with photos and Spotify songs</li>
+						<li>Simple user interface</li>
+						<li>Google OAuth2 authentication for user accounts</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>React</li>
+						<li>TypeScript</li>
+						<li>Go</li>
+						<li>PostgreSQL</li>
+						<li>Cloudflare R2 (AWS S3)</li>
+						<li>Spotify API</li>
+						<li>OAuth2 Authentication</li>
+						<li>Progressive Web App (PWA)</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Demo</h2>
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+					<Demo
+						image="/images/good-morning/notice.png"
+						title="Notice from partner"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/no-notice.png"
+						title="No notice from partner"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/create-notice.png"
+						title="Create notice"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/login-with-google.png"
+						title="Login with Google"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/partner-pairing.png"
+						title="Partner pairing"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/me.png"
+						title="'Me' page"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}