CV Playground

Overview

This is a work-in-progress project where I am building a personal page that showcases my bio and other important details. The page will feature an intuitive drag-and-drop interface that allows me to edit and rearrange content seamlessly. I'm using Pocketbase as the backend to manage data efficiently, and I’ve implemented Next.js for authentication and routing. The project is built with TypeScript for type safety and Tailwind CSS for responsive, utility-first styling.

Components

In this project, I've created several reusable components that enhance my UI. Each component comes with its own documentation to help me remember how to use them effectively.

Here’s a quick reference:

• Button - A customizable button component that I can style and use throughout my app.
• DateRange - A component that formats and displays a date range.
• DndNestList - A component that allows me to implement a drag-and-drop interface for reordering an items list.
• Input - A flexible input field component that can handle various input types and validations.
• LinkC - A reusable and flexible link component that handles internal, external, mailto:, and tel: links.
• Positioner - A handy component for positioning elements in different corners of the viewport, making my layout more dynamic.
• Print - For printing specific parts of a webpage without the clutter of headers or footers, uses react-to-print library
• Spinner - A simple, customizable loading indicator that can be used independently or as part of other components.

Future Plans

As I continue to develop this project, I plan to add more features, including:

• Profile Editing: A user-friendly interface for editing my bio and other personal details.
• Real-time Updates: Leveraging Pocketbase for live updates and changes without needing to refresh the page.
• Additional Components: Expanding my library of reusable components to streamline the development process.
• Responsive Design: Ensuring that the page looks great on all devices by fully utilizing Tailwind CSS.

This project serves as both a personal portfolio and a playground for me to experiment with new technologies and design patterns.