Skip to content

VortexDevX/custom-homepage

Repository files navigation

TabStart 🌿

A hyper-minimalist, customizable browser start page designed for focus, aesthetics, and speed.

Live Demo GitHub Repo Next.js Tailwind CSS

TabStart transforms your "New Tab" page into a serene, distraction-free environment. No news feeds, no trackers, just your aesthetic and your essential tools.


✨ Key Features

🕊️ Zen Mode

  • Hyper-Minimalist UI: Only an elegant clock and date (optional) inhabit your screen.
  • Dynamic Backgrounds: Seamless support for high-resolution images and Video Loops (MP4/WebM).
  • Persistent Storage: Uses IndexedDB to store your custom backgrounds locally, ensuring they load instantly even without an internet connection.

⌨️ Universal Shortcuts (Key Launcher)

  • Instant Navigation: Bind any key (e.g., G for Google, N for Netflix) to a URL for immediate access.
  • Global Listener: Works instantly from anywhere on the page without needing a search bar.
  • Smart Detection: Automatically disables shortcuts when you're interacting with input fields.

🎨 Premium Customization

  • Layout Engine: Position the clock exactly where you want it (Corners, Center, or Custom coordinates).
  • Refined Typography: Premium font choices including Inter, Roboto, and system-optimized sans-serifs.
  • Modern UI: A sleek, sidebar-driven settings hub with glassmorphism effects and smooth transitions.

⚡ Engineered for Speed

  • Next.js Dynamic Imports: Heavy settings components are lazy-loaded only when needed.
  • React.memo Optimization: Visual components are optimized to prevent unnecessary re-renders, keeping video backgrounds buttery smooth.
  • Turbo-Powered: Built on Next.js 16 with Turbopack for lightning-fast startup and interactions.

🛠️ Tech Stack


🚀 Getting Started

Prerequisites

  • Node.js (Latest LTS)
  • npm or pnpm

Installation

  1. Clone the Project

    git clone https://github.com/VortexDevX/custom-homepage.git
    cd custom-homepage
  2. Install Dependencies

    npm install
  3. Launch Locally

    npm run dev

Visit http://localhost:3000 and start customizing.


📖 Usage Tip

  • Open Settings: Hover your mouse over the bottom-right corner of the page to reveal the settings gear.
  • Pro Move: Set your most-used sites as keyboard shortcuts to navigate faster than ever.

📄 License

Distributed under the MIT License. See LICENSE for more information.


Built with ❤️ by VortexDevX

About

hyper-minimalist, customizable browser start page built with Next.js 16 and Tailwind CSS v4. Support for video backgrounds, custom keyboard shortcuts, and premium glassmorphism aesthetics. 🌿

Resources

License

Stars

Watchers

Forks

Contributors