romanjaros/portfolio
romanjaros/portfolio
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Refactor and enhance job-related components and context.
All checks were successful
forgejo/romanjaros/portfolio/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Roman Jaroš 2025-01-15 16:14:26 +00:00
parent ee8f8cf6e3
commit f16f36ec92
13 changed files with 180 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/jobs.json
View file

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

16
src/app/components/AboutMe.tsx
View file

@ -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">
<Card title="Web development" description="I offer my experience in web development." />
<Card title="UI/UX Design" description="I offer design web application in figma or penpot." />
<div className="flex md:flex-row gap-2">
<Kbd>UI design</Kbd>
<Kbd>Web development</Kbd>
<Kbd>Automation testing</Kbd>
<Kbd>DevOps</Kbd>
<Kbd>Monitoring</Kbd>
</div>
</section>
</>

77
src/app/components/Jobs.tsx
View file

@ -1,54 +1,55 @@
"use client"
import {MapPinIcon, MoveRightIcon} from "lucide-react";
import {notNil} from "../../utils";
import {Job} from "../type";
import {FC} from "react";
import {notNil} from "../../utils/notNil";
import {useJobs} from "../context/useJobs";
type JobsProps = {
jobs: Job[] | undefined
}
export const Jobs: FC<JobsProps> = ({jobs}) => {
export const Jobs = () => {
const {jobs, filter} = useJobs()
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) => (
<li key={index} className="mb-10 ms-6">
{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">
<MapPinIcon className="text-black dark:text-white"/>
</span>
<h3 className="flex items-center gap-2 mb-1 text-lg font-semibold text-gray-900 dark:text-white">
{name}
</h3>
<time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
{started} - {ended}
</time>
<p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
{description}
</p>
{link != undefined &&
<p>
<a href={link}
target="_blank"
className="inline-flex gap-2 mb-4 items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Visit website
<MoveRightIcon/>
</a>
<h3 className="flex items-center gap-2 mb-1 text-lg font-semibold text-gray-900 dark:text-white">
{name}
</h3>
<time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
{started} - {ended}
</time>
<p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
{description}
</p>
}
<p className="flex flex-wrap gap-2">
{tags.sort().map((name) => (
<span
key={name}
className="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300"
>
{link != undefined &&
<p>
<a href={link}
target="_blank"
className="inline-flex gap-2 mb-4 items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Visit website
<MoveRightIcon/>
</a>
</p>
}
<p className="flex flex-wrap gap-2">
{tags.sort().map((name) => (
<span
key={name}
className="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300"
>
{name}
</span>
))}
</p>
</li>
))}
))}
</p>
</li>
))}
</ol>
</section>
</>

51
src/app/components/Skills.tsx
View file

@ -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 = {
jobs: Job[] | undefined
}
export const Skills: FC<SkillsProps> = ({jobs}) => {
const skills = new Set(jobs?.filter(notNil).flatMap(({tags}) => tags).sort());
export const Skills: FC = () => {
const {jobs, filterJobs, filter} = useJobs()
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">
{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">
{name}
</span>
))}
<section>
<div className="flex flex-wrap gap-2">
{Array.from(skills)?.map((name) => (
<span
key={name}
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>
</>
)

12
src/app/components/Title.tsx
View file

@ -1,12 +1,14 @@
export const Title = () => {
return (
<div className="flex justify-center text-4xl sm:text-6xl my-8">
<span className="text-gray-600 dark:text-white">&lt;</span>
<div className="flex justify-center text-4xl sm:text-6xl my-8 text-slate-400">
<h1>
<span className="text-gray-600 dark:text-white">Just</span>
<span className="text-orange-800 dark:text-orange-400">Roman</span>
<span>&lt;</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>
)
}

25
src/app/context/JobsContext.tsx Normal file
View file

@ -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>
)
}

25
src/app/context/useJobs.ts Normal file
View file

@ -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,
}
}

6
src/app/fetch.ts Normal file
View file

@ -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();
}

21
src/app/layout.tsx
View file

@ -8,13 +8,16 @@ export default function AppLayout({
}) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="bg-white dark:bg-slate-800">
<main>{children}</main>
</body>
</html>
)
<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>
</body>
</html>
)
}

15
src/app/page.tsx
View file

@ -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 data: Job[] | undefined = await res?.json();
const jobs = use(fetchJobs())
return (
<>
@ -17,8 +18,10 @@ export default async function Page() {
<Title />
<AboutMe />
<Contact />
<Skills jobs={data} />
<Jobs jobs={data} />
<JobsProvider jobs={jobs ?? []}>
<Skills />
<Jobs />
</JobsProvider>
<Footer />
</div>
</>

17
src/components/Card.tsx
View file

@ -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>
)
}

14
src/components/Kbd.tsx Normal file
View file

@ -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>
)
}

0
src/utils.ts → src/utils/notNil.ts
View file