/jun-brro-blog

Technical & Buisness Blog of junbrro

Primary LanguageJavaScriptMIT LicenseMIT

jun-brro-blog README

Project Overview

jun-brro-blog is a blog website built with Next.js and Tailwind CSS. It is designed for personal blogging and project showcases, providing a clean design and user-friendly interface.

template used https://github.com/codebucks27/Nextjs-tailwindcss-blog-template?tab=readme-ov-file

Key Features

  • View and Sort Post Views: Track the number of views for each post and sort posts based on view count.
  • Markdown-Based Content Management: Write and manage blog posts and project descriptions in Markdown.
  • SEO Optimization: Includes meta tags and structured data for SEO optimization.
  • Responsive Design: Ensures optimal user experience across various devices.

Tech Stack and Libraries Used

Framework

  • Next.js: A React framework supporting server-side rendering (SSR) and static site generation for SEO optimization and fast page loads.

Styling

  • Tailwind CSS: A utility-first CSS framework for fast and efficient styling, enabling easy implementation of responsive design and customization.

Database

  • Supabase: An open-source backend service based on PostgreSQL, used for user authentication, real-time database, and storage features.

Libraries and Tools

  • @contentlayer/core: Manages and processes static content, reading Markdown files and generating pages.
  • next-seo: A plugin for SEO optimization in Next.js, managing meta tags and structured data.
  • react-icons: Provides various icons as React components, enhancing UI richness.
  • remark: Converts Markdown files to HTML, rendering blog posts and project descriptions written in Markdown.
  • axios: An HTTP client for managing API requests and data communication.
  • classnames: Utility for conditionally combining class names, simplifying dynamic class management with Tailwind CSS.
  • date-fns: A library for date and time processing, facilitating easy date formatting, parsing, and calculations.
  • framer-motion: A React animation library, enabling interactive animations and motion effects.
  • gray-matter: Parses Front Matter in Markdown files, extracting metadata for managing blog and project content.

Contribution Guidelines

  1. Fork the repository
  2. Create a new branch 
    git checkout -b feature/new-feature
  3. Commit your changes 
    git commit -m 'Add new feature'
  4. Push the branch 
    git push origin feature/new-feature
  5. Create a Pull Request

License

This project is distributed under the MIT License. For more details, refer to the LICENSE file.

Contact

For questions or suggestions regarding the project, please contact avdktlels@gmail.com.