Repository: BartoszJarocki/cv
Branch: main
Commit: b9c9c2bacf53
Files: 43
Total size: 73.6 KB
Directory structure:
gitextract_05bs3w52/
├── .dockerignore
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── biome.json
├── components.json
├── docker-compose.yaml
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
│ └── robots.txt
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── education.tsx
│ │ │ ├── header.tsx
│ │ │ ├── projects.tsx
│ │ │ ├── skills.tsx
│ │ │ ├── summary.tsx
│ │ │ └── work-experience.tsx
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ ├── opengraph-image.tsx
│ │ ├── page.tsx
│ │ └── sitemap.ts
│ ├── components/
│ │ ├── avatar.tsx
│ │ ├── command-menu.tsx
│ │ ├── error-boundary.tsx
│ │ ├── icons/
│ │ │ ├── github-icon.tsx
│ │ │ ├── index.ts
│ │ │ ├── linkedin-icon.tsx
│ │ │ └── x-icon.tsx
│ │ └── ui/
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── command.tsx
│ │ ├── dialog.tsx
│ │ └── section.tsx
│ ├── data/
│ │ └── resume-data.ts
│ └── lib/
│ ├── structured-data.ts
│ ├── types.ts
│ └── utils.ts
├── tailwind.config.js
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .dockerignore
================================================
node_modules
.next
.git
.gitignore
.claude
.idea
.vscode
*.md
Dockerfile
docker-compose.yaml
.env*
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# ide
.idea
================================================
FILE: Dockerfile
================================================
FROM node:22-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable && corepack prepare pnpm@latest-10 --activate
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
pnpm install --frozen-lockfile
FROM base AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production
RUN pnpm build
FROM node:22-slim AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
ENV HOSTNAME="0.0.0.0"
ENV PORT=3000
RUN addgroup --system --gid 1001 nodejs && \
adduser --system --uid 1001 nextjs
COPY --from=build /app/public ./public
COPY --from=build --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=build --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Bartosz Jarocki
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<h1>minimalist cv <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FBartoszJarocki%2Fcv"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="24" align="right"></a></h1>
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
simple web app that renders a minimalist CV with print-friendly layout.
## getting started
```bash
git clone https://github.com/BartoszJarocki/cv.git
cd cv
pnpm install
pnpm dev
# open http://localhost:3000
# edit src/data/resume-data.ts to customize
```
## scripts
```bash
pnpm dev # start development server
pnpm build # build for production
pnpm start # start production server
pnpm lint # run biome linting checks
pnpm lint:fix # run biome linting with auto-fix
pnpm format # check code formatting with biome
pnpm format:fix # format code with biome
pnpm check # run both linting and formatting checks
pnpm check:fix # run both linting and formatting with auto-fix
```
## project structure
```
src/
├── app/ # next.js app router
│ ├── components/ # page-level components
│ │ ├── education.tsx
│ │ ├── header.tsx
│ │ ├── projects.tsx
│ │ ├── skills.tsx
│ │ ├── summary.tsx
│ │ └── work-experience.tsx
│ ├── layout.tsx # root layout with metadata
│ └── page.tsx # main resume page
├── components/ # shared components
│ ├── icons/ # social icon components
│ └── ui/ # shadcn/ui components
├── data/ # resume data configuration
│ └── resume-data.ts
└── lib/ # utilities and types
├── structured-data.ts
├── types.ts
└── utils.ts
```
## customization
all resume content lives in a single file:
```typescript
// src/data/resume-data.ts
export const RESUME_DATA = {
name: "Your Name",
initials: "YN",
location: "Your City, Country",
about: "Brief description",
summary: "Professional summary",
// ... more fields
}
```
styling uses tailwind css — customize colors in `tailwind.config.js` and global styles in `src/app/globals.css`.
## docker
```bash
docker compose build # build the container
docker compose up -d # run the container
docker compose down # stop the container
```
## license
MIT
================================================
FILE: biome.json
================================================
{
"$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false,
"includes": ["src/**/*"]
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"recommended": true
},
"complexity": {
"recommended": true,
"noExtraBooleanCast": "error",
"noUselessCatch": "error",
"noUselessTypeConstraint": "error"
},
"correctness": {
"recommended": true,
"noChildrenProp": "error",
"noConstAssign": "error",
"noConstantCondition": "error",
"noEmptyCharacterClassInRegex": "error",
"noEmptyPattern": "error",
"noGlobalObjectCalls": "error",
"noInvalidConstructorSuper": "error",
"noSetterReturn": "error",
"noSwitchDeclarations": "error",
"noUndeclaredVariables": "error",
"noUnreachable": "error",
"noUnreachableSuper": "error",
"useIsNan": "error",
"useValidForDirection": "error",
"useYield": "error"
},
"security": {
"recommended": true,
"noDangerouslySetInnerHtml": "warn"
},
"style": {
"recommended": true,
"noImplicitBoolean": "error",
"noInferrableTypes": "error",
"noNamespace": "error",
"noNegationElse": "off",
"noNonNullAssertion": "warn",
"noParameterAssign": "error",
"noRestrictedGlobals": "error",
"noUselessElse": "error",
"useAsConstAssertion": "error",
"useBlockStatements": "off",
"useCollapsedElseIf": "error",
"useConst": "error",
"useDefaultParameterLast": "error",
"useEnumInitializers": "error",
"useExponentiationOperator": "error",
"useFilenamingConvention": {
"level": "error",
"options": {
"filenameCases": ["kebab-case", "PascalCase"]
}
},
"useForOf": "error",
"useFragmentSyntax": "error",
"useImportType": "error",
"useNodejsImportProtocol": "error",
"useNumberNamespace": "error",
"useSelfClosingElements": "error",
"useShorthandAssign": "error",
"useSingleVarDeclarator": "error",
"useTemplate": "error"
},
"suspicious": {
"recommended": true,
"noApproximativeNumericConstant": "error",
"noArrayIndexKey": "warn",
"noAssignInExpressions": "error",
"noAsyncPromiseExecutor": "error",
"noCatchAssign": "error",
"noClassAssign": "error",
"noCompareNegZero": "error",
"noControlCharactersInRegex": "error",
"noDebugger": "error",
"noDoubleEquals": "error",
"noDuplicateCase": "error",
"noDuplicateClassMembers": "error",
"noDuplicateObjectKeys": "error",
"noDuplicateParameters": "error",
"noEmptyBlockStatements": "error",
"noFallthroughSwitchClause": "error",
"noFunctionAssign": "error",
"noGlobalAssign": "error",
"noImportAssign": "error",
"noMisleadingCharacterClass": "error",
"noPrototypeBuiltins": "error",
"noRedeclare": "error",
"noShadowRestrictedNames": "error",
"noUnsafeNegation": "error",
"useGetterReturn": "error"
}
}
},
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "es5",
"semicolons": "always",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "double",
"attributePosition": "auto"
}
},
"json": {
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"trailingCommas": "none"
}
}
}
================================================
FILE: components.json
================================================
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "app/globals.css",
"baseColor": "gray",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
================================================
FILE: docker-compose.yaml
================================================
services:
app:
build: .
ports:
- '3000:3000'
environment:
- NODE_ENV=production
restart: unless-stopped
healthcheck:
test: ['CMD-SHELL', 'curl -f http://localhost:3000 || exit 1']
interval: 30s
timeout: 10s
retries: 3
start_period: 10s
deploy:
resources:
limits:
cpus: '1'
memory: 512M
================================================
FILE: next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'standalone',
// Enable React strict mode for better development experience
reactStrictMode: true,
// Optimize images
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'avatars.githubusercontent.com',
},
],
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60,
},
// Compress output
compress: true,
// Headers for security and performance
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
},
{
key: 'X-XSS-Protection',
value: '1; mode=block'
},
{
key: 'Referrer-Policy',
value: 'origin-when-cross-origin'
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=()'
}
]
},
{
source: '/(.*).svg',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable'
}
]
},
{
source: '/(.*).png',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable'
}
]
}
];
},
// Reduce bundle size by excluding source maps in production
productionBrowserSourceMaps: false,
// PoweredByHeader removes the X-Powered-By header
poweredByHeader: false,
}
module.exports = nextConfig
================================================
FILE: package.json
================================================
{
"name": "web-cv",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "biome lint ./src",
"lint:fix": "biome lint --write ./src",
"format": "biome format ./src",
"format:fix": "biome format --write ./src",
"check": "biome check ./src",
"check:fix": "biome check --write ./src"
},
"dependencies": {
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-slot": "^1.1.2",
"@vercel/analytics": "^1.5.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"cmdk": "^1.0.0",
"geist": "^1.7.0",
"lucide-react": "^0.474.0",
"next": "^16.1.0",
"react": "^19",
"react-dom": "^19",
"tailwind-merge": "^2.2.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@biomejs/biome": "2.0.6",
"@types/node": "^22",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.4.0",
"typescript": "^5"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: public/robots.txt
================================================
# Robots.txt for https://cv.jarocki.me
User-agent: *
Allow: /
Disallow: /api/
Disallow: /_next/
Disallow: /graphql
# Sitemap location
Sitemap: https://cv.jarocki.me/sitemap.xml
# Crawl-delay for responsible crawling
Crawl-delay: 1
================================================
FILE: src/app/components/education.tsx
================================================
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Section } from "@/components/ui/section";
import type { RESUME_DATA } from "@/data/resume-data";
type Education = (typeof RESUME_DATA)["education"][number];
interface EducationPeriodProps {
start: Education["start"];
end: Education["end"];
}
/**
* Displays the education period in a consistent format
*/
function EducationPeriod({ start, end }: EducationPeriodProps) {
return (
<div
className="text-sm tabular-nums text-gray-500"
title={`Period: ${start} to ${end}`}
>
{start} - {end}
</div>
);
}
interface EducationItemProps {
education: Education;
}
/**
* Individual education card component
*/
function EducationItem({ education }: EducationItemProps) {
const { school, start, end, degree } = education;
const schoolId = `education-${school.toLowerCase().replace(/\s+/g, "-")}`;
return (
<Card className="border-none">
<CardHeader>
<div className="flex items-center justify-between gap-x-2 text-base">
<h3 className="font-semibold leading-none" id={schoolId}>
{school}
</h3>
<EducationPeriod start={start} end={end} />
</div>
</CardHeader>
<CardContent
className="mt-2 text-foreground/80 print:text-[12px]"
aria-labelledby={schoolId}
>
{degree}
</CardContent>
</Card>
);
}
interface EducationListProps {
education: readonly Education[];
}
/**
* Main education section component
* Renders a list of education experiences
*/
export function Education({ education }: EducationListProps) {
return (
<Section>
<h2 className="text-xl font-bold" id="education-section">
Education
</h2>
<div
className="space-y-4"
role="feed"
aria-labelledby="education-section"
>
{education.map((item) => (
<article key={item.school}>
<EducationItem education={item} />
</article>
))}
</div>
</Section>
);
}
================================================
FILE: src/app/components/header.tsx
================================================
import { GlobeIcon, MailIcon, PhoneIcon } from "lucide-react";
import type React from "react";
import { Avatar } from "@/components/avatar";
import { GitHubIcon, LinkedInIcon } from "@/components/icons";
import { XIcon } from "@/components/icons/x-icon";
import { Button } from "@/components/ui/button";
import { RESUME_DATA } from "@/data/resume-data";
import type { IconType } from "@/lib/types";
// Type-safe icon mapping
const ICON_MAP: Record<
IconType,
React.ComponentType<React.SVGProps<SVGSVGElement>>
> = {
github: GitHubIcon,
linkedin: LinkedInIcon,
x: XIcon,
globe: GlobeIcon,
mail: MailIcon,
phone: PhoneIcon,
} as const;
interface LocationLinkProps {
location: typeof RESUME_DATA.location;
locationLink: typeof RESUME_DATA.locationLink;
}
function LocationLink({ location, locationLink }: LocationLinkProps) {
return (
<p className="max-w-md items-center text-pretty font-mono text-xs text-foreground">
<a
className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
href={locationLink}
target="_blank"
rel="noopener noreferrer"
aria-label={`Location: ${location}`}
>
<GlobeIcon className="size-3" aria-hidden="true" />
{location}
</a>
</p>
);
}
interface SocialButtonProps {
href: string;
iconType: IconType;
label: string;
}
function SocialButton({ href, iconType, label }: SocialButtonProps) {
const IconComponent = ICON_MAP[iconType];
return (
<Button className="size-8" variant="outline" size="icon" asChild={true}>
<a
href={href}
aria-label={label}
target="_blank"
rel="noopener noreferrer"
>
<IconComponent className="size-4" aria-hidden="true" />
</a>
</Button>
);
}
interface ContactButtonsProps {
contact: typeof RESUME_DATA.contact;
personalWebsiteUrl?: string;
}
function ContactButtons({ contact, personalWebsiteUrl }: ContactButtonsProps) {
return (
<ul
className="flex list-none gap-x-1 pt-1 font-mono text-sm text-foreground/80 print:hidden"
aria-label="Contact links"
>
{personalWebsiteUrl && (
<li>
<SocialButton
href={personalWebsiteUrl}
iconType="globe"
label="Personal website"
/>
</li>
)}
{contact.email && (
<li>
<SocialButton
href={`mailto:${contact.email}`}
iconType="mail"
label="Email"
/>
</li>
)}
{contact.tel && (
<li>
<SocialButton
href={`tel:${contact.tel}`}
iconType="phone"
label="Phone"
/>
</li>
)}
{contact.social.map((social) => (
<li key={social.name}>
<SocialButton
href={social.url}
iconType={social.icon}
label={social.name}
/>
</li>
))}
</ul>
);
}
interface PrintContactProps {
contact: typeof RESUME_DATA.contact;
personalWebsiteUrl?: string;
}
function PrintContact({ contact, personalWebsiteUrl }: PrintContactProps) {
return (
<div className="hidden gap-x-2 font-mono text-sm text-foreground/80 print:flex print:text-[12px]">
{personalWebsiteUrl && (
<>
<a
className="underline hover:text-foreground/70"
href={personalWebsiteUrl}
>
{new URL(personalWebsiteUrl).hostname}
</a>
<span aria-hidden="true">/</span>
</>
)}
{contact.email && (
<>
<a
className="underline hover:text-foreground/70"
href={`mailto:${contact.email}`}
>
{contact.email}
</a>
<span aria-hidden="true">/</span>
</>
)}
{contact.tel && (
<a
className="underline hover:text-foreground/70"
href={`tel:${contact.tel}`}
>
{contact.tel}
</a>
)}
</div>
);
}
/**
* Header component displaying personal information and contact details
*/
export function Header() {
return (
<header className="flex items-center justify-between">
<div className="flex-1 space-y-1.5">
<h1 className="text-3xl font-bold tracking-tight" id="resume-name">
{RESUME_DATA.name}
</h1>
<p className="max-w-md text-pretty font-mono text-sm text-foreground/80 print:text-[12px]">
{RESUME_DATA.about}
</p>
<LocationLink
location={RESUME_DATA.location}
locationLink={RESUME_DATA.locationLink}
/>
<ContactButtons
contact={RESUME_DATA.contact}
personalWebsiteUrl={RESUME_DATA.personalWebsiteUrl}
/>
<PrintContact
contact={RESUME_DATA.contact}
personalWebsiteUrl={RESUME_DATA.personalWebsiteUrl}
/>
</div>
<Avatar
className="size-28 ring-1 ring-muted"
src={RESUME_DATA.avatarUrl}
alt={`${RESUME_DATA.name}'s profile picture`}
fallback={RESUME_DATA.initials}
/>
</header>
);
}
================================================
FILE: src/app/components/projects.tsx
================================================
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Section } from "@/components/ui/section";
import type { RESUME_DATA } from "@/data/resume-data";
type ProjectTags = readonly string[];
interface ProjectLinkProps {
title: string;
link?: string;
}
/**
* Renders project title with optional link and status indicator
*/
function ProjectLink({ title, link }: ProjectLinkProps) {
if (!link) {
return <span>{title}</span>;
}
return (
<>
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 hover:underline"
aria-label={`${title} project (opens in new tab)`}
>
{title}
<span
className="size-1 rounded-full bg-green-500"
title="Active project indicator"
aria-hidden="true"
/>
</a>
<div
className="hidden font-mono text-xs underline print:visible"
aria-hidden="true"
>
{link.replace("https://", "").replace("www.", "").replace("/", "")}
</div>
</>
);
}
interface ProjectTagsProps {
tags: ProjectTags;
}
/**
* Renders a list of technology tags used in the project
*/
function ProjectTags({ tags }: ProjectTagsProps) {
if (tags.length === 0) return null;
return (
<ul
className="mt-2 flex list-none flex-wrap gap-1 p-0"
aria-label="Technologies used"
>
{tags.map((tag) => (
<li key={tag}>
<Badge
className="px-1 py-0 text-[10px] print:px-1 print:py-0.5 print:text-[8px] print:leading-tight"
variant="secondary"
>
{tag}
</Badge>
</li>
))}
</ul>
);
}
interface ProjectCardProps {
title: string;
description: string;
tags: ProjectTags;
link?: string;
}
/**
* Card component displaying project information
*/
function ProjectCard({ title, description, tags, link }: ProjectCardProps) {
return (
<Card className="flex h-full flex-col overflow-hidden border p-3">
<CardHeader>
<div className="space-y-1">
<CardTitle className="text-base">
<ProjectLink title={title} link={link} />
</CardTitle>
<CardDescription
className="text-pretty font-mono text-xs print:text-[10px]"
aria-label="Project description"
>
{description}
</CardDescription>
</div>
</CardHeader>
<CardContent className="mt-auto flex">
<ProjectTags tags={tags} />
</CardContent>
</Card>
);
}
interface ProjectsProps {
projects: (typeof RESUME_DATA)["projects"];
}
/**
* Section component displaying all side projects
*/
export function Projects({ projects }: ProjectsProps) {
return (
<Section className="scroll-mb-16 print:space-y-4">
<h2 className="text-xl font-bold" id="side-projects">
Side projects
</h2>
<div
className="-mx-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 print:grid-cols-3 print:gap-2"
role="feed"
aria-labelledby="side-projects"
>
{projects.map((project) => (
<article
key={project.title}
className="h-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm print:hover:translate-y-0 print:hover:shadow-none"
>
<ProjectCard
title={project.title}
description={project.description}
tags={project.techStack}
link={project.link?.href}
/>
</article>
))}
</div>
</Section>
);
}
================================================
FILE: src/app/components/skills.tsx
================================================
import { Badge } from "@/components/ui/badge";
import { Section } from "@/components/ui/section";
import { cn } from "@/lib/utils";
type Skills = readonly string[];
interface SkillsListProps {
skills: Skills;
className?: string;
}
/**
* Renders a list of skills as badges
*/
function SkillsList({ skills, className }: SkillsListProps) {
return (
<ul
className={cn("flex list-none flex-wrap gap-1 p-0", className)}
aria-label="List of skills"
>
{skills.map((skill) => (
<li key={skill}>
<Badge className="print:text-[10px]" aria-label={`Skill: ${skill}`}>
{skill}
</Badge>
</li>
))}
</ul>
);
}
interface SkillsProps {
skills: Skills;
className?: string;
}
/**
* Skills section component
* Displays a list of professional skills as badges
*/
export function Skills({ skills, className }: SkillsProps) {
return (
<Section className={className}>
<h2 className="text-xl font-bold" id="skills-section">
Skills
</h2>
<SkillsList skills={skills} />
</Section>
);
}
================================================
FILE: src/app/components/summary.tsx
================================================
import { Section } from "../../components/ui/section";
interface AboutProps {
summary: string;
className?: string;
}
/**
* Summary section component
* Displays a summary of professional experience and goals
*/
export function Summary({ summary, className }: AboutProps) {
return (
<Section className={className}>
<h2 className="text-xl font-bold" id="about-section">
About
</h2>
<div className="text-pretty font-mono text-sm text-foreground/80 print:text-[12px]">
{summary}
</div>
</Section>
);
}
================================================
FILE: src/app/components/work-experience.tsx
================================================
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Section } from "@/components/ui/section";
import type { RESUME_DATA } from "@/data/resume-data";
import { cn } from "@/lib/utils";
type WorkExperience = (typeof RESUME_DATA)["work"][number];
type WorkBadges = readonly string[];
interface BadgeListProps {
className?: string;
badges: WorkBadges;
}
/**
* Renders a list of badges for work experience
* Handles both mobile and desktop layouts through className prop
*/
function BadgeList({ className, badges }: BadgeListProps) {
if (badges.length === 0) return null;
return (
<ul
className={cn("inline-flex list-none gap-x-1 p-0", className)}
aria-label="Technologies used"
>
{badges.map((badge) => (
<li key={badge}>
<Badge
variant="secondary"
className="align-middle text-xs print:px-1 print:py-0.5 print:text-[8px] print:leading-tight"
>
{badge}
</Badge>
</li>
))}
</ul>
);
}
interface WorkPeriodProps {
start: WorkExperience["start"];
end?: WorkExperience["end"];
}
/**
* Displays the work period in a consistent format
*/
function WorkPeriod({ start, end }: WorkPeriodProps) {
return (
<div
className="text-sm tabular-nums text-gray-500"
title={`Employment period: ${start} to ${end ?? "Present"}`}
>
{start} - {end ?? "Present"}
</div>
);
}
interface CompanyLinkProps {
company: WorkExperience["company"];
link: WorkExperience["link"];
}
/**
* Renders company name with optional link
*/
function CompanyLink({ company, link }: CompanyLinkProps) {
return (
<a
className="hover:underline"
href={link}
target="_blank"
rel="noopener noreferrer"
aria-label={`${company} company website`}
>
{company}
</a>
);
}
interface WorkExperienceItemProps {
work: WorkExperience;
}
/**
* Individual work experience card component
* Handles responsive layout for badges (mobile/desktop)
*/
function WorkExperienceItem({ work }: WorkExperienceItemProps) {
const { company, link, badges, title, start, end, description, highlights } =
work;
return (
<Card className="border-none py-1 print:py-0">
<CardHeader className="print:space-y-1">
<div className="flex items-center justify-between gap-x-2 text-base">
<h3 className="inline-flex items-center justify-center gap-x-1 font-semibold leading-none print:text-sm">
<CompanyLink company={company} link={link} />
<BadgeList
className="hidden gap-x-1 sm:inline-flex"
badges={badges}
/>
</h3>
<WorkPeriod start={start} end={end} />
</div>
<h4 className="font-mono text-sm font-semibold leading-none print:text-[12px]">
{title}
</h4>
</CardHeader>
<CardContent>
<div className="mt-2 text-xs text-foreground/80 print:mt-1 print:text-[10px] text-pretty">
{description}
{highlights && highlights.length > 0 && (
<ul className="list-inside list-disc">
{highlights.map((highlight) => (
<li key={highlight}>{highlight}</li>
))}
</ul>
)}
</div>
<div className="mt-2">
<BadgeList
className="-mx-2 flex-wrap gap-1 sm:hidden"
badges={badges}
/>
</div>
</CardContent>
</Card>
);
}
interface WorkExperienceProps {
work: (typeof RESUME_DATA)["work"];
}
/**
* Main work experience section component
* Renders a list of work experiences in chronological order
*/
export function WorkExperience({ work }: WorkExperienceProps) {
return (
<Section>
<h2 className="text-xl font-bold" id="work-experience">
Work Experience
</h2>
<div
className="space-y-4 print:space-y-0"
role="feed"
aria-labelledby="work-experience"
>
{work.map((item) => (
<article key={`${item.company}-${item.start}`}>
<WorkExperienceItem work={item} />
</article>
))}
</div>
</Section>
);
}
================================================
FILE: src/app/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 224 71.4% 4.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground font-sans;
}
}
.print-force-new-page {
page-break-before: always;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 400ms ease-out both;
}
@media print {
.animate-fade-in {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
================================================
FILE: src/app/layout.tsx
================================================
import { Analytics } from "@vercel/analytics/react";
import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";
import type { Metadata, Viewport } from "next";
import "./globals.css";
import type React from "react";
import { ErrorBoundary } from "@/components/error-boundary";
import { RESUME_DATA } from "@/data/resume-data";
export const metadata: Metadata = {
metadataBase: new URL("https://cv.jarocki.me"),
title: {
default: `${RESUME_DATA.name} - ${RESUME_DATA.about}`,
template: `%s | ${RESUME_DATA.name}`,
},
description: RESUME_DATA.about,
keywords: [
"resume",
"cv",
"portfolio",
RESUME_DATA.name,
"software engineer",
"full stack developer",
"react",
"next.js",
"typescript",
],
authors: [{ name: RESUME_DATA.name }],
creator: RESUME_DATA.name,
publisher: RESUME_DATA.name,
formatDetection: {
email: false,
address: false,
telephone: false,
},
openGraph: {
type: "website",
locale: "en_US",
url: RESUME_DATA.personalWebsiteUrl,
siteName: `${RESUME_DATA.name}'s CV`,
title: `${RESUME_DATA.name} - ${RESUME_DATA.about}`,
description: RESUME_DATA.about,
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
twitter: {
card: "summary_large_image",
title: `${RESUME_DATA.name} - ${RESUME_DATA.about}`,
description: RESUME_DATA.about,
creator: "@BartoszJarocki",
},
alternates: {
canonical: RESUME_DATA.personalWebsiteUrl,
},
};
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
width: "device-width",
initialScale: 1,
maximumScale: 5,
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body>
<ErrorBoundary>{children}</ErrorBoundary>
<Analytics />
</body>
</html>
);
}
================================================
FILE: src/app/loading.tsx
================================================
export default function Loading() {
return (
<div className="container relative mx-auto scroll-my-12 overflow-auto p-4 md:p-16 print:p-11">
<div className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-4">
{/* Header skeleton */}
<div className="flex items-center justify-between">
<div className="flex-1 space-y-3">
<div className="h-8 w-48 animate-pulse rounded bg-gray-200" />
<div className="h-4 w-64 animate-pulse rounded bg-gray-200" />
<div className="h-4 w-32 animate-pulse rounded bg-gray-200" />
</div>
<div className="size-28 animate-pulse rounded-xl bg-gray-200" />
</div>
{/* Content sections skeleton */}
<div className="space-y-8">
{[...Array(4)].map((_, i) => (
<div
// biome-ignore lint/suspicious/noArrayIndexKey: Static skeleton content doesn't reorder
key={`loading-section-${i}`}
className="space-y-4"
>
<div className="h-6 w-32 animate-pulse rounded bg-gray-200" />
<div className="space-y-3">
<div className="h-4 w-full animate-pulse rounded bg-gray-200" />
<div className="h-4 w-3/4 animate-pulse rounded bg-gray-200" />
<div className="h-4 w-1/2 animate-pulse rounded bg-gray-200" />
</div>
</div>
))}
</div>
</div>
</div>
);
}
================================================
FILE: src/app/opengraph-image.tsx
================================================
import { ImageResponse } from "next/og";
import { RESUME_DATA } from "../data/resume-data";
export const runtime = "edge";
export const alt = "Minimalist Resume";
export const size = {
width: 1200,
height: 630,
};
export const contentType = "image/png";
export default async function Image() {
return new ImageResponse(
<div
style={{
background: "white",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: '"Inter"',
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}}
>
{/* biome-ignore lint/performance/noImgElement: ImageResponse context requires img element */}
<img
src={RESUME_DATA.avatarUrl}
alt={RESUME_DATA.name}
style={{
width: "150px",
height: "150px",
borderRadius: "10%",
marginBottom: "2rem",
}}
/>
<div
style={{
fontSize: "3rem",
fontWeight: "bold",
color: "#333",
marginBottom: "1rem",
}}
>
{RESUME_DATA.name}
</div>
<div
style={{
fontSize: "1.5rem",
color: "#666",
maxWidth: "600px",
lineHeight: "1.4",
}}
>
{RESUME_DATA.about}
</div>
<div
style={{
display: "flex",
marginTop: "2rem",
gap: "1rem",
}}
>
{RESUME_DATA.personalWebsiteUrl && (
<div style={{ fontSize: "1rem", color: "#666" }}>
{RESUME_DATA.personalWebsiteUrl}
</div>
)}
</div>
</div>
</div>,
{
...size,
}
);
}
================================================
FILE: src/app/page.tsx
================================================
import type { Metadata } from "next";
import { CommandMenu } from "@/components/command-menu";
import { RESUME_DATA } from "@/data/resume-data";
import { generateResumeStructuredData } from "@/lib/structured-data";
import { Education } from "./components/education";
import { Header } from "./components/header";
import { Projects } from "./components/projects";
import { Skills } from "./components/skills";
import { Summary } from "./components/summary";
import { WorkExperience } from "./components/work-experience";
export const metadata: Metadata = {
title: `${RESUME_DATA.name} - Resume`,
description: RESUME_DATA.about,
openGraph: {
title: `${RESUME_DATA.name} - Resume`,
description: RESUME_DATA.about,
type: "profile",
locale: "en_US",
images: [
{
url: "https://cv.jarocki.me/opengraph-image",
width: 1200,
height: 630,
alt: `${RESUME_DATA.name}'s profile picture`,
},
],
},
twitter: {
card: "summary_large_image",
title: `${RESUME_DATA.name} - Resume`,
description: RESUME_DATA.about,
images: ["https://cv.jarocki.me/opengraph-image"],
},
};
/**
* Transform social links for command menu
*/
function getCommandMenuLinks() {
const links = [];
if (RESUME_DATA.personalWebsiteUrl) {
links.push({
url: RESUME_DATA.personalWebsiteUrl,
title: "Personal Website",
});
}
return [
...links,
...RESUME_DATA.contact.social.map((socialMediaLink) => ({
url: socialMediaLink.url,
title: socialMediaLink.name,
})),
];
}
export default function ResumePage() {
const structuredData = generateResumeStructuredData();
return (
<>
<script
type="application/ld+json"
// biome-ignore lint/security/noDangerouslySetInnerHtml: Safe for JSON-LD structured data
dangerouslySetInnerHTML={{
__html: JSON.stringify(structuredData),
}}
/>
<main
className="container relative mx-auto scroll-my-12 overflow-auto p-4 print:p-11 md:p-16"
id="main-content"
>
<div className="sr-only">
<h1>{RESUME_DATA.name}'s Resume</h1>
</div>
<section
className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-4 dark:bg-background"
aria-label="Resume Content"
>
<div className="animate-fade-in" style={{ animationDelay: "0ms" }}>
<Header />
</div>
<div className="space-y-8 print:space-y-4">
<div className="animate-fade-in" style={{ animationDelay: "75ms" }}>
<Summary summary={RESUME_DATA.summary} />
</div>
<div
className="animate-fade-in"
style={{ animationDelay: "150ms" }}
>
<WorkExperience work={RESUME_DATA.work} />
</div>
<div
className="animate-fade-in"
style={{ animationDelay: "225ms" }}
>
<Education education={RESUME_DATA.education} />
</div>
<div
className="animate-fade-in"
style={{ animationDelay: "300ms" }}
>
<Skills skills={RESUME_DATA.skills} />
</div>
<div
className="animate-fade-in"
style={{ animationDelay: "375ms" }}
>
<Projects projects={RESUME_DATA.projects} />
</div>
</div>
</section>
<nav className="print:hidden" aria-label="Quick navigation">
<CommandMenu links={getCommandMenuLinks()} />
</nav>
</main>
</>
);
}
================================================
FILE: src/app/sitemap.ts
================================================
import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
const baseUrl = "https://cv.jarocki.me";
return [
{
url: baseUrl,
lastModified: new Date(),
changeFrequency: "monthly",
priority: 1,
},
];
}
================================================
FILE: src/components/avatar.tsx
================================================
"use client";
import Image from "next/image";
import * as React from "react";
import { cn } from "@/lib/utils";
interface OptimizedAvatarProps {
src: string;
alt: string;
fallback: string;
className?: string;
}
export function Avatar({
src,
alt,
fallback,
className,
}: OptimizedAvatarProps) {
const [error, setError] = React.useState(false);
return (
<div
className={cn(
"relative flex shrink-0 overflow-hidden rounded-xl bg-muted",
className
)}
>
{!error && src ? (
<Image
src={src}
alt={alt}
width={112}
height={112}
className="aspect-square h-full w-full object-cover"
onError={() => setError(true)}
priority={true}
/>
) : (
<div className="flex h-full w-full items-center justify-center text-lg font-semibold">
{fallback}
</div>
)}
</div>
);
}
================================================
FILE: src/components/command-menu.tsx
================================================
"use client";
import { CommandIcon } from "lucide-react";
import * as React from "react";
import {
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
} from "@/components/ui/command";
import { Button } from "./ui/button";
interface Props {
links: { url: string; title: string }[];
}
export const CommandMenu = ({ links }: Props) => {
const [open, setOpen] = React.useState(false);
const [isMac, setIsMac] = React.useState(false);
React.useEffect(() => {
setIsMac(window.navigator.userAgent.includes("Mac"));
const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
return (
<>
<p className="fixed bottom-0 left-0 right-0 hidden bg-gradient-to-t from-[hsl(var(--background))] to-transparent p-1 pt-6 text-center text-sm text-muted-foreground xl:block print:hidden">
Press{" "}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">{isMac ? "⌘" : "Ctrl"}</span>+J
</kbd>{" "}
to open the command menu
</p>
<Button
onClick={() => setOpen((open) => !open)}
variant="outline"
size="icon"
className="fixed bottom-4 right-4 flex rounded-full shadow-2xl xl:hidden print:hidden"
>
<CommandIcon className="my-6 size-6" />
</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem
onSelect={() => {
setOpen(false);
window.print();
}}
>
<span>Print</span>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Links">
{links.map(({ url, title }) => (
<CommandItem
key={url}
onSelect={() => {
setOpen(false);
window.open(url, "_blank");
}}
>
<span>{title}</span>
</CommandItem>
))}
</CommandGroup>
<CommandSeparator />
</CommandList>
</CommandDialog>
</>
);
};
================================================
FILE: src/components/error-boundary.tsx
================================================
"use client";
import { Component, type ErrorInfo, type ReactNode } from "react";
interface Props {
children: ReactNode;
fallback?: ReactNode;
}
interface State {
hasError: boolean;
error?: Error;
}
export class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
};
public static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error("Uncaught error:", error, errorInfo);
}
public render() {
if (this.state.hasError) {
return (
this.props.fallback || (
<div className="flex min-h-screen flex-col items-center justify-center p-4">
<div className="max-w-md text-center">
<h2 className="mb-4 text-2xl font-bold">Something went wrong</h2>
<p className="mb-4 text-muted-foreground">
We apologize for the inconvenience. Please try refreshing the
page.
</p>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
>
Try again
</button>
</div>
</div>
)
);
}
return this.props.children;
}
}
================================================
FILE: src/components/icons/github-icon.tsx
================================================
export const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<title>GitHub</title>
<path
fill="currentColor"
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
);
};
================================================
FILE: src/components/icons/index.ts
================================================
import { GitHubIcon } from "./github-icon";
import { LinkedInIcon } from "./linkedin-icon";
export { GitHubIcon, LinkedInIcon };
================================================
FILE: src/components/icons/linkedin-icon.tsx
================================================
export const LinkedInIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<title>LinkedIn</title>
<path
fill="currentColor"
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
/>
</svg>
);
};
================================================
FILE: src/components/icons/x-icon.tsx
================================================
export const XIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<title>X</title>
<path
fill="currentColor"
d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
/>
</svg>
);
};
================================================
FILE: src/components/ui/badge.tsx
================================================
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold font-mono transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-nowrap",
{
variants: {
variant: {
default:
"border-transparent bg-primary/80 text-primary-foreground hover:bg-primary/60",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/60",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
);
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
);
}
export { Badge, badgeVariants };
================================================
FILE: src/components/ui/button.tsx
================================================
"use client";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
================================================
FILE: src/components/ui/card.tsx
================================================
import * as React from "react";
import { cn } from "@/lib/utils";
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border border-muted bg-card text-card-foreground",
className
)}
{...props}
/>
));
Card.displayName = "Card";
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5", className)}
{...props}
/>
));
CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-foreground", className)}
{...props}
/>
));
CardDescription.displayName = "CardDescription";
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"text-pretty font-mono text-sm text-muted-foreground",
className
)}
{...props}
/>
));
CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center", className)} {...props} />
));
CardFooter.displayName = "CardFooter";
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardDescription,
CardContent,
};
================================================
FILE: src/components/ui/command.tsx
================================================
"use client";
import type { DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import * as React from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
)}
{...props}
/>
));
Command.displayName = CommandPrimitive.displayName;
interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
);
};
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
));
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props}
/>
));
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
{...props}
/>
));
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
));
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
/>
));
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
);
};
CommandShortcut.displayName = "CommandShortcut";
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
};
================================================
FILE: src/components/ui/dialog.tsx
================================================
"use client";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 print:hidden",
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] print:hidden sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};
================================================
FILE: src/components/ui/section.tsx
================================================
import type React from "react";
import { cn } from "@/lib/utils";
export interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {}
export function Section({ className, ...props }: SectionProps) {
return (
<section
className={cn("flex min-h-0 flex-col gap-y-3 print:gap-y-1", className)}
{...props}
/>
);
}
================================================
FILE: src/data/resume-data.ts
================================================
import type { ResumeData } from "@/lib/types";
export const RESUME_DATA: ResumeData = {
name: "Bartosz Jarocki",
initials: "BJ",
location: "Wrocław, Poland, CET",
locationLink: "https://www.google.com/maps/place/Wrocław",
about: "Full Stack Engineer building products from the ground up.",
summary:
"Full Stack Engineer with 15+ years of experience and 10+ years working remotely. Building high-performance web applications, leading distributed teams, and creating open source tools used by thousands of developers.",
avatarUrl: "https://avatars.githubusercontent.com/u/1017620?v=4",
personalWebsiteUrl: "https://jarocki.me",
contact: {
email: "bartosz.jarocki@hey.com",
tel: "+48530213401",
social: [
{
name: "GitHub",
url: "https://github.com/BartoszJarocki",
icon: "github",
},
{
name: "LinkedIn",
url: "https://www.linkedin.com/in/bjarocki/",
icon: "linkedin",
},
{
name: "X",
url: "https://x.com/BartoszJarocki",
icon: "x",
},
],
},
education: [
{
school: "Wrocław University of Technology",
degree: "Bachelor's Degree in Control systems engineering and Robotics",
start: "2007",
end: "2010",
},
],
work: [
{
company: "Motion",
link: "https://motionapp.com/",
badges: ["Remote", "AI", "React", "Next.js", "TypeScript", "AdonisJS"],
title: "Senior Software Engineer",
start: "2025",
end: null,
description:
"Building an internal AI agents platform that enables marketing teams to create and manage AI-powered workflows.",
},
{
company: "Film.io",
link: "https://film.io",
badges: ["Remote", "React", "Next.js", "TypeScript", "Node.js"],
title: "Software Architect",
start: "2024",
end: "2025",
description:
"Led technical architecture of a blockchain-based film funding platform.",
highlights: [
"Architected migration from CRA to Next.js for improved performance, SEO, and DX",
"Established release process enabling faster deployments and reliable rollbacks",
"Implemented system-wide monitoring and security improvements",
],
},
{
company: "Parabol",
link: "https://parabol.co",
badges: [
"Remote",
"React",
"TypeScript",
"Node.js",
"GraphQL",
"Tailwind CSS",
],
title: "Senior Full Stack Developer",
start: "2021",
end: "2024",
description:
"Led a product squad building an enterprise agile meeting platform.",
highlights: [
"Built design system with Tailwind CSS, improving development speed and time to market",
"Implemented engineering practices: PR automation, code review guidelines, and workflows",
"Open source contributions to Relay DevTools and React i18n tooling",
],
},
{
company: "Clevertech",
link: "https://clevertech.biz",
badges: ["Remote", "React", "TypeScript", "Node.js", "Android", "Kotlin"],
title: "Lead Android Developer → Full Stack Developer",
start: "2015",
end: "2021",
description:
"Transitioned from mobile to full-stack development while leading distributed teams across multiple client projects.",
highlights: [
"Led frontend team at Evercast, building real-time platform supporting 30+ users per room with HD streaming and collaboration tools",
"Developed offline-first Android app for DKMS, improving donor registration process",
"Led development teams across multiple successful client projects",
],
},
{
company: "Jojo Mobile",
link: "https://bsgroup.eu/",
badges: ["On Site", "Android", "Java", "Kotlin"],
title: "Android Developer → Lead Android Developer",
start: "2012",
end: "2015",
description:
"First Android developer, grew and led a team of 15+ engineers. Established mobile engineering culture and delivery processes.",
highlights: [
"Developed apps for major Polish companies including LOT, Polskie Radio, and Agora",
"Built and mentored high-performing mobile development team",
],
},
{
company: "Nokia Siemens Networks",
link: "https://www.nokia.com",
badges: ["On Site", "C/C++", "LTE", "Agile"],
title: "C/C++ Developer",
start: "2010",
end: "2012",
description:
"Developed software for LTE base stations at enterprise scale. Built strong foundations in software architecture, testing practices, and cross-team collaboration.",
},
],
skills: [
"React/Next.js",
"TypeScript",
"Node.js",
"AI/LLMs",
"Tailwind CSS",
"Design Systems",
"WebRTC",
"WebSockets",
"GraphQL",
"System Architecture",
"Remote Team Leadership",
],
projects: [
{
title: "Monito",
techStack: ["TypeScript", "Next.js", "AI", "Browser Extension"],
description: "Autonomous QA AI agent for web applications",
link: {
label: "monito.dev",
href: "https://monito.dev/",
},
},
{
title: "43frames",
techStack: ["TypeScript", "Next.js", "AI"],
description: "AI-powered image and video generation studio",
link: {
label: "43frames.com",
href: "https://43frames.com/",
},
},
{
title: "Minimalist CV",
techStack: ["TypeScript", "Next.js", "Tailwind CSS"],
description:
"Open source, print-friendly CV template. 9,600+ stars on GitHub",
link: {
label: "Minimalist CV",
href: "https://github.com/BartoszJarocki/cv",
},
},
],
} as const;
================================================
FILE: src/lib/structured-data.ts
================================================
import { RESUME_DATA } from "@/data/resume-data";
export function generatePersonStructuredData() {
return {
"@context": "https://schema.org",
"@type": "Person",
name: RESUME_DATA.name,
alternateName: RESUME_DATA.initials,
description: RESUME_DATA.about,
url: RESUME_DATA.personalWebsiteUrl,
image: RESUME_DATA.avatarUrl,
sameAs: RESUME_DATA.contact.social.map((social) => social.url),
address: {
"@type": "Place",
name: RESUME_DATA.location,
},
contactPoint: {
"@type": "ContactPoint",
email: RESUME_DATA.contact.email,
telephone: RESUME_DATA.contact.tel,
contactType: "personal",
},
jobTitle: "Full Stack Engineer",
worksFor:
RESUME_DATA.work.length > 0
? {
"@type": "Organization",
name: RESUME_DATA.work[0].company,
url: RESUME_DATA.work[0].link,
}
: undefined,
alumniOf: RESUME_DATA.education.map((edu) => ({
"@type": "EducationalOrganization",
name: edu.school,
})),
hasOccupation: RESUME_DATA.work.map((job) => ({
"@type": "Occupation",
name: job.title,
occupationLocation: {
"@type": "Place",
name: RESUME_DATA.location,
},
occupationalCategory: "Software Engineering",
estimatedSalary: {
"@type": "MonetaryAmountDistribution",
name: "Professional software engineer",
},
})),
knowsAbout: RESUME_DATA.skills,
};
}
export function generateWebPageStructuredData() {
return {
"@context": "https://schema.org",
"@type": "WebPage",
name: `${RESUME_DATA.name} - Resume`,
description: RESUME_DATA.about,
url: "https://cv.jarocki.me",
inLanguage: "en-US",
isPartOf: {
"@type": "WebSite",
name: `${RESUME_DATA.name}'s Professional Resume`,
url: "https://cv.jarocki.me",
},
about: {
"@type": "Person",
name: RESUME_DATA.name,
},
mainEntity: generatePersonStructuredData(),
};
}
export function generateResumeStructuredData() {
const person = generatePersonStructuredData();
return {
"@context": "https://schema.org",
"@type": "ProfilePage",
dateCreated: new Date().toISOString(),
dateModified: new Date().toISOString(),
mainEntity: person,
about: person,
name: `${RESUME_DATA.name} - Professional Resume`,
description: `Professional resume and portfolio of ${RESUME_DATA.name}, ${RESUME_DATA.about}`,
url: "https://cv.jarocki.me",
};
}
================================================
FILE: src/lib/types.ts
================================================
import type { StaticImageData } from "next/image";
export type ResumeIcon =
| React.ComponentType<React.SVGProps<SVGSVGElement>>
| StaticImageData;
export type IconType = "github" | "linkedin" | "x" | "globe" | "mail" | "phone";
export interface ResumeData {
name: string;
initials: string;
location: string;
locationLink: string;
about: string;
summary: string;
avatarUrl: string;
personalWebsiteUrl: string;
contact: {
email: string;
tel: string;
social: Array<{
name: string;
url: string;
icon: IconType;
}>;
};
education: Array<{
school: string;
degree: string;
start: string;
end: string;
}>;
work: Array<{
company: string;
link: string;
badges: string[];
title: string;
start: string;
end: string | null;
description: string;
highlights?: readonly string[];
}>;
skills: string[];
projects: Array<{
title: string;
techStack: string[];
description: string;
link?: {
label: string;
href: string;
};
}>;
}
================================================
FILE: src/lib/utils.ts
================================================
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
================================================
FILE: tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily: {
sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [require("tailwindcss-animate")],
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "es2021",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"src/images/logos/*.*",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}
gitextract_05bs3w52/ ├── .dockerignore ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── biome.json ├── components.json ├── docker-compose.yaml ├── next.config.js ├── package.json ├── postcss.config.js ├── public/ │ └── robots.txt ├── src/ │ ├── app/ │ │ ├── components/ │ │ │ ├── education.tsx │ │ │ ├── header.tsx │ │ │ ├── projects.tsx │ │ │ ├── skills.tsx │ │ │ ├── summary.tsx │ │ │ └── work-experience.tsx │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── loading.tsx │ │ ├── opengraph-image.tsx │ │ ├── page.tsx │ │ └── sitemap.ts │ ├── components/ │ │ ├── avatar.tsx │ │ ├── command-menu.tsx │ │ ├── error-boundary.tsx │ │ ├── icons/ │ │ │ ├── github-icon.tsx │ │ │ ├── index.ts │ │ │ ├── linkedin-icon.tsx │ │ │ └── x-icon.tsx │ │ └── ui/ │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── command.tsx │ │ ├── dialog.tsx │ │ └── section.tsx │ ├── data/ │ │ └── resume-data.ts │ └── lib/ │ ├── structured-data.ts │ ├── types.ts │ └── utils.ts ├── tailwind.config.js └── tsconfig.json
SYMBOL INDEX (75 symbols across 23 files)
FILE: next.config.js
method headers (line 24) | async headers() {
FILE: src/app/components/education.tsx
type Education (line 5) | type Education = (typeof RESUME_DATA)["education"][number];
type EducationPeriodProps (line 7) | interface EducationPeriodProps {
function EducationPeriod (line 15) | function EducationPeriod({ start, end }: EducationPeriodProps) {
type EducationItemProps (line 26) | interface EducationItemProps {
function EducationItem (line 33) | function EducationItem({ education }: EducationItemProps) {
type EducationListProps (line 57) | interface EducationListProps {
function Education (line 65) | function Education({ education }: EducationListProps) {
FILE: src/app/components/header.tsx
constant ICON_MAP (line 11) | const ICON_MAP: Record<
type LocationLinkProps (line 23) | interface LocationLinkProps {
function LocationLink (line 28) | function LocationLink({ location, locationLink }: LocationLinkProps) {
type SocialButtonProps (line 45) | interface SocialButtonProps {
function SocialButton (line 51) | function SocialButton({ href, iconType, label }: SocialButtonProps) {
type ContactButtonsProps (line 68) | interface ContactButtonsProps {
function ContactButtons (line 73) | function ContactButtons({ contact, personalWebsiteUrl }: ContactButtonsP...
type PrintContactProps (line 119) | interface PrintContactProps {
function PrintContact (line 124) | function PrintContact({ contact, personalWebsiteUrl }: PrintContactProps) {
function Header (line 164) | function Header() {
FILE: src/app/components/projects.tsx
type ProjectTags (line 12) | type ProjectTags = readonly string[];
type ProjectLinkProps (line 14) | interface ProjectLinkProps {
function ProjectLink (line 22) | function ProjectLink({ title, link }: ProjectLinkProps) {
type ProjectTagsProps (line 53) | interface ProjectTagsProps {
function ProjectTags (line 60) | function ProjectTags({ tags }: ProjectTagsProps) {
type ProjectCardProps (line 82) | interface ProjectCardProps {
function ProjectCard (line 92) | function ProjectCard({ title, description, tags, link }: ProjectCardProp...
type ProjectsProps (line 115) | interface ProjectsProps {
function Projects (line 122) | function Projects({ projects }: ProjectsProps) {
FILE: src/app/components/skills.tsx
type Skills (line 5) | type Skills = readonly string[];
type SkillsListProps (line 7) | interface SkillsListProps {
function SkillsList (line 15) | function SkillsList({ skills, className }: SkillsListProps) {
type SkillsProps (line 32) | interface SkillsProps {
function Skills (line 41) | function Skills({ skills, className }: SkillsProps) {
FILE: src/app/components/summary.tsx
type AboutProps (line 3) | interface AboutProps {
function Summary (line 12) | function Summary({ summary, className }: AboutProps) {
FILE: src/app/components/work-experience.tsx
type WorkExperience (line 7) | type WorkExperience = (typeof RESUME_DATA)["work"][number];
type WorkBadges (line 8) | type WorkBadges = readonly string[];
type BadgeListProps (line 10) | interface BadgeListProps {
function BadgeList (line 19) | function BadgeList({ className, badges }: BadgeListProps) {
type WorkPeriodProps (line 41) | interface WorkPeriodProps {
function WorkPeriod (line 49) | function WorkPeriod({ start, end }: WorkPeriodProps) {
type CompanyLinkProps (line 60) | interface CompanyLinkProps {
function CompanyLink (line 68) | function CompanyLink({ company, link }: CompanyLinkProps) {
type WorkExperienceItemProps (line 82) | interface WorkExperienceItemProps {
function WorkExperienceItem (line 90) | function WorkExperienceItem({ work }: WorkExperienceItemProps) {
type WorkExperienceProps (line 135) | interface WorkExperienceProps {
function WorkExperience (line 143) | function WorkExperience({ work }: WorkExperienceProps) {
FILE: src/app/layout.tsx
function RootLayout (line 77) | function RootLayout({
FILE: src/app/loading.tsx
function Loading (line 1) | function Loading() {
FILE: src/app/opengraph-image.tsx
function Image (line 14) | async function Image() {
FILE: src/app/page.tsx
function getCommandMenuLinks (line 40) | function getCommandMenuLinks() {
function ResumePage (line 59) | function ResumePage() {
FILE: src/app/sitemap.ts
function sitemap (line 3) | function sitemap(): MetadataRoute.Sitemap {
FILE: src/components/avatar.tsx
type OptimizedAvatarProps (line 7) | interface OptimizedAvatarProps {
function Avatar (line 14) | function Avatar({
FILE: src/components/command-menu.tsx
type Props (line 16) | interface Props {
FILE: src/components/error-boundary.tsx
type Props (line 5) | interface Props {
type State (line 10) | interface State {
class ErrorBoundary (line 15) | class ErrorBoundary extends Component<Props, State> {
method getDerivedStateFromError (line 20) | public static getDerivedStateFromError(error: Error): State {
method componentDidCatch (line 24) | public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
method render (line 28) | public render() {
FILE: src/components/ui/badge.tsx
type BadgeProps (line 27) | interface BadgeProps
function Badge (line 31) | function Badge({ className, variant, ...props }: BadgeProps) {
FILE: src/components/ui/button.tsx
type ButtonProps (line 38) | interface ButtonProps
FILE: src/components/ui/command.tsx
type CommandDialogProps (line 26) | interface CommandDialogProps extends DialogProps {}
FILE: src/components/ui/section.tsx
type SectionProps (line 4) | interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {}
function Section (line 6) | function Section({ className, ...props }: SectionProps) {
FILE: src/data/resume-data.ts
constant RESUME_DATA (line 3) | const RESUME_DATA: ResumeData = {
FILE: src/lib/structured-data.ts
function generatePersonStructuredData (line 3) | function generatePersonStructuredData() {
function generateWebPageStructuredData (line 53) | function generateWebPageStructuredData() {
function generateResumeStructuredData (line 74) | function generateResumeStructuredData() {
FILE: src/lib/types.ts
type ResumeIcon (line 3) | type ResumeIcon =
type IconType (line 7) | type IconType = "github" | "linkedin" | "x" | "globe" | "mail" | "phone";
type ResumeData (line 9) | interface ResumeData {
FILE: src/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
Condensed preview — 43 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (82K chars).
[
{
"path": ".dockerignore",
"chars": 99,
"preview": "node_modules\n.next\n.git\n.gitignore\n.claude\n.idea\n.vscode\n*.md\nDockerfile\ndocker-compose.yaml\n.env*\n"
},
{
"path": ".gitignore",
"chars": 403,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "Dockerfile",
"chars": 905,
"preview": "FROM node:22-slim AS base\nENV PNPM_HOME=\"/pnpm\"\nENV PATH=\"$PNPM_HOME:$PATH\"\nRUN corepack enable && corepack prepare pnpm"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "MIT License\n\nCopyright (c) 2023 Bartosz Jarocki\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "README.md",
"chars": 2663,
"preview": "\n\n<h1>minimalist cv <a hr"
},
{
"path": "biome.json",
"chars": 4192,
"preview": "{\n \"$schema\": \"https://biomejs.dev/schemas/2.0.6/schema.json\",\n \"vcs\": {\n \"enabled\": false,\n \"clientKind\": \"git\""
},
{
"path": "components.json",
"chars": 340,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n"
},
{
"path": "docker-compose.yaml",
"chars": 388,
"preview": "services:\n app:\n build: .\n ports:\n - '3000:3000'\n environment:\n - NODE_ENV=production\n restart: u"
},
{
"path": "next.config.js",
"chars": 1811,
"preview": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n output: 'standalone',\n\n // Enable React strict mode for"
},
{
"path": "package.json",
"chars": 1061,
"preview": "{\n \"name\": \"web-cv\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next "
},
{
"path": "postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "public/robots.txt",
"chars": 233,
"preview": "# Robots.txt for https://cv.jarocki.me\n\nUser-agent: *\nAllow: /\nDisallow: /api/\nDisallow: /_next/\nDisallow: /graphql\n\n# S"
},
{
"path": "src/app/components/education.tsx",
"chars": 2073,
"preview": "import { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { Section } from \"@/components/ui/section\";"
},
{
"path": "src/app/components/header.tsx",
"chars": 5163,
"preview": "import { GlobeIcon, MailIcon, PhoneIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { Avatar } from \"@"
},
{
"path": "src/app/components/projects.tsx",
"chars": 3741,
"preview": "import { Badge } from \"@/components/ui/badge\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTi"
},
{
"path": "src/app/components/skills.tsx",
"chars": 1101,
"preview": "import { Badge } from \"@/components/ui/badge\";\nimport { Section } from \"@/components/ui/section\";\nimport { cn } from \"@/"
},
{
"path": "src/app/components/summary.tsx",
"chars": 558,
"preview": "import { Section } from \"../../components/ui/section\";\n\ninterface AboutProps {\n summary: string;\n className?: string;\n"
},
{
"path": "src/app/components/work-experience.tsx",
"chars": 4274,
"preview": "import { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimp"
},
{
"path": "src/app/globals.css",
"chars": 1954,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --f"
},
{
"path": "src/app/layout.tsx",
"chars": 2205,
"preview": "import { Analytics } from \"@vercel/analytics/react\";\nimport { GeistMono } from \"geist/font/mono\";\nimport { GeistSans } f"
},
{
"path": "src/app/loading.tsx",
"chars": 1492,
"preview": "export default function Loading() {\n return (\n <div className=\"container relative mx-auto scroll-my-12 overflow-auto"
},
{
"path": "src/app/opengraph-image.tsx",
"chars": 1972,
"preview": "import { ImageResponse } from \"next/og\";\nimport { RESUME_DATA } from \"../data/resume-data\";\n\nexport const runtime = \"edg"
},
{
"path": "src/app/page.tsx",
"chars": 3684,
"preview": "import type { Metadata } from \"next\";\nimport { CommandMenu } from \"@/components/command-menu\";\nimport { RESUME_DATA } fr"
},
{
"path": "src/app/sitemap.ts",
"chars": 283,
"preview": "import type { MetadataRoute } from \"next\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n const baseUrl ="
},
{
"path": "src/components/avatar.tsx",
"chars": 945,
"preview": "\"use client\";\n\nimport Image from \"next/image\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterf"
},
{
"path": "src/components/command-menu.tsx",
"chars": 2690,
"preview": "\"use client\";\n\nimport { CommandIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n CommandDialog,\n C"
},
{
"path": "src/components/error-boundary.tsx",
"chars": 1439,
"preview": "\"use client\";\n\nimport { Component, type ErrorInfo, type ReactNode } from \"react\";\n\ninterface Props {\n children: ReactNo"
},
{
"path": "src/components/icons/github-icon.tsx",
"chars": 978,
"preview": "export const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg viewBox=\"0 0 24 24\" xmlns=\"htt"
},
{
"path": "src/components/icons/index.ts",
"chars": 130,
"preview": "import { GitHubIcon } from \"./github-icon\";\nimport { LinkedInIcon } from \"./linkedin-icon\";\n\nexport { GitHubIcon, Linked"
},
{
"path": "src/components/icons/linkedin-icon.tsx",
"chars": 768,
"preview": "export const LinkedInIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg viewBox=\"0 0 24 24\" xmlns=\"h"
},
{
"path": "src/components/icons/x-icon.tsx",
"chars": 403,
"preview": "export const XIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://w"
},
{
"path": "src/components/ui/badge.tsx",
"chars": 1161,
"preview": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } f"
},
{
"path": "src/components/ui/button.tsx",
"chars": 1861,
"preview": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-autho"
},
{
"path": "src/components/ui/card.tsx",
"chars": 1950,
"preview": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n R"
},
{
"path": "src/components/ui/command.tsx",
"chars": 4894,
"preview": "\"use client\";\n\nimport type { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"c"
},
{
"path": "src/components/ui/dialog.tsx",
"chars": 3897,
"preview": "\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport * as "
},
{
"path": "src/components/ui/section.tsx",
"chars": 345,
"preview": "import type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SectionProps extends React.HTMLAttri"
},
{
"path": "src/data/resume-data.ts",
"chars": 5797,
"preview": "import type { ResumeData } from \"@/lib/types\";\n\nexport const RESUME_DATA: ResumeData = {\n name: \"Bartosz Jarocki\",\n in"
},
{
"path": "src/lib/structured-data.ts",
"chars": 2526,
"preview": "import { RESUME_DATA } from \"@/data/resume-data\";\n\nexport function generatePersonStructuredData() {\n return {\n \"@con"
},
{
"path": "src/lib/types.ts",
"chars": 1063,
"preview": "import type { StaticImageData } from \"next/image\";\n\nexport type ResumeIcon =\n | React.ComponentType<React.SVGProps<SVGS"
},
{
"path": "src/lib/utils.ts",
"chars": 169,
"preview": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: C"
},
{
"path": "tailwind.config.js",
"chars": 1868,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts"
},
{
"path": "tsconfig.json",
"chars": 730,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es2021\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
}
]
About this extraction
This page contains the full source code of the BartoszJarocki/cv GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 43 files (73.6 KB), approximately 20.8k tokens, and a symbol index with 75 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.