umutxyp Personal Website

repository·main·Indexed 42 days ago

https://github.com/umutxyp/personal-website

A high-performance personal portfolio built with Next.js 16, Once UI, and TypeScript. Features include MDX support for project showcases, GitHub integration, password-protected routes, and custom API endpoints for Open Graph metadata fetching and image generation.

Tokens
9K
Snippets
29
Records
38
Agent score
56%

What's inside umutxyp personal website

  1. Overview of Sylon Discord Bot features

    main

    Sylon is an AI-powered Discord moderation suite designed to replace traditional regex-based word filters with AI models capable of detecting advertisements, invite links, and scams across multiple languages and within image content.

    Key features include:

    • Moderation suite: Ban, kick, mute, warn, and clear commands with case logging and per-role limits.
    • AI advertisement protection: Detects invites, ads, and scams in text and images.
    • Spam protection: Mitigates message floods, repeated content, and cross-channel image raids.
    • Ticket system: Provides HTML transcripts, office hours, satisfaction surveys, and case tracking.
    • Server guard: Anti-raid controls.
    • Leveling system: XP from message and voice activity with reward roles and custom rank cards.
    • Giveaways: Entry requirements, bonus entries, and winner rerolls.
    • Automation: Role menus, auto-roles, word filters, and welcome/goodbye automation with custom images.

    Configuration can be managed via Discord or a web dashboard, which provides live counters for blocked threats and moderation actions.

  2. Overview of the Creator Studio Automation pipeline

    main

    The Creator Studio Automation is a content pipeline designed to automate the transition from an idea to a scheduled post across multiple platforms (Instagram, YouTube, TikTok, and Discord). It is structured into three main stages:

    1. Ideas inbox: A bot collects prompts from Discord, X, and product user questions, tagging them by theme and priority.
    2. Script builder: A dashboard that pulls prompts, injects real code from active projects, and exports scene-by-scene scripts.
    3. Distribution: Scheduled jobs that publish content to YouTube Shorts, Instagram Reels, and TikTok, and handle email recaps.
  3. Understand the MCStat.org system architecture

    main

    To maintain responsiveness and prevent single points of failure, the MCStat.org runtime is decoupled into separate systemd services. This separation ensures that a failure or high load in one component does not impact the others.

    Core services include:

    • Website: Dedicated solely to serving web pages.
    • Ping Worker: A Node.js process responsible for continuously pinging thousands of servers on a specific schedule.
    • Discord Bot: Runs independently of the website and ping worker.
    • Maintenance: A task-based service that runs on a timer rather than remaining resident in memory.
  4. Install and run the portfolio locally

    main

    To set up the development environment, clone the repository, install the dependencies using npm, and start the development server. The site will be available at http://localhost:3000.

    # Clone the repository
    git clone https://github.com/umutxyp/Personal-Website.git
    
    # Navigate to project directory
    cd Personal-Website
    
    # Install dependencies
    npm install
    
    # Run development server
    npm run dev
  5. Add new projects via MDX

    main

    To add a new project to the showcase, create a new .mdx file in src/app/work/projects/. The project will automatically appear on the work page. Each file requires frontmatter for metadata.

    ---
    title: "Project Name"
    publishedAt: "2024-01-01"
    summary: "Short description"
    images: ["/images/projects/project.png"]
    team: []
    link: "https://project.com"
    ---
    
    Project content here...
  6. Use the MCStat-Plugin for advanced server telemetry

    main

    While MCStat.org pings servers externally to provide live player counts, server owners can install the MCStat-Plugin directly on their server to stream signed HTTPS telemetry. This plugin is compatible with Bukkit, proxy, and hybrid stacks and provides more granular data than external pinging alone.

    Telemetry provided by the plugin includes:

    • Player sessions
    • TPS (Ticks Per Second)
    • Vote links
    • Dashboard-ready analytics
  7. Protect routes with a password

    main

    You can protect specific pages (e.g., /about) by using an environment variable and configuring the protected routes in src/resources/once-ui.config.ts.

    1. Create a .env.local file and define PAGE_ACCESS_PASSWORD.
    2. Update once-ui.config.ts to include the desired routes in the protectedRoutes object.
    # .env.local
    PAGE_ACCESS_PASSWORD=your_password
    // src/resources/once-ui.config.ts
    const protectedRoutes = {
      "/about": true
    };
  8. Configure site data and GitHub integration

    main

    Update personal information, social links, work experience, and GitHub settings in src/resources/site-data.tsx.

    To control which GitHub repositories are highlighted on the /github page, update the github object within site-data.tsx.

    // src/resources/site-data.tsx
    github: {
      username: "umutxyp",
      highlight: ["Codeshare", "Beatra", "MusicBot"],
    }
  9. Customize UI theme and routes

    main

    The visual appearance and page availability are managed in src/resources/once-ui.config.ts.

    Theme Customization

    Modify colors (brand, accent, neutral), typography, border styles, and effects.

    Route Management

    Enable or disable specific pages by setting their route path to true or false in the routes object.

    // src/resources/once-ui.config.ts
    const routes = {
      "/": true,
      "/about": true,
      "/work": true,
      "/blog": false,
      "/gallery": true,
      "/github": true,
    };
  10. Integrate with JustDiscord via @justdiscord/sdk

    main

    Developers can integrate their Discord bots with the JustDiscord catalogue using the official @justdiscord/sdk. The SDK provides a TypeScript-based interface (zero dependencies, supporting ESM and CommonJS, compatible with Node 18+) to access real API features rather than just badges.

    Key capabilities include:

    • Vote checks: Verify if a specific user has voted within the last 12 hours.
    • Stat posting: Periodically push server counts and command lists to the platform.
    • Vote webhooks: Receive signed, verifiable callbacks when a user votes.
    // Note: The SDK is available via @justdiscord/sdk
    // It supports Node 18+, ESM, and CommonJS
  11. Configure the global OnceUI configuration

    main

    The OnceUIConfig type defines the top-level structure for the once-ui.config.js configuration file. This object controls the visual appearance, routing, SEO, social sharing, and third-party integrations (like Mailchimp) for the entire site.

    Key configuration sections include:

    • display: Controls UI element visibility (location, time, theme switcher, and language toggles).
    • routes & protectedRoutes: Maps route paths (e.g., '/about') to a boolean indicating if they are enabled or protected.
    • style: Defines the core design system tokens (theme, brand, accent, etc.).
    • effects: Configures visual overlays like cursor masks, gradients, dots, grids, and lines.
    • socialSharing: Manages visibility and platform support for social sharing buttons.
    • schema: Provides metadata for SEO and schema.org markup.
    export type OnceUIConfig = {
      display: DisplayConfig;
      mailchimp: MailchimpConfig;
      routes: RoutesConfig;
      protectedRoutes: ProtectedRoutesConfig;
      baseURL: string;
      fonts: FontsConfig;
      style: StyleConfig;
      schema: SchemaConfig;
      sameAs: SameAsConfig;
      socialSharing: SocialSharingConfig;
      effects: EffectsConfig;
      dataStyle: DataStyleConfig;
    };
  12. Configure routes and protected pages

    main

    Use the routes object to define which paths are active in the application. Use the protectedRoutes object to enable password protection on specific routes.

    Note: To enable password protection, you must set the password in your .env file as described in .env.example.

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