project page update

README.md

@@ -1,15 +1,16 @@
 ## ✨ My personal website built with Next.js
-[![Website](https://img.shields.io/badge/my_website-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://www.alpozkan.info?utm_source=github-info&utm_medium=github-count&utm_campaign=github-readme&utm_id=github) 
 
+[![Website](https://img.shields.io/badge/my_website-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://www.alpozkan.info?utm_source=github-info&utm_medium=github-count&utm_campaign=github-readme&utm_id=github)
 
 # 💫 About Me:
-As a seasoned Product Executive with over 10 years of experience, I have consistently delivered groundbreaking products in diverse industries such as E-commerce, FinTech, Delivery Service, Blockchain, and Mobile Apps.<br><br>My proven track record includes successfully launching more than 75 products on an international scale. Adept at building robust product organizations, I possess a keen understanding of every stage of product development, from early ideation to launch.
 
+As a seasoned Product Executive with over 10 years of experience, I have consistently delivered groundbreaking products in diverse industries such as E-commerce, FinTech, Delivery Service, Blockchain, and Mobile Apps.<br><br>My proven track record includes successfully launching more than 75 products on an international scale. Adept at building robust product organizations, I possess a keen understanding of every stage of product development, from early ideation to launch.
 
 ## 🌐 Socials:
-[![Resume](https://img.shields.io/badge/my_resume-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://bit.ly/Resume-Alp-Ozkan) 
-[![LinkedIn](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/alpozkan) 
-[![Medium](https://img.shields.io/badge/medium-000?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@alpozkanm) 
+
+[![Resume](https://img.shields.io/badge/my_resume-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://bit.ly/Resume-Alp-Ozkan)
+[![LinkedIn](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/alpozkan)
+[![Medium](https://img.shields.io/badge/medium-000?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@alpozkanm)
 [![Twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Alpozkanm)
 
----
+---

app/blog/page.tsx

@@ -1,4 +1,4 @@
-import { allPosts } from "contentlayer/generated";
+import { allContents } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import Posts from "~/components/posts";
 import { Metadata } from "next";
@@ -8,7 +8,10 @@ export const metadata: Metadata = {
 };
 
 export default function BlogPage() {
-  const posts = allPosts.sort((a, b) => {
+  const filteredProjects = allContents.filter((post) => {
+    return post.image.includes("1_");
+  });
+  const posts = filteredProjects.sort((a, b) => {
     return compareDesc(new Date(a.date), new Date(b.date));
   });
 

app/page.tsx

@@ -1,12 +1,15 @@
 import Link from "next/link";
-import { allPosts } from "contentlayer/generated";
+import { allContents } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import Hello from "~/components/hello";
 import Posts from "~/components/posts";
 import NewsletterSignup from "~/components/newsletter-signup";
 
 export default function Home() {
-  const posts = allPosts
+  const filteredProjects = allContents.filter((post) => {
+    return post.image.includes("1_");
+  });
+  const posts = filteredProjects
     .sort((a, b) => {
       return compareDesc(new Date(a.date), new Date(b.date));
     })
@@ -29,7 +32,7 @@ export default function Home() {
                 className="font-bold text-gray-100 hover:text-white"
                 href="/blog"
               >
-                See all posts <span aria-hidden="true">→</span>
+                See all posts
               </Link>
             </p>
           </div>

app/projects/page.tsx

@@ -1,75 +1,19 @@
-import { GraphQLClient, gql } from "graphql-request";
+import { allContents } from "contentlayer/generated";
+import { compareDesc } from "date-fns";
+import Projects from "~/components/projects";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Projects",
+  title: "Project",
 };
 
-export const revalidate = 60;
-
-type Repository = {
-  description: string;
-  id: string;
-  primaryLanguage: {
-    name: string;
-    color: string;
-  };
-  name: string;
-  stargazerCount: number;
-  url: string;
-};
-
-type PinnedItemsResponse = {
-  viewer: {
-    pinnedItems: {
-      nodes: Repository[];
-    };
-  };
-};
-
-async function getProjects(): Promise<Repository[]> {
-  const endpoint = "https://api.github.com/graphql";
-
-  const client = new GraphQLClient(endpoint, {
-    headers: {
-      authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
-    },
+export default function ProjectPage() {
+  const filteredProjects = allContents.filter((project) => {
+    return project.image.includes("projects_img");
+  });
+  const projects = filteredProjects.sort((a, b) => {
+    return compareDesc(new Date(a.date), new Date(b.date));
   });
-
-  const query = gql`
-    {
-      viewer {
-        pinnedItems(first: 6) {
-          nodes {
-            ... on Repository {
-              id
-              name
-              description
-              url
-              primaryLanguage {
-                color
-                name
-              }
-              stargazerCount
-            }
-          }
-        }
-      }
-    }
-  `;
-
-  const {
-    viewer: {
-      pinnedItems: { nodes: projects },
-    },
-  }: { viewer: { pinnedItems: { nodes: Repository[] } } } =
-    await client.request<PinnedItemsResponse>(query);
-
-  return projects;
-}
-
-export default async function ProjectsPage() {
-  const projects = await getProjects();
 
   return (
     <>
@@ -79,42 +23,8 @@ export default async function ProjectsPage() {
         </h1>
       </header>
 
-      <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
-              key={project.id}
-              href={project.url}
-              className="block cursor-pointer rounded-md border border-gray-700 p-4 shadow-sm transition-transform duration-300 ease-in-out hover:-translate-y-1.5"
-            >
-              <article>
-                <h2 className="text-2xl font-bold">
-                  <span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
-                    {project.name}
-                  </span>
-                </h2>
-                <p className="my-2">{project.description}</p>
-                <p>
-                  <span
-                    style={{ backgroundColor: project.primaryLanguage.color }}
-                    className="relative top-px inline-block h-3 w-3 rounded-full"
-                  />{" "}
-                  <span itemProp="programmingLanguage">
-                    {project.primaryLanguage.name}
-                  </span>
-                  {project.stargazerCount > 0 && (
-                    <span>
-                      <span role="img" aria-label="star" className="pl-4 pr-1">
-                        ⭐️
-                      </span>
-                      {project.stargazerCount}
-                    </span>
-                  )}
-                </p>
-              </article>
-            </a>
-          ))}
-        </div>
+      <section className="mx-auto mb-16 flex max-w-7xl sm:mb-24 lg:mb-32">
+        <Projects projects={projects} />
       </section>
     </>
   );

components/hello.tsx

@@ -1,7 +1,5 @@
-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 (
@@ -44,7 +42,7 @@ export default function Hello() {
           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>
+          About me
         </Link>
       </div>
     </div>

components/posts.tsx

@@ -1,8 +1,8 @@
-import { Post } from "~/.contentlayer/generated";
+import { Content } from "~/.contentlayer/generated";
 import Date from "~/components/date";
 import Image from "next/image";
 
-export default function Posts({ posts }: { posts: Post[] }) {
+export default function Posts({ posts }: { posts: Content[] }) {
   return (
     <div className="mx-auto grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
       {posts.map((post) => (

components/projects.tsx

@@ -0,0 +1,30 @@
+import { Content } from "contentlayer/generated";
+import Date from "~/components/date";
+import Image from "next/image";
+
+export default function Projects({ projects }: { projects: Content[] }) {
+  return (
+    <div className="mx-auto flex flex-col gap-x-8 gap-y-16">
+      {projects.map((project) => (
+        <article key={project.slug}>
+          <div className="text-sm text-gray-500">
+            <Date dateString={project.date} />
+          </div>
+          <div className="flex gap-2">
+            <div className="flex-1 text-sm text-gray-500 md:order-1">
+              <h3 className="mt-3 text-xl font-bold leading-6 text-gray-100">
+                {project.title}
+              </h3>
+              <p className="mt-3 hidden sm:block">{project.description}</p>
+            </div>
+            {project.image && (
+              <div className="relative order-1 h-[112px] w-[112px] md:order-2">
+                <Image fill={true} src={project.image} alt={project.title} />
+              </div>
+            )}
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}

contentlayer.config.js

@@ -2,8 +2,8 @@ import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import { codeHighlightOptions } from "./lib/codeHighlightOptions";
 import rehypePrettyCode from "rehype-pretty-code";
 
-export const Post = defineDocumentType(() => ({
-  name: "Post",
+export const Content = defineDocumentType(() => ({
+  name: "Content",
   filePathPattern: `**/*.{md,mdx}`,
   contentType: "mdx",
   fields: {
@@ -38,7 +38,7 @@ export const Post = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: "posts",
-  documentTypes: [Post],
+  documentTypes: [Content],
   mdx: {
     rehypePlugins: [[rehypePrettyCode, codeHighlightOptions]],
   },

posts/1Otelz-Product-Manager.md

@@ -0,0 +1,10 @@
+---
+title: "Otelz - Product Manager"
+description: >-
+  I led the discovery and development phase of Yacht Renting and B2B amenities platform. By driving wireframing, prototyping, and rigorous market research, I ensured an unparalleled user experience.
+date: "2023-01-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/otelz.jpg"
+---

posts/2Advanced-Blockchain-Ag.md

@@ -0,0 +1,11 @@
+---
+title: "Advanced Blockchain AG - Product Manager"
+description: >-
+  I played a key role in the development of twelve products, covering lending & borrowing, NFTs, DEX, governance, liquidity pools, perpetual futures, stable coins, yield farming, bonding, swaps, bridges, liquidity pools, dao and privacy solutions.
+  Collaborating with cross-functional teams, I contributed to the product discovery process, incorporating valuable user feedback, market research, wireframing, and prototyping. This collaborative approach resulted in successful product launches.
+date: "2021-12-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/advanced-blockchain.png"
+---

posts/3BiSU.md

@@ -0,0 +1,11 @@
+---
+title: "BiSU - Product Manager"
+description: >-
+  I played a critical role to increase sales 10x by improving UX and implementing the Trendyol marketplace solution.
+  Promoted to Technical Group Product Manager, I led Core, Delivery & Ops, and Technical Operation teams, while introducing new product teams as a Hiring Manager.
+date: "2021-07-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/bisu.png"
+---

posts/4Alegra-Digital.md

@@ -0,0 +1,11 @@
+---
+title: "Alegra Digital - Product Manager"
+description: >-
+  Led the creation of a user-friendly self-service digital product, enabling seamless e-commerce website development.
+  Launched six successful e-commerce stores through collaborative improvements and stakeholder engagement.
+date: "2020-12-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/alegra.png"
+---

posts/5Arcelik-Group-Developer.md

@@ -0,0 +1,11 @@
+---
+title: "Arçelik Group - Software Engineer"
+description: >-
+  I played a critical role in creating a new revenue channel through the 360 omnichannel program, enhancing the visual customer experience through the Videowall project. Overcoming integration challenges with giant plasma screens, touch sensors, and real-size product displays, I achieved success by implementing the project for > 200 local stores and dealers in Turkey.
+  I led a task force that optimized user engagement, conversions, and SEO scores. Our team efforts reduced page load time from 14.9 seconds to 4 seconds for 75 digital products, attracting over 10 million visitors.
+date: "2018-10-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/arcelik.png"
+---

posts/6Arcelik-Group-Engineer.md

@@ -0,0 +1,12 @@
+---
+title: "Arçelik Group - Software Developer"
+description: >-
+  I played a pivotal role in digital product management and delivering technical solutions for both local and global markets, from discovery to launch.
+  My contributions were instrumental in increasing company revenue through leadership in special projects and cross-functional task forces.
+  I adeptly managed outsource development and in-house devops teams, ensuring seamless website operations for Arçelik, Beko, and Grundig brands – key sources of local revenue.
+date: "2017-05-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/arcelik.png"
+---

posts/7Grundig.md

@@ -0,0 +1,11 @@
+---
+title: "Grundig Norway - E-Commerce Project Manager"
+description: >-
+  Entrusted with a special assignment by the holding company, I spearheaded B2B/B2C customer portals projects in Oslo, Norway. 
+  Relocating for three months, I successfully managed the on-site project, ensuring seamless integration and delivery of customer portals.
+date: "2014-12-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/grundig.png"
+---

posts/8Arcelik-Group-Consultant.md

@@ -0,0 +1,12 @@
+---
+title: "Arçelik Group - Consultant / Digital Products"
+description: >-
+  Content Syndication: Developed a robust backend tool to export product information to local marketplaces, bolstering visibility.
+  Where to Buy: Implemented a dynamic "Where to Buy" button on 45+ websites without an e-commerce store. This button displayed real-time prices and marketplace information on the Product Detail Page, guiding visitors to shop directly from marketplaces.
+  These initiatives contributed to a 12% increase in global revenue.
+date: "2013-10-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/arcelik.png"
+---

posts/9Islem.md

@@ -0,0 +1,11 @@
+---
+title: "İşlem Computer - Software Developer"
+description: >-
+  I successfully designed and developed online airline booking solutions for two prominent airlines, Corendon Airlines, and Onur Airlines. 
+  My contribution to software development enabled the creation of an efficient and user-friendly booking platform.
+date: "2011-10-01T20:40:27.272Z"
+categories: []
+keywords: []
+slug: "#"
+image: "/projects_img/islem.png"
+---