articles cmp

thatcatcancode · Dec 2, 2023 · 944881a · 944881a
1 parent bcb8b62
commit 944881a
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 2 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,5 @@
 import About from "@/components/about";
+import Articles from "@/components/articles";
 import Contact from "@/components/contact";
 import Experience from "@/components/experience";
 import Intro from "@/components/intro";
@@ -15,6 +16,7 @@ export default function Home() {
       <Projects />
       <Skills />
       <Experience />
+      <Articles />
       <Contact />
     </main>
   );

diff --git a/components/article.tsx b/components/article.tsx
@@ -0,0 +1,69 @@
+import { articleData } from "@/lib/data";
+import { motion, useScroll, useTransform } from "framer-motion";
+import Image from "next/image";
+import { useRef } from "react";
+type ArticleProps = (typeof articleData)[number];
+
+export default function Article({
+    title,
+    description,
+    url,
+    imageUrl,
+    icon,
+    source
+}: ArticleProps) {
+    const ref = useRef<HTMLDivElement>(null);
+    const { scrollYProgress } = useScroll({
+        target: ref,
+        offset: ["0 1", "1.33 1"],
+    });
+    const scaleProgess = useTransform(scrollYProgress, [0, 1], [0.8, 1]);
+    const opacityProgess = useTransform(scrollYProgress, [0, 1], [0.6, 1]);
+
+    return (
+        <motion.div
+            ref={ref}
+            style={{
+                scale: scaleProgess,
+                opacity: opacityProgess,
+            }}
+            className="group mb-3 sm:mb-8 last:mb-0"
+        >
+            <a href={url} target="_blank">
+                <section className="bg-gray-100 max-w-[42rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative sm:h-[20rem] hover:bg-gray-200 transition sm:group-even:pl-8 dark:text-white dark:bg-white/10 dark:hover:bg-white/20">
+                    <div className="pt-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] flex flex-col h-full sm:group-even:ml-[18rem]">
+                        <h3 className="text-2xl font-semibold">{title}</h3>
+                        <p className="mt-2 leading-relaxed text-gray-700 dark:text-white/70">
+                            {description}
+                        </p>
+                        <p
+                            className="mt-2 bg-white p-4 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
+                        >
+                            Source: {source} {icon}
+                        </p>
+                    </div>
+
+                    <Image
+                        src={imageUrl}
+                        alt="Articles written about me"
+                        quality={95}
+                        width="300"
+                        height="300"
+                        className="absolute hidden sm:block top-8 -right-40 w-[28.25rem] rounded-t-lg shadow-2xl
+          transition 
+          group-hover:scale-[1.04]
+          group-hover:-translate-x-3
+          group-hover:translate-y-3
+          group-hover:-rotate-2
+  
+          group-even:group-hover:translate-x-3
+          group-even:group-hover:translate-y-3
+          group-even:group-hover:rotate-2
+  
+          group-even:right-[initial] group-even:-left-40"
+                    />
+                </section>
+            </a>
+        </motion.div>
+    )
+}
diff --git a/components/articles.tsx b/components/articles.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "@/context/theme-context";
+import { useSectionInView } from "@/lib/hooks";
+import SectionHeading from "./section-heading";
+import { articleData } from "@/lib/data";
+import React from "react";
+import Article from "./article";
+
+export default function Articles() {
+    const { ref } = useSectionInView('Articles');
+    const { theme } = useTheme();
+    return (
+        <section id="articles" ref={ref} className="scroll-mt-28 mb-28 sm:mb-40">
+            <SectionHeading>My articles</SectionHeading>
+            <div>
+                {articleData.map((article, i) => (
+                    <React.Fragment key={i}>
+                        <Article {...article} />
+                    </React.Fragment>
+                ))}
+            </div>
+        </section>
+    )
+}
diff --git a/components/header.tsx b/components/header.tsx
@@ -14,7 +14,7 @@ export default function Header() {
   return (
     <header className="z-[999] relative">
       <motion.div
-        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
+        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[42rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
         initial={{ y: -100, x: "-50%", opacity: 0 }}
         animate={{ y: 0, x: "-50%", opacity: 1 }}
       ></motion.div>

diff --git a/lib/data.ts b/lib/data.ts
@@ -1,11 +1,12 @@
 import React from "react";
 import { CgAirplane, CgWorkAlt } from "react-icons/cg";
-import { FaJs, FaNodeJs, FaReact } from "react-icons/fa";
+import { FaJs, FaMediumM, FaNodeJs, FaPen, FaReact } from "react-icons/fa";
 import { LuBriefcase, LuGraduationCap, LuPartyPopper } from "react-icons/lu";
 import floHockeyImg from "@/public/flohockey.png";
 import floWrestlingImg from "@/public/flowrestling.png";
 import inspiratoImg from "@/public/inspirato.png";
 import flightTrackerImg from "@/public/flight-tracker.png";
+import builtInAtxImg from "@/public/builtinatx.png";
 
 export const links = [
   {
@@ -28,6 +29,10 @@ export const links = [
     name: "Experience",
     hash: "#experience",
   },
+  {
+    name: "Articles",
+    hash: "#articles",
+  },
   {
     name: "Contact",
     hash: "#contact",
@@ -148,3 +153,30 @@ export const skillsData = [
   "PHP",
   "C#",
 ] as const;
+
+export const articleData = [
+  {
+    title: 'Ship More Frequently 🚀',
+    description: 'by Automatically Generating TypeScript Types',
+    url: 'https://medium.com/flosports-engineering/ship-more-frequently-4fa7d543440',
+    imageUrl: 'https://miro.medium.com/v2/resize:fit:600/format:webp/0*dQNljcCyHDUaWocM',
+    icon: React.createElement(FaMediumM),
+    source: 'Medium'
+  },
+  {
+    title: 'Looking to Sharpen Your Full-Stack Skills?',
+    description: 'These 3 Local Developers Share Their Advice.',
+    url: 'https://www.builtinaustin.com/2021/09/01/austin-full-stack-developer-skills',
+    imageUrl: builtInAtxImg,
+    icon: React.createElement(FaPen),
+    source: 'Built in ATX'
+  },
+  {
+    title: 'Simple Reactive Data Streams',
+    description: 'Building Observables with the RxJs Library',
+    url: 'https://engineering.flosports.tv/simple-stream-composition-40e0165a7f6a',
+    imageUrl: 'https://miro.medium.com/v2/resize:fit:600/format:webp/0*U1cmAhQGCDh2hS2t',
+    icon: React.createElement(FaMediumM),
+    source: 'Medium'
+  },
+]
diff --git a/public/builtinatx.png b/public/builtinatx.png