Kyma Website

Website for the Kyma TUI tool. Built with React, TypeScript, and Framer Motion for smooth animations and interactive elements.

🛠️ Tech Stack

• Frontend: React 19, TypeScript
• Styling: Tailwind CSS 4.x with custom design system
• Animations: Framer Motion 12.x
• State Management: TanStack Query for server state
• Build Tool: Vite 6.x
• GitHub API: Octokit for fetching release data
• Fonts: Geist Sans & Geist Mono

Installation

1. Clone the repository

   git clone <repository-url>
   cd kyma-website

2. Install dependencies

   npm install
   # or
   pnpm install

3. Set up environment variables

   cp .env.example .env

   Add your GitHub token to .env:

   VITE_GITHUB_TOKEN=your_github_token_here

4. Start the development server

   npm run dev
   # or
   pnpm dev

5. Open your browser Navigate to http://localhost:5173

Environment Configuration

The website requires a GitHub token to fetch the latest Kyma release version:

1. Create a GitHub Personal Access Token with public_repo permissions
2. Add it to your .env file as VITE_GITHUB_TOKEN
3. The website will automatically display the latest release tag

Components

src/components/
├── ui/
│   ├── hero.tsx          # Main hero section
│   ├── typewriter-effect.tsx  # Animated typewriter component
│   └── button.tsx        # Reusable button component

Contributing

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Run the linter

   npm run lint

5. Commit your changes

   git commit -m 'Add some amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Open a Pull Request

Development Guidelines

• Follow the existing TypeScript and React patterns
• Use semantic commit messages
• Ensure all animations are performant and accessible
• Test responsive design across different screen sizes
• Maintain the terminal/CLI aesthetic in new features

Acknowledgements

• Framer Motion - For incredible animation capabilities
• Tailwind CSS - For the utility-first CSS framework
• Geist Font - For the beautiful typography
• Lucide React - For the clean, consistent icons
• shadcn/ui - For component design inspiration
• Aceternity - For the Typewriter Component