-
-
+
+
+
+
+ ertas.dev
+
+
@@ -11,26 +11,26 @@ export function BlogPosts() {
if (
new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
) {
- return -1
+ return -1;
}
- return 1
+ return 1;
})
.map((post) => (
{formatDate(post.metadata.publishedAt, false)}
-
+
{post.metadata.title}
))}
- )
+ );
}
diff --git a/app/components/projects.tsx b/app/components/projects.tsx
new file mode 100644
index 0000000..207b5aa
--- /dev/null
+++ b/app/components/projects.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import { TiltCard } from "./tilt-card";
+
+const projects = [
+ {
+ title: "Bettermark",
+ url: "https://bettermark.app",
+ description:
+ "My most recent side project. A modern bookmark manager that helps prevent link rot by taking snapshots of the pages you save. It's cross-platform by default since bookmark saving is done by prefixing your URL with the apps url.",
+ },
+ {
+ title: "tomatotomato",
+ url: "https://tomatotomato.fly.dev",
+ description:
+ "One of my first ever projects. A simple recipe manager I built for my wife. She is still the only user. It was an experiment to learn how to use Remix. It has a lot of room for improvement but I don't think that's happening any time soon. (My wife's pretty sad about it.)",
+ },
+];
+
+export default function Projects() {
+ return (
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+ );
+}
diff --git a/app/components/talks.tsx b/app/components/talks.tsx
new file mode 100644
index 0000000..6921c98
--- /dev/null
+++ b/app/components/talks.tsx
@@ -0,0 +1,37 @@
+import { TiltCard } from "./tilt-card";
+
+const talks = [
+ {
+ title: "Navigating Redesigns",
+ occasion: "BBT",
+ date: "2024",
+ description:
+ "A talk about the challenges of redesigning a component library that has been around for a long time.",
+ link: "https://bursa.dev/event-detail/bbt-connect-atolye15-e0c52b3a",
+ },
+];
+
+export default function Talks() {
+ return (
+
+
+ Talks
+
+
+ {talks.map((talk) => (
+
+ {talk.occasion} ยท {talk.date}
+
+ }
+ />
+ ))}
+
+
+ );
+}
diff --git a/app/components/tilt-card.tsx b/app/components/tilt-card.tsx
new file mode 100644
index 0000000..8f29afb
--- /dev/null
+++ b/app/components/tilt-card.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
+
+type TiltCardProps = {
+ title: string;
+ description: string;
+ link: string;
+ metadata?: React.ReactNode;
+};
+
+export function TiltCard({
+ title,
+ description,
+ link,
+ metadata,
+}: TiltCardProps) {
+ const tiltRef = useRef
(null);
+
+ useEffect(() => {
+ const element = tiltRef.current;
+ if (!element) return;
+
+ VanillaTilt.init(element, {
+ max: 5,
+ speed: 750,
+ glare: true,
+ "max-glare": 0.25,
+ scale: 1.02,
+ });
+
+ return () => {
+ if (element) {
+ // @ts-ignore - vanilla-tilt adds this method to the element
+ element.vanillaTilt.destroy();
+ }
+ };
+ }, []);
+
+ return (
+
+
+
+
+ {title}
+
+ {metadata && metadata}
+
+
{description}
+
+ );
+}
diff --git a/app/global.css b/app/global.css
index 7515dd8..b0c0a04 100644
--- a/app/global.css
+++ b/app/global.css
@@ -1,5 +1,19 @@
@import "tailwindcss";
+@theme {
+ --color-brand-50: #fffaeb;
+ --color-brand-100: #fff0c6;
+ --color-brand-200: #ffdf88;
+ --color-brand-300: #ffc53d; /* Primary */
+ --color-brand-400: #ffb320;
+ --color-brand-500: #f98f07;
+ --color-brand-600: #dd6902;
+ --color-brand-700: #b74806;
+ --color-brand-800: #94360c;
+ --color-brand-900: #7a2e0d;
+ --color-brand-950: #461602;
+}
+
::selection {
background-color: #47a3f3;
color: #fefefe;
diff --git a/app/layout.tsx b/app/layout.tsx
index f74bd08..b6a3fb0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -57,12 +57,12 @@ export default function RootLayout({
-
+
+
{title}
diff --git a/app/page.tsx b/app/page.tsx
index 978ec84..86490e9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,22 +1,15 @@
-import { BlogPosts } from "app/components/posts";
+import Projects from "./components/projects";
+import Talks from "./components/talks";
+import Contact from "./components/contact";
+import About from "./components/about";
export default function Page() {
return (
-
- Oz Ertas
-
- Hi, I'm Oz, a UI Developer with a passion for building user-friendly
- interfaces. I enjoy working with TypeScript, React, and Next.js, and
- have spent the last 3 years building reusable UI components at{" "}
-
- Atolye15
-
- . Outside of coding, I enjoy writing and am committed to continuous
- learning.
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/logo.svg b/public/logo.svg
index 8316b20..7f23a94 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,7 +1,7 @@
-