Cherrydub98

Cherrydub98 is a personal website themed around the classic Windows 98 aesthetic. It is built with modern web technologies to provide a nostalgic yet functional user experience.

Live Demo

Check out the live demo of the application here.

Features

• 98 Themed UI: Enjoy the retro Windows 98 interface.
• Draggable Windows: Move windows around the screen just like in the old days.
• PDF Preview: View PDF files directly within the site.
• Twitter Embed: Display Twitter timelines.

Installation

To set up the project locally, follow these steps:

Prerequisites

• Node.js
• npm (or yarn)

Installation Steps

1. Clone the repository:

   git clone https://github.com/chriscodingxyz/cherrydub98.git

2. Navigate to the project directory:

   cd cherrydub98

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

Usage

Once the development server is running, you can access the application at http://localhost:3000.

Folder Structure

• public: Static assets
• src: Source code
  • components: React components
  • pages: Application pages
  • styles: CSS styles
  • utils: Utility functions

Technologies Used

• React
• Vite
• Tailwind CSS
• react-pdf
• react-draggable
• 98.css
• win98icons
• crt-screen-effect
• react-twitter-embed

npm Packages Used

1. react-pdf

   • react-pdf
   • Adding PDF preview functionality. Easy to use by adding files in the public folder.

2. react-draggable

   • npm
   • Allows the creation of draggable window divs that users can move around. It provides ways to omit certain areas that will not allow dragging (via CSS class).

3. usehooks

   • usehooks
   • A great library of various useful hooks for React.

4. 98.css

   • 98.css
   • Utilized for most of the CSS on my themed site.

5. win98icons

   • win98icons
   • 98 styled icons used throughout this site.

6. crt-screen-effect

   • flicker
   • Oldschool CRT screen flicker effect.

7. react-twitter-embed

   • react-twitter-embed
   • Add Twitter timelines in React, not only certain tweets.

8. NFTPriceFloor

   • nft-price-floor-api
   • Amazing API for all your NFT needs! Have a look at their homepage for a great overview of what can be achieved with love and style!

More features to come...

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create your feature branch:

   git checkout -b feature/YourFeature

3. Commit your changes:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/YourFeature

5. Open a pull request.

License

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

Contact

Chris Coding - chriscodingxyz - [email protected]

Project Link: https://github.com/chriscodingxyz/cherrydub98