Modern founder-style personal portfolio for Mus'ab Kamaldinov, also known as zetfri.

Built with:

• Next.js App Router
• TypeScript
• Tailwind CSS
• Framer Motion
• next-intl
• Hygraph CMS
• GraphQL
• Hygraph Rich Text Renderer

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000/en.

The default language is English. The proxy redirects / to /en, and every route is available in English and Russian:

• /en and /ru
• /en/about and /ru/about
• /en/projects and /ru/projects
• /en/projects/[slug] and /ru/projects/[slug]
• /en/blog and /ru/blog
• /en/blog/[slug] and /ru/blog/[slug]
• /en/services and /ru/services
• /en/contact and /ru/contact

Copy the example file:

cp .env.local.example .env.local

Then add your Hygraph values:

HYGRAPH_ENDPOINT=
HYGRAPH_TOKEN=
MONGODB_URI=
MONGODB_DB_NAME=zetfri
TELEGRAM_BOT_TOKEN=
TELEGRAM_CHAT_ID=

HYGRAPH_TOKEN is optional if your Hygraph API is public. MONGODB_URI and MONGODB_DB_NAME power the blog and project view counters. TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID power the /contact form through Telegram Bot API.

View counters are stored in the viewCounters collection with this shape:

{
  id: string;
  blogId: string;
  counter: number;
  users: {
    id: string;
    userId: string;
  }[];
}

Create these models in Hygraph:

• titleEn: Single line text
• titleRu: Single line text
• slug: Slug
• excerptEn: Multi-line text
• excerptRu: Multi-line text
• coverImage: Asset
• category: Reference to Category
• tags: Multiple references to Tag
• author: Reference to Author
• contentEn: Rich Text
• contentRu: Rich Text
• publishedAt: Date
• readingTime: Number
• featured: Boolean
• seoTitleEn: Single line text
• seoTitleRu: Single line text
• seoDescriptionEn: Multi-line text
• seoDescriptionRu: Multi-line text
• status: Enumeration

Status values:

• Draft
• Published
• Archived

• name
• slug
• description
• color

• name
• slug

• name
• role
• bio
• avatar
• email
• telegram
• instagram
• github

The blog loader is prepared for multilingual Hygraph posts. English routes use *En fields, Russian routes use *Ru fields, and missing localized content falls back to the other language.

Local portfolio content lives in:

• data/portfolio.ts
• data/projects.ts
• data/services.ts
• data/skills.ts
• data/mock-blog-posts.ts

Hygraph blog queries live in:

• lib/queries.ts
• lib/hygraph.ts

The blog uses Hygraph first. If Hygraph is not configured, unavailable, or has no published posts yet, it falls back to the local mock posts in data/mock-blog-posts.ts.

UI translations live in:

• messages/en.json
• messages/ru.json

Locale routing lives in:

• i18n/routing.ts
• i18n/request.ts
• i18n/navigation.ts
• proxy.ts

When adding visible text, put it in the matching translation namespace instead of hardcoding it in a component. Project data, service data, skill groups, and mock blog posts use localized fields in the data files, then helper functions return the right language for the current route.

To edit project translations, update data/projects.ts. To edit the mock blog post translations, update data/mock-blog-posts.ts.

npm run dev
npm run build
npm run start
npm run typecheck

Deploy on Vercel and add the same environment variables in the Vercel project settings.