Utils

Utils is a collection of browser-based tools and utilities for common developer and everyday tasks.

Everything runs completely inside the browser. No files, text, or inputs are uploaded to a server, keeping your data entirely local and private.

Tools Included

Time and Date

• Digital Clock: Full-screen display synced with your system.
• Stopwatch: Precise timer with lap tracking.
• Timer: Countdown timer with preset and custom intervals.
• Pomodoro: Focus sessions with custom work and break intervals.
• Timezone Converter: Tools to convert and compare timezones.
• Date and Time Calculator: Add, subtract, or find the difference between dates.

Hardware and Device Tests

• Keyboard Tester: Check for key ghosting and rollover.
• Mouse Tester: Test mouse buttons and scroll behavior.
• Controller Tester: Real-time visual test for Xbox and PlayStation gamepads.
• Audio and Video Tests: Audio frequency sweeps, microphone waveforms, and webcam preview tests.
• Dead Pixel Checker: Full-screen diagnostic colors to find display issues.

File Utilities

• PDF Suite: Split, merge, compress, password protect, organize, and convert PDF files.
• Image Tools: Crop, resize, rotate, compress, convert formats, and view or strip EXIF metadata.
• Word Utilities: Convert Word to PDF, compress files, extract images, or merge documents.
• PowerPoint Utilities: Convert PowerPoint to PDF, compress presentations, merge files, or export slides as images.
• Other Utilities: Extract text from files, create or open ZIP archives, generate checksums (MD5, SHA), and verify file integrity.

Developer Tools

• JSON Utilities: Format, validate, and preview JSON files.
• Code Formatter: Format JavaScript, TypeScript, HTML, and CSS using Prettier.
• Regex Tester: Live regex matching and group extraction.
• ID and Hash Generators: Generate UUIDs, NanoIDs, secure hashes, and random values.
• Encoders and Decoders: Base64 and URL encoding or decoding.
• JWT Decoder: Parse and inspect JSON Web Tokens.

Frontend Helpers

• UI Visualizer: Preview typography and colors on dynamic layouts.
• Color Converter: Convert between HEX, RGB, and HSL values.
• CSS Generators: Visual generators for box shadows and gradients.
• Unit Converter: Convert between px, rem, em, vw, and vh.
• Image Color Picker: Extract color values directly from images.
• SVG Viewer: Preview and optimize SVG markup.

Text Tools

• Text Editor and Transformer: Count characters, change letter casing, clean up whitespace, and find and replace text.
• Placeholder Text: Lorem Ipsum generator.
• Local Notes: A simple notepad and a whiteboard canvas that persist data in local storage.
• Emoji and Unicode Picker: Copy emojis and special symbols.

Miscellaneous

• OS-style Homepage: A desktop-style launcher dashboard.
• Speed Test: Check download, upload, ping, and jitter.
• Calculator: Scientific calculator with trigonometric functions.
• Temperature Converter: Convert between Celsius, Fahrenheit, and Kelvin.

Tech Stack

• Framework: React and TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Router: React Router

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Setup

1. Clone the repository:

   git clone https://github.com/sam-sampreeth/portfolio-utils.git
   cd utils-page

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build for production:

   npm run build

License

Distributed under the MIT License. See the LICENSE file for details.