Configuration

Configuration

Everything you can set, where it lives, and what it does by default. Every value on this page was read from the code. For a guided walk-through instead of a reference, see Make It Yours.

Where things live

File	What you set there
src/resources/site-data.tsx	Your details: domain, name, role, bio, hero text, social links, experience, studies, skills, gallery, GitHub user
src/resources/content.tsx	Page titles, labels and descriptions, and which About sections are shown
src/resources/once-ui.config.ts	Which pages exist, the header, password-protected pages, fonts, colours, effects, newsletter form, sharing buttons
src/app/work/projects/*.mdx	One file per project (see Adding Projects)
.env.local	Secrets and machine-specific settings (see Environment variables)
next.config.mjs	Next.js options: allowed image hosts, redirects, build timeout
src/resources/custom.css	Optional custom colour scales, plus layout CSS for the GitHub grid and project cards
biome.json	Formatter and linter settings

Note: Values that are personal to the author (name, email, links, time zone and so on) are listed below as "author's value". Replace them with your own.

---

Environment variables

Variable	Required	Default	What it does
PAGE_ACCESS_PASSWORD	Only if protectedRoutes has an entry set to true	not set	The password for protected pages. Checked by POST /api/authenticate. If it is missing when someone submits a password, the API answers 500 Internal server error and logs PAGE_ACCESS_PASSWORD environment variable is not set.
CHROMIUM_PATH	No	the executable from @sparticuz/chromium	The browser used to capture project screenshots in src/app/screenshots/[slug]/route.ts. Set it to use a Chrome or Chromium you installed yourself.

Next.js sets NODE_ENV and NEXT_PHASE by itself. The code reads them to decide whether the password cookie is secure (production only) and whether a failed screenshot may fall back to the committed cover (during the build and in development).

Where to put them

• On your machine: a file named .env.local in the project root. Restart npm run dev after editing it.
• On Vercel: Project → Settings → Environment Variables.

Warning: The repository contains a committed .env file that already sets PAGE_ACCESS_PASSWORD, and .gitignore does not exclude .env files. Next.js loads .env too, so until you set your own value, the password is the one anyone can read in the public repository. Before you enable password protection, set your own password in .env.local (or in your host's settings; both take precedence over .env) and add .env*.local to .gitignore.

---

site-data.tsx

src/resources/site-data.tsx exports one object, siteData. The other files read from it.

meta

Key	Default	What it does
meta.baseURL	"https://umutbayraktar.vercel.app"	Your site's address, without a trailing slash. Used in page metadata, Schema.org data, sitemap.xml, robots.txt, the RSS feed, and to load your avatar into generated Open Graph images. Change this first.
meta.keywords	a list of keywords	Not read by any page at the moment.

person

Key	Default	What it does
firstName, lastName	author's value	Stored in person; the pages display name.
name	author's value	Your display name: About page heading, page titles, Open Graph images, schema author, RSS.
role	author's value	Shown under your name on About, in Open Graph images, and in the Home page title (name | role).
avatar	"/images/avatar.jpg"	Your picture, from public/. Shown on Home and About, and used in page schema, the RSS feed and generated Open Graph images. (The favicon is set separately in layout.tsx.)
email	author's value	Used in the RSS feed (managingEditor, webMaster, item author).
timezone	author's value	An IANA time-zone name such as Etc/UTC (full list). Shown on the About page next to a globe icon.
languages	["Türkçe", "English"]	Shown as tags on the About page. Remove the key or leave the list empty to hide them.
biography	author's value	The meta description of the Home and About pages.
phone, website, address	author's values	Not read by any page at the moment.

hero (Home page)

Key	Default	What it does
hero.headline	"Full-Stack Developer, AI Researcher & Content Creator"	The big heading on Home.
hero.subline	author's text	The paragraph under the heading. Supports %project.key% live numbers and **bold**.
hero.featured.badge, .label, .href	"Software studio", "Codeshare Technology", "https://codeshare.me"	A small badge above the headline. Only shown when home.featured.display is true in content.tsx (default false).
hero.ctaPrimary, hero.ctaSecondary, hero.stats	author's values	Not read by any page at the moment.

newsletter

Key	Default	What it does
newsletter.display	false	Shows the Mailchimp signup block at the bottom of Home.
newsletter.title	"Build log"	Heading of the block.
newsletter.description	author's text	Text under the heading.

The form itself is configured in mailchimp below.

social

A list of links. Each entry is shown as a button on the About page and as an icon in the footer.

Field	What it is
name	Label and tooltip, e.g. "GitHub"
icon	A key from src/resources/icons.ts (see the list below)
link	The full URL. It is not validated, so double-check it.

Default entries: Instagram, YouTube, TikTok, Discord, GitHub, LinkedIn, Twitter, Telegram, Facebook.

Icon keys available in src/resources/icons.ts:

arrowUpRight, arrowRight, email, globe, person, grid, book, openLink, calendar, home, gallery, discord, eye, eyeOff, github, linkedin, x, twitter, threads, arrowUpRightFromSquare, document, rocket, javascript, nextjs, supabase, figma, facebook, youtube, instagram, pinterest, whatsapp, reddit, telegram, tiktok

To add another icon, import it from react-icons in icons.ts and add it to iconLibrary.

about

Key	What it does
about.introDescription	The intro paragraph on About. Supports live numbers and **bold**.
about.experiences[]	Work experience. Each item has company, timeframe, role and achievements (a list of strings that support live numbers). images and link are present in the data but the About page does not show them.
about.studies[]	Education. Each item has name and description.
about.technical[]	Skills. Each item has title, description and tags (each tag has name and an optional icon). The About page shows only the tag name; icon is not displayed.
about.introTitle	Not read; the intro heading comes from about.intro.title in content.tsx.

gallery

A list of image paths shown on /gallery. The default list points at the eight live project screenshots (/screenshots/<slug>). You can use files from public/ (for example /images/gallery/one.jpg) or images on another host (see images.remotePatterns).

github

Key	Default	What it does
github.username	"umutxyp"	Whose repositories /github shows, and whose profile is read for pinned repositories.
github.highlight	["MusicBot", "Seo-Promt-Master", "Discord-Bot-Website", "Personal-Website", "slash-command-bot", "Shroudly"]	Fallback list of pinned repositories, used only if the pins cannot be read from your GitHub profile.
github.description	author's text	Text under the "GitHub Projects" heading and the page's meta description.

---

content.tsx

src/resources/content.tsx builds the page objects from siteData. Most values are filled in for you; these are the ones you are likely to change.

Key	Default	What it does
home.image	"/images/og/home.jpg"	Share image for the Home page. This file is not in the repository; add your own at public/images/og/home.jpg or change the path.
home.title	`${name} | ${role}`	Home page title.
home.featured.display	false	Shows the badge above the headline (see hero.featured).
about.title	`About - ${name}`	About page title, also the text of the button on Home.
about.avatar.display	true	Shows your avatar on About and in the Home button.
about.calendar.display	false	Shows a "Schedule a call" pill on About.
about.calendar.link	"https://cal.com/umutxyp"	Where that pill links to.
about.intro.display / .title	true / "Hello!"	The intro section and its heading.
about.work.display / .title	true / "Work Experience"	The experience section.
about.studies.display / .title	true / "Studies"	The studies section.
about.technical.display / .title	true / "Technical focus"	The skills section.
about.tableOfContent.display / .subItems	true / false	Settings for the TableOfContents component in src/components/about/. The About page does not render that component at the moment, so these have no visible effect.
work.title / .description	`Projects - ${name}` / author's text	Heading and metadata of /work.
gallery.title / .description	`Product gallery - ${name}` / author's text	Metadata of /gallery.
blog.title / .description	author's text	Used by the RSS feed.

---

once-ui.config.ts

routes

Which pages exist. A page whose value is false, or whose path is not listed, shows the 404 page. Paths under /work and /blog follow the value of /work and /blog.

Path	Default
/	true
/about	true
/work	true
/blog	false
/gallery	true
/github	true

Turning a route off also removes its button from the header and its entry from sitemap.xml. Case study URLs (/work/<slug>) stay in the sitemap even when /work is off.

The header has a button only for these six paths. A new route you add here works, but gets no header button until you add one in src/components/Header.tsx.

Note: The repository has no blog pages, so leave /blog set to false unless you add them yourself.

display

Key	Default	What it does
themeSwitcher	true	Shows the light/dark toggle in the header.
location	false	Defined in the type; the header in this repository does not read it.
time	false	Defined in the type; the header in this repository does not read it.

protectedRoutes

Default: {} (nothing protected). To protect a page, add its exact path:

const protectedRoutes: ProtectedRoutesConfig = {
  "/about": true,
};

The match is exact: protecting /work does not protect /work/my-project. You also need PAGE_ACCESS_PASSWORD. (The comment above protectedRoutes mentions a .env.example file; the repository does not contain one, so use the example in Environment variables.) How it works is explained on Pages and Features.

fonts

All four use next/font/google:

Key	Font	CSS variable
heading	Geist	--font-heading
body	Geist	--font-body
label	Geist	--font-label
code	Geist Mono	--font-code

style

Key	Default	Allowed values (from the code comments)
theme	"system"	dark, light, system. Note: the start-up script in layout.tsx does not read this value; see Pages and Features.
neutral	"gray"	sand, gray, slate, custom
brand	"cyan"	blue, indigo, violet, magenta, pink, red, orange, yellow, moss, green, emerald, aqua, cyan, custom
accent	"red"	same list as brand
solid	"contrast"	color, contrast
solidStyle	"flat"	flat, plastic
border	"playful"	rounded, playful, conservative
surface	"translucent"	filled, translucent
transition	"all"	all, micro, macro
scaling	"100"	90, 95, 100, 105, 110

For custom colours, define the --scheme-* variables in src/resources/custom.css. The file contains a commented example and points to once-ui.com/customize for generating them.

dataStyle

Settings for Once UI charts. The pages in this repository do not draw charts, so you only need these if you add some.

Key	Default	Allowed values
variant	"gradient"	flat, gradient, outline
mode	"categorical"	categorical, divergent, sequential
height	24	number
axis.stroke	"var(--neutral-alpha-weak)"	CSS colour
tick.fill / .fontSize / .line	"var(--neutral-on-background-weak)" / 11 / false

effects

The page background. Each group can be switched on with display.

Group	Default	Settings
mask	cursor: false, x: 50, y: 0, radius: 100	Where the background fades out; cursor: true makes it follow the mouse
gradient	display: false, opacity: 100, x: 50, y: 60, width: 100, height: 50, tilt: 0, colorStart: "accent-background-strong", colorEnd: "page-background"	A large colour glow
dots	display: true, opacity: 40, size: "2", color: "brand-background-strong"	The dot pattern you see by default
grid	display: false, opacity: 100, color: "neutral-alpha-medium", width: "0.25rem", height: "0.25rem"	A square grid
lines	display: false, opacity: 100, color: "neutral-alpha-weak", size: "16", thickness: 1, angle: 45	Diagonal lines

mailchimp

Key	Default	What it does
action	""	The form's action URL from your Mailchimp embed code.
effects	its own mask, gradient, dots, grid, lines	Background of the newsletter block (same shape as effects).

Note: src/components/Mailchimp.tsx also contains hidden fields copied from a Mailchimp embed form (a group checkbox and a b_..._... field). If you use your own list, copy the matching fields from your own embed code.

schema, sameAs and socialSharing

• schema (logo, type "Person", name, description, email) and sameAs (social profile URLs) are exported but no page reads them at the moment. Page schema is built directly in each page with person and baseURL.
• socialSharing (display: true; X, LinkedIn, email and copy-link on; Facebook, Pinterest, WhatsApp, Reddit and Telegram off) is read only by src/components/blog/ShareSection.tsx, which no page renders in this repository.

---

next.config.mjs

Option	Value	Why
pageExtensions	ts, tsx, md, mdx	MDX files can be pages
transpilePackages	next-mdx-remote
serverExternalPackages	@sparticuz/chromium, puppeteer-core	Chromium is loaded from disk at runtime
outputFileTracingIncludes	/screenshots/* → Chromium binaries and src/app/work/projects/**	So the screenshot function has what it needs when deployed
staticPageGenerationTimeout	180 (seconds)	Each screenshot is captured during the build; a slow site needs more than 60 seconds
images.remotePatterns	https://www.google.com/**	The only outside host next/image may load from. Add your own hosts here.
redirects()	/work/code-share-marketplace → /work/codeshare-technology (permanent)	An old link of the author's. Safe to remove in your copy.
sassOptions	compiler: "modern", silenceDeprecations: ["legacy-js-api"]

---

Values set in code

A few values are not in a config file. Change them in the file listed if you need to.

Value	Default	File
Live numbers source	https://codeshare.me	src/lib/live-stats.ts (SOURCE, SOURCES, FALLBACK)
Live numbers refresh	604800 s (7 days)	src/lib/live-stats.ts
Screenshot refresh	604800 s (7 days)	src/app/screenshots/[slug]/route.ts
Screenshot size	1600 × 1000 at 1.25× (2000 × 1250), JPEG quality 80, dark colour scheme	src/app/screenshots/[slug]/route.ts
Screenshot page timeout	25 s to load, function maxDuration 60 s	src/app/screenshots/[slug]/route.ts
GitHub data cache	3600 s (1 hour)	src/app/github/page.tsx
Footer text	© <year> umutxyp, linking to https://github.com/umutxyp	src/components/Footer.tsx
Favicon	/images/avatar.jpg (plus src/app/favicon.ico)	src/app/layout.tsx
Password cookie	authToken, 1 hour, httpOnly, sameSite: strict	src/app/api/authenticate/route.ts

---

biome.json

Setting	Value
Indentation	2 spaces
Line width	100
Quotes (JS/TS)	double
Linter	on, recommended rules
VCS integration	off

Run npm run biome-write to format the whole project.