responsive design changes

alpozkanm · Sep 12, 2023 · 89fd96a · 89fd96a
1 parent 7be466b
commit 89fd96a
Show file tree

Hide file tree

Showing 23 changed files with 166 additions and 435 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -4,11 +4,10 @@ import Image from "next/image";
 import Photos from "~/components/photos";
 import querystring from "query-string";
 import styles from "~/styles/about.module.css";
+import { Metadata } from "next";
 
-export const metadata = {
-  title: "About me",
-  description:
-    "Learn more about me, I'm an Istanbul based product executive with a passion for user experience and privacy.",
+export const metadata: Metadata = {
+  title: "About",
 };
 
 export default async function AboutPage() {
@@ -75,16 +74,20 @@ export default async function AboutPage() {
       duration,
     };
   });
+  const uniqueTracks = tracks.filter((track, index, self) => {
+    const ids = self.map((t) => t.id);
+    return index === ids.indexOf(track.id);
+  });
 
   return (
     <div className="mx-auto max-w-7xl">
       <header>
-        <h1 className="mb-8 max-w-5xl px-4 text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
+        <h1 className="mb-8 max-w-5xl text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
           About
         </h1>
       </header>
 
-      <section className="prose mb-16 max-w-5xl px-4 dark:prose-invert lg:prose-lg prose-a:text-sky-300 lg:mb-32">
+      <section className="prose mb-16 max-w-5xl dark:prose-invert lg:prose-lg prose-a:text-sky-300 lg:mb-32">
         <p>
           As a seasoned Product Manager with over 10 years of experience, I have
           consistently delivered groundbreaking products in diverse industries
@@ -101,15 +104,15 @@ export default async function AboutPage() {
 
       <Photos />
 
-      <section className="my-8 px-4 lg:my-8">
+      <section className="my-8 lg:my-8">
         <h2 className="mb-8 text-2xl font-bold text-gray-100 md:text-3xl lg:text-4xl">
           Recently played
         </h2>
 
         <p className="my-4 md:text-lg lg:text-xl">
           A live feed of my recently played tracks on Spotify.
         </p>
-        {tracks.map(
+        {uniqueTracks.map(
           (
             {
               artists,

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -1,10 +1,10 @@
 import { allPosts } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import Posts from "~/components/posts";
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Blog",
-  description: "Learn about web development with my latest blog posts.",
 };
 
 export default function BlogPage() {
@@ -15,12 +15,12 @@ export default function BlogPage() {
   return (
     <>
       <header>
-        <h1 className="mx-auto mb-8 max-w-7xl px-4 text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
+        <h1 className="mx-auto mb-8 max-w-7xl text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
           Blog
         </h1>
       </header>
 
-      <section className="mx-auto mb-16 max-w-7xl px-4 sm:mb-24 lg:mb-32">
+      <section className="mx-auto mb-16 max-w-7xl sm:mb-24 lg:mb-32">
         <Posts posts={posts} />
       </section>
     </>

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -1,20 +1,20 @@
 import ContactForm from "~/components/contact-form";
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Contact",
-  description: "How can I help you? Get in touch with me.",
 };
 
 export default function ContactPage() {
   return (
     <>
       <header>
-        <h1 className="mx-auto mb-8 max-w-7xl px-4 text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
+        <h1 className="mx-auto mb-8 max-w-7xl text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
           Get in touch
         </h1>
       </header>
 
-      <section className="mx-auto mb-16 max-w-7xl px-4">
+      <section className="mx-auto mb-16 max-w-7xl">
         <ContactForm />
       </section>
     </>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,8 +3,16 @@ import Header from "~/components/header";
 import Footer from "~/components/footer";
 import GoogleAnalytics from "~/components/GoogleAnalytics";
 import "~/styles/globals.css";
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
+  title: {
+    template: "%s | Alp Ozkan",
+    default:
+      "Alp Ozkan - Product Manager, Software Engineer and Web3 Enthusiast", // a default is required when creating a template"
+  },
+  description:
+    "Website of Alp Ozkan: Product Manager living in Istanbul, passionate about UX, Software Development and Web3.",
   icons: {
     shortcut: "/favicon.ico",
   },
@@ -35,7 +43,7 @@ export default function RootLayout({
       style={{ colorScheme: "dark" }}
     >
       <head />
-      <body className="font-body bg-gray-900 text-gray-400">
+      <body className="font-body debug-screens bg-gray-900 px-8 text-gray-400 sm:px-8 md:px-8 lg:px-16 2xs:px-4 xs:px-4">
         <GoogleAnalytics
           GA_TRACKING_ID={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID as string}
         />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,16 +1,10 @@
 import Link from "next/link";
 import { allPosts } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
-import Aloha from "~/components/aloha";
+import Hello from "~/components/hello";
 import Posts from "~/components/posts";
 import NewsletterSignup from "~/components/newsletter-signup";
 
-export const metadata = {
-  title: "Aloha",
-  description:
-    "I'm a Product Executive living in Istanbul. I'm passionate about user experience and privacy.",
-};
-
 export default function Home() {
   const posts = allPosts
     .sort((a, b) => {
@@ -20,29 +14,31 @@ export default function Home() {
 
   return (
     <>
-      <section className="my-8 sm:my-12 lg:my-8">
-        <Aloha />
-      </section>
-      <div className="my-8 sm:my-48 lg:my-64">
-        <div className="mx-auto max-w-7xl px-4">
-          <h2 className="my-8 text-3xl font-bold tracking-tight text-gray-100 sm:text-4xl">
-            Recent posts
-          </h2>
-          <Posts posts={posts} />
-          <p className="my-8 md:text-lg lg:text-xl">
-            <Link
-              className="font-bold text-gray-100 hover:text-white"
-              href="/blog"
-            >
-              See all posts <span aria-hidden="true">→</span>
-            </Link>
-          </p>
+      <>
+        <section className="my-32 sm:my-12 md:my-8 lg:my-16 2xs:my-4 xs:my-4">
+          <Hello />
+        </section>
+        <div className="my-4 sm:my-4 lg:my-8">
+          <div className="mx-auto max-w-7xl">
+            <h2 className="my-8 text-3xl font-bold tracking-tight text-gray-100 sm:text-4xl">
+              Recent posts
+            </h2>
+            <Posts posts={posts} />
+            <p className="my-8 md:text-lg lg:text-xl">
+              <Link
+                className="font-bold text-gray-100 hover:text-white"
+                href="/blog"
+              >
+                See all posts <span aria-hidden="true">→</span>
+              </Link>
+            </p>
+          </div>
         </div>
-      </div>
 
-      <section className="my-8 sm:my-12 lg:my-8" id="newsletter-signup">
-        <NewsletterSignup />
-      </section>
+        <section className="my-8 sm:my-12 lg:my-8" id="newsletter-signup">
+          <NewsletterSignup />
+        </section>
+      </>
     </>
   );
 }
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,8 +1,8 @@
 import { GraphQLClient, gql } from "graphql-request";
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Projects",
-  description: "My projects and open source contributions.",
 };
 
 export const revalidate = 60;
@@ -74,12 +74,12 @@ export default async function ProjectsPage() {
   return (
     <>
       <header>
-        <h1 className="mx-auto mb-8 max-w-7xl px-4 text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
+        <h1 className="mx-auto mb-8 max-w-7xl text-4xl font-bold text-gray-100 md:mb-10 md:mt-32 md:text-5xl lg:mb-12 lg:text-[3.5rem]">
           Projects
         </h1>
       </header>
 
-      <section className="mx-auto mb-16 max-w-7xl px-4">
+      <section className="mx-auto mb-16 max-w-7xl">
         <div className="grid auto-cols-max grid-cols-1 gap-4 md:grid-cols-2">
           {projects.map((project) => (
             <a

diff --git a/components/aloha.tsx b/components/aloha.tsx
diff --git a/components/contact-form.tsx b/components/contact-form.tsx
@@ -25,7 +25,7 @@ export default function ContactForm() {
         name="name"
         autoComplete="name"
         aria-label="Name"
-        className="mb-4 w-full min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-pink-300 sm:text-sm sm:leading-6"
+        className="mb-4 w-full min-w-0 flex-auto rounded-md border-0 bg-white/5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-pink-300 sm:text-sm sm:leading-6"
       />
       <ValidationError prefix="Name" field="name" errors={state.errors} />
       <label htmlFor="email" className="mb-1 block">

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -4,7 +4,7 @@ export default function Footer() {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="mx-auto my-8 max-w-7xl px-4 text-sm md:text-base lg:text-lg">
+    <footer className="mx-auto my-8 max-w-7xl text-sm md:text-base lg:text-lg">
       <Link href="/" className="hover:underline">
         Alp Ozkan
       </Link>{" "}

diff --git a/components/header.tsx b/components/header.tsx
@@ -9,15 +9,15 @@ export default function Header() {
   ];
 
   return (
-    <header className="mx-auto my-8 flex max-w-7xl flex-wrap px-4 tracking-tight">
+    <header className="mx-auto mb-8 mt-8 flex max-w-7xl flex-wrap tracking-tight">
       <Link
         href="/"
-        className="text-xl font-bold text-gray-100 hover:underline tablet:text-2xl"
+        className="text-xl font-bold text-gray-100 hover:underline sm:text-2xl"
       >
         Alp Ozkan
       </Link>
-      <nav className="w-full text-lg tablet:ml-auto tablet:text-xl sm:w-auto">
-        <ul className="my-4 flex gap-2 tablet:m-0">
+      <nav className="w-full text-lg sm:ml-auto sm:w-auto sm:text-xl">
+        <ul className="my-4 flex gap-2 sm:m-0">
           {links.map((link) => (
             <li key={link.href}>
               <Link href={link.href} className="hover:underline">

diff --git a/components/hello.tsx b/components/hello.tsx
@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Link from "next/link";
+import styles from "~/styles/aloha.module.css";
+import image from "~/public/images/Alp-Ozkan-Profile-Photo.png";
+
+export default function Hello() {
+  return (
+    <div className="flex animate-appear flex-col">
+      <div className="mx-auto">
+        <p className="text-7xl font-light leading-tight tracking-normal text-gray-100 underline decoration-2 sm:text-4xl md:text-6xl lg:text-7xl 2xs:text-3xl xs:text-4xl">
+          Hello.
+          <br />
+          I&apos;m Alp Ozkan,
+        </p>
+        <p className="mt-4 text-7xl font-light leading-tight leading-tight tracking-normal text-gray-100 text-gray-100 sm:text-4xl md:text-6xl lg:text-7xl 2xs:text-3xl xs:text-4xl">
+          Product Manager,
+        </p>
+        <p className="leading-tightleading-tight text-7xl font-light tracking-normal text-gray-100 text-gray-100 sm:text-4xl md:text-6xl lg:text-7xl 2xs:text-3xl xs:text-4xl">
+          Software Engineer,
+        </p>
+        <p className="leading-tightleading-tight text-7xl font-light tracking-normal text-gray-100 text-gray-100 sm:text-4xl md:text-6xl lg:text-7xl 2xs:text-3xl xs:text-4xl">
+          and Entrepreneur.
+        </p>
+      </div>
+      {/* <Image
+        className="my-8 animate-tada rounded-xl sm:my-8 sm:rounded-2xl"
+        src={image}
+        alt="Alp Ozkan"
+        width={300}
+        height={300}
+        priority
+      /> */}
+      {/* <p className="my-2 md:text-lg lg:text-xl">
+        💻 I&apos;m a Product Executive 🌴 living in Istanbul.
+      </p> */}
+      <div className="2xs:text-1xl xs:text-1xl sm:text-1xl mt-16 flex items-center justify-center gap-x-6 sm:mt-12 sm:mt-12 md:mt-16 md:text-2xl lg:mt-16 lg:text-2xl 2xs:mt-8 xs:mt-8">
+        <Link
+          href="#newsletter-signup"
+          className="rounded-md bg-pink-600 bg-gradient-to-r from-purple-800 to-pink-600 px-5 py-3.5 font-light text-white shadow-sm hover:bg-pink-500 hover:from-purple-700 hover:to-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-300"
+        >
+          Join newsletter
+        </Link>
+        <Link
+          href="/about"
+          className="hover:bg-perple-500 rounded-md bg-purple-600 bg-gradient-to-r from-pink-800 to-purple-600 px-5 py-3.5 font-light text-white shadow-sm hover:from-pink-700 hover:to-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-purple-300"
+        >
+          About me <span aria-hidden="true">→</span>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/newsletter-signup.tsx b/components/newsletter-signup.tsx
@@ -1,6 +1,7 @@
 export default function NewsletterSignup() {
+  const endpoint_token = process.env.NEXT_PUBLIC_BUTTONDOWN_ID;
   return (
-    <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 lg:grid-cols-12 lg:gap-8">
+    <div className="flex-cols-1 lg:flex-cols-12 mx-auto flex max-w-7xl justify-between gap-10 lg:gap-8">
       <div className="max-w-xl text-3xl font-bold tracking-tight text-white sm:text-4xl lg:col-span-7">
         <h2 className="inline sm:block lg:inline xl:block">
           Want all the news and updates?
@@ -10,7 +11,7 @@ export default function NewsletterSignup() {
         </p>
       </div>
       <form
-        action="https://buttondown.email/api/emails/embed-subscribe/alpozkanm"
+        action={endpoint_token}
         method="post"
         target="popupwindow"
         className="w-full max-w-md lg:col-span-5 lg:pt-2"