Refactor and enhance job-related components and context.

public/jobs.json

@@ -63,7 +63,7 @@
 		"tags": [
 			"Typescript",
 			"React",
-			"Graphql",
+			"GraphQL",
 			"REST",
 			"Mui",
 			"Azure DevOps"

src/app/components/AboutMe.tsx

@@ -1,4 +1,4 @@
-import {Card} from "../../components/Card";
+import {Kbd} from "../../components/Kbd";
 
 export const AboutMe = () => {
 	const age = Math.floor(
@@ -13,9 +13,10 @@ export const AboutMe = () => {
 			<>
 				<section className="leading-snug text-slate-500 dark:text-slate-400">
 					<p>
-						👋, my name is Roman Jaroš. I am {age}. {work} years working as software engineer.
+						Hello, my name is Roman Jaroš. I am {age}. <span className="underline dark:text-white decoration-pink-500">
+						{work} years working as software engineer. </span>
 						I have been programming since I was 15 years old and still love to learn new technologies.
-						Outside of the programming world, I maintain servers with about 120 docker containers.
+						Outside of the programming world, I maintain servers with around 80 docker containers.
 						Outside of the IT world, I enjoy reading self improvement books, meditating,
 						alternative medicine and model painting or playing video games.
 					</p>
@@ -24,9 +25,12 @@ export const AboutMe = () => {
 						<b>I am contractor and currently only for full remote jobs.</b>
 					</p>
 					<br />
-					<div className="flex justify-center flex-col md:flex-row gap-2">
+					<div className="flex md:flex-row gap-2">
-						<Card title="Web development" description="I offer my experience in web development." />
+						<Kbd>UI design</Kbd>
-						<Card title="UI/UX Design" description="I offer design web application in figma or penpot." />
+						<Kbd>Web development</Kbd>
+						<Kbd>Automation testing</Kbd>
+						<Kbd>DevOps</Kbd>
+						<Kbd>Monitoring</Kbd>
 					</div>
 				</section>
 			</>

src/app/components/Jobs.tsx

@@ -1,18 +1,19 @@
+"use client"
+
 import {MapPinIcon, MoveRightIcon} from "lucide-react";
-import {notNil} from "../../utils";
+import {notNil} from "../../utils/notNil";
-import {Job} from "../type";
+import {useJobs} from "../context/useJobs";
-import {FC} from "react";
 
-type JobsProps = {
+export const Jobs = () => {
-	jobs: Job[] | undefined
+	const {jobs, filter} = useJobs()
-}
-
-export const Jobs: FC<JobsProps> = ({jobs}) => {
 	return (
 		<>
 			<section className="px-4">
 				<ol className="relative border-s border-gray-200 dark:border-gray-700">
-					{jobs?.filter(notNil).map(({name, started, ended, description, tags, link}, index) => (
+					{jobs
+						?.filter(notNil)
+						.filter(({tags}) => filter != undefined ? tags.includes(filter) : true)
+						.map(({name, started, ended, description, tags, link}, index) => (
 							<li key={index} className="mb-10 ms-6">
 							<span
 								className="absolute flex items-center justify-center w-6 h-6 bg-white rounded-full -start-3 ring-8 ring-white dark:ring-slate-800 dark:bg-slate-800">

src/app/components/Skills.tsx

@@ -1,40 +1,53 @@
-import {notNil} from "../../utils";
+"use client"
+
+import {notNil} from "../../utils/notNil";
 import {StarIcon} from "lucide-react";
 import {FC} from "react";
-import {Job} from "../type";
+import {useJobs} from "../context/useJobs";
 
-type SkillsProps = {
+export const Skills: FC = () => {
-	jobs: Job[] | undefined
+	const {jobs, filterJobs, filter} = useJobs()
-}
+	const skills = new Set(jobs.filter(notNil).flatMap(({tags}) => tags).sort());
-
-export const Skills: FC<SkillsProps> = ({jobs}) => {
-
-	const skills = new Set(jobs?.filter(notNil).flatMap(({tags}) => tags).sort());
 
 	return (
 		<>
 			<section>
 				<div className="flex items-center my-2">
-					<p className="mr-2 w-12 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">Czech</p>
+					<p className="mr-2 w-24 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">Czech, native</p>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 				</div>
 				<div className="flex items-center my-2">
-					<p className="mr-2 w-12 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">English&emsp;</p>
+					<p className="mr-2 w-24 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">English, B2</p>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
 					<StarIcon className="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500"/>
 					<StarIcon className="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500"/>
 				</div>
 			</section>
-			<section className="flex flex-wrap gap-2">
+			<section>
+				<div className="flex flex-wrap gap-2">
 					{Array.from(skills)?.map((name) => (
 						<span
 							key={name}
-						className="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300">
+							onClick={() => filterJobs(name)}
+							className={[
+								"cursor-pointer text-xs font-medium me-2 px-2.5 py-0.5 rounded-full select-none",
+								filter === name
+									? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+									: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300"
+							].join(" ")}>
 						{name}
 					</span>
 					))}
+				</div>
+				<p className="mt-5 text-xs text-gray-400">Psss, you can click on pill to filter.</p>
 			</section>
 		</>
 	)

src/app/components/Title.tsx

@@ -1,12 +1,14 @@
 export const Title = () => {
 	return (
-		<div className="flex justify-center text-4xl sm:text-6xl my-8">
+		<div className="flex justify-center text-4xl sm:text-6xl my-8 text-slate-400">
-			<span className="text-gray-600 dark:text-white">&lt;</span>
 			<h1>
-				<span className="text-gray-600 dark:text-white">Just</span>
+				<span>&lt;</span>
-				<span className="text-orange-800 dark:text-orange-400">Roman</span>
+				<span
+					className="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
+					Roman {" "}
+				</span>
+				<span>/&gt;</span>
 			</h1>
-			<span className="text-orange-800 dark:text-orange-400">&nbsp;/&gt;</span>
 		</div>
 	)
 }

src/app/context/JobsContext.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import {createContext, ReactNode, FC, useState, Dispatch, SetStateAction} from "react";
+import {Job} from "../type";
+
+type JobsContextPayload = {
+	data: Job[]
+	filter?: string
+	setFilter: Dispatch<SetStateAction<string | undefined>>
+} | undefined
+
+export const JobsContext = createContext<JobsContextPayload>(undefined);
+
+type JobsContextProviderProps = {
+	jobs: Job[]
+	children: ReactNode[]
+}
+
+export const JobsProvider: FC<JobsContextProviderProps> = ({children, jobs: data}) => {
+	const [filter, setFilter] = useState<string>()
+
+	return (
+		<JobsContext value={{data, filter, setFilter}}>{children}</JobsContext>
+	)
+}

src/app/context/useJobs.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import {useContext} from "react";
+import {JobsContext} from "./JobsContext";
+
+export const useJobs = () => {
+	const context = useContext(JobsContext)
+	if (!context) {
+		throw new Error('useJobs must be used within a JobsProvider!');
+	}
+
+	const handleFilterJob = (name: string) => {
+		if (name === context.filter) {
+			context.setFilter(undefined)
+		} else {
+			context.setFilter(name)
+		}
+	}
+
+	return {
+		jobs: context.data,
+		filter: context?.filter,
+		filterJobs: handleFilterJob,
+	}
+}

src/app/fetch.ts

@@ -0,0 +1,6 @@
+import {Job} from "./type";
+
+export const fetchJobs = async (): Promise<Job[] | undefined> => {
+	const res = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/jobs.json`, {cache: "no-store"})
+	return await res?.json();
+}

src/app/layout.tsx

@@ -10,7 +10,10 @@ export default function AppLayout({
     <html lang="en">
 		<head>
 			<meta charSet="utf-8"/>
+			<title>Roman Jaroš</title>
 			<meta name="viewport" content="width=device-width, initial-scale=1"/>
+			<script defer src="https://wa.romanjaros.dev/script.js"
+							data-website-id="27410757-9ce4-4dad-a0ad-a1e2a0303495"></script>
 		</head>
 		<body className="bg-white dark:bg-slate-800">
 		<main>{children}</main>

src/app/page.tsx

@@ -4,12 +4,13 @@ import {Contact} from "./components/Contact";
 import {Footer} from "./components/Footer";
 import {Jobs} from "./components/Jobs";
 import {Skills} from "./components/Skills";
-import {Job} from "./type";
+import {fetchJobs} from "./fetch";
+import {JobsProvider} from "./context/JobsContext";
+import {use} from "react";
 
-export default async function Page() {
+export default function Page() {
 
-	const res = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/jobs.json`, {cache: "no-store"})
+	const jobs = use(fetchJobs())
-	const data: Job[] | undefined = await res?.json();
 
 	return (
 		<>
@@ -17,8 +18,10 @@ export default async function Page() {
 				<Title />
 				<AboutMe />
 				<Contact />
-				<Skills jobs={data} />
+				<JobsProvider jobs={jobs ?? []}>
-				<Jobs jobs={data} />
+					<Skills />
+					<Jobs />
+				</JobsProvider>
 				<Footer />
 			</div>
 		</>

src/components/Card.tsx

@@ -1,17 +0,0 @@
-import {FC} from "react";
-
-type CardProps = {
-	title: string;
-	description: string;
-}
-
-export const Card: FC<CardProps> = ({title, description}) => {
-	return (
-		<div
-			className="w-full md:w-80 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
-		>
-			<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{title}</h5>
-			<p className="font-normal text-gray-700 dark:text-gray-400">{description}</p>
-		</div>
-	)
-}

src/components/Kbd.tsx

@@ -0,0 +1,14 @@
+import {FC} from "react";
+
+type KbdProps = {
+	children: string
+}
+
+export const Kbd: FC<KbdProps> = ({children}) => {
+	return (
+		<kbd
+			className="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">
+			{children}
+		</kbd>
+	)
+}