Skip to content

Customization

Jump to bottom
umutxyp edited this page Oct 17, 2026 · 1 revision

Make It Yours

The repository is Umut Bayraktar's live portfolio, so it arrives full of his details. This page walks you through replacing them with yours, in the order that makes sense. Keep npm run dev running while you work; the browser updates as you save.

Make it yours in four steps

1. Set your domain

In src/resources/site-data.tsx:

meta: {
  baseURL: "https://your-domain.com",
  // ...
},

Use the address your site will have, without a trailing slash. It is used for metadata, sitemap.xml, robots.txt, the RSS feed and for loading your avatar into generated share images. If you do not know it yet (for example before your first Vercel deploy), come back and change it later.

2. Tell it who you are

Still in site-data.tsx, edit the person block:

person: {
  firstName: "Ada",
  lastName: "Example",
  name: "Ada Example",
  role: "Frontend Developer",
  avatar: "/images/avatar.jpg",
  email: "you@example.com",
  timezone: "Etc/UTC",
  languages: ["English"],
  biography: "One or two sentences about you. Used as the meta description of Home and About.",
  // phone, website and address are not shown anywhere at the moment
},

Then replace the picture:

  1. Save your photo or logo as public/images/avatar.jpg (square works best; the example is 400 × 400).
  2. The same file is also the browser tab icon and the Apple touch icon (src/app/layout.tsx). There is also a src/app/favicon.ico; replace it too if you want a different icon.

3. Write your Home page

hero: {
  headline: "Frontend Developer building calm, fast interfaces",
  subline: "I design and build web apps with **React** and **Next.js**.",
  // ...
},
  • **bold** in the subline becomes bold text.
  • The example subline contains tokens such as %beatra.users%. These pull the author's product numbers from codeshare.me. Remove them from your text, or set up your own source (see Live numbers).
  • hero.featured is a small badge above the headline. Turn it on with home.featured.display: true in src/resources/content.tsx.

4. Add your social links

social: [
  { name: "GitHub", icon: "github", link: "https://github.com/your-name" },
  { name: "LinkedIn", icon: "linkedin", link: "https://linkedin.com/in/your-name" },
  { name: "Email", icon: "email", link: "mailto:you@example.com" },
],

They appear as buttons on About and as icons in the footer. icon must be one of the keys in src/resources/icons.ts (the list is on Configuration). To add a new icon, import it from react-icons in that file and add it to iconLibrary:

import { FaDribbble } from "react-icons/fa6";

export const iconLibrary: Record<string, IconType> = {
  // ...existing icons
  dribbble: FaDribbble,
};

5. Fill in the About page

In site-data.tsx, under about:

Key What to put there
introDescription A paragraph about you
experiences Jobs or projects: company, timeframe, role, achievements (a list of sentences)
studies Schools or courses: name, description
technical Skill groups: title, description, tags (each with a name)

To hide a section, or rename its heading, edit about in src/resources/content.tsx:

studies: {
  display: false,       // hide the section
  title: "Education",   // or rename it
  // ...
},

The "Schedule a call" pill is off by default. To use it, set about.calendar.display: true and put your booking link in about.calendar.link (also in content.tsx).

6. Add your projects

Delete the example projects you do not need and add your own. This has its own page: Adding Projects.

7. Choose your gallery images

gallery in site-data.tsx is a list of image paths:

gallery: [
  "/images/gallery/one.jpg",
  "/images/gallery/two.jpg",
  "/screenshots/my-project",
],
  • Put your own files in public/images/gallery/ (any folder under public/ works).
  • /screenshots/<slug> shows the live screenshot of one of your projects.
  • Images from another website need that host in images.remotePatterns in next.config.mjs.

To drop the gallery entirely, set "/gallery": false in routes.

8. Point the GitHub page at your account

github: {
  username: "your-github-name",
  highlight: ["best-repo", "second-best-repo"],
  description: "Things I have built and shared.",
},

Pinned repositories are read from your GitHub profile, so pin your best work there. highlight is only used if that fails.

9. Pick which pages exist

In src/resources/once-ui.config.ts:

const routes: RoutesConfig = {
  "/": true,
  "/about": true,
  "/work": true,
  "/blog": false,
  "/gallery": true,
  "/github": true,
};

false removes the page, its header button and its sitemap entry (case study URLs stay in the sitemap even when /work is off). The header only has buttons for these six paths, so a new route needs its own button in src/components/Header.tsx.

10. Change the look

Also in once-ui.config.ts:

const style: StyleConfig = {
  theme: "system",
  neutral: "gray",
  brand: "cyan",
  accent: "red",
  solid: "contrast",
  solidStyle: "flat",
  border: "playful",
  surface: "translucent",
  transition: "all",
  scaling: "100",
};
  • Colours: change brand, accent and neutral. For your own colour scale, use custom and define the variables in src/resources/custom.css (it contains a commented example, generated at once-ui.com/customize).
  • Corners: border is rounded, playful or conservative.
  • Size: scaling from 90 to 110.
  • Background: in effects, the dots are on by default. Try gradient.display: true or grid.display: true.
  • Fonts: swap Geist / Geist_Mono for any other font from next/font/google where the fonts are imported in that file (after protectedRoutes).

All the allowed values are listed on Configuration.

11. Update the footer

The footer text is written directly in src/components/Footer.tsx:

© {currentYear}{" "}
<a href="https://github.com/umutxyp" style={{ color: "inherit" }}>
  umutxyp
</a>

Change the link and the name to yours. The social icons next to it come from social.

12. Optional extras

  • Newsletter: set newsletter.display: true, put your Mailchimp form URL in mailchimp.action (once-ui.config.ts), and copy the hidden fields from your own Mailchimp embed code into src/components/Mailchimp.tsx.
  • Share image for Home: add public/images/og/home.jpg. content.tsx points to that path, but the file is not in the repository.
  • Password pages: see Pages and Features.

Checklist: the author's details to replace

Before you publish, search the project for umutxyp, Umut and codeshare and check each hit. The places you will find are:

File What to change
src/resources/site-data.tsx Everything (domain, person, hero, social, about, gallery, GitHub)
src/resources/content.tsx about.calendar.link, page descriptions that mention the author's products
src/resources/once-ui.config.ts sameAs links (not shown on pages, but keep them correct)
src/app/work/projects/*.mdx The example projects
public/images/ avatar.jpg and the project covers
src/components/Footer.tsx Name and link
src/lib/live-stats.ts The codeshare.me source and its User-Agent text, if you use live numbers
next.config.mjs The /work/code-share-marketplace redirect
.env The committed PAGE_ACCESS_PASSWORD. Set your own in .env.local (or on your host) instead
package.json The package name (umutxyp-portfolio); run npm install afterwards so package-lock.json matches
README.md The author's description, links and contact details
SECURITY.md, .github/CODEOWNERS The author's repository link and GitHub user for security reports and reviews
LICENSE Keep the original notice; you may add your own copyright line for your changes

Personal Website by Umut Bayraktar · MIT License · Codeshare

Personal Website

Start

Reference

Go live

Community

Source code · Live site

Clone this wiki locally