I4o.dev.remix

screenshot of I4o.dev.remix
react
vite
tailwind

I4o.dev.remix

Personal blog and portfolio

Overview

The i4o.devFramework is a web development framework that provides various features such as RemixComponents, Catalyst UIStyling, and TailwindCSS for easy and efficient web development. It also offers Railway for seamless deployment and allows users to run the project locally. The framework includes features like adding pages, importing blog posts from Ghost, displaying now playing from Spotify, detecting reading time, showing reading progress, generating a sitemap, and supporting article series. It aims to provide a user-friendly and customizable environment for developers to create modern and responsive websites.

Features

  • RemixComponents: A collection of components for Remix, a web framework for building JavaScript applications, to streamline the development process.
  • Catalyst UIStyling: A UI styling solution that offers pre-designed and customizable components for creating visually appealing user interfaces.
  • TailwindCSS: A utility-first CSS framework that allows developers to rapidly build modern interfaces by providing a range of ready-to-use CSS classes.
  • Railway Deployment: Simplifies the deployment process by providing a platform for hosting and deploying web applications.
  • Run Locally: Enables users to run the project locally, allowing for testing and development without the need for an internet connection.
  • Add Various Pages: Allows users to easily add different types of pages such as about, projects, blog, and resume pages to their website.
  • Import Blog Posts from Ghost: Facilitates the importing of blog posts from Ghost, a popular content management system, to the i4o.devFramework.
  • Reading Time and Progress: Automatically detects the reading time of blog posts and displays it in the post list and post pages. It also shows reading progress to enhance the user experience.
  • Sitemap Generation: Generates a sitemap for the website, making it easier for search engines to index the site's pages.
  • SEO Optimization: Provides built-in SEO features to improve the website's visibility and ranking on search engine results pages.
  • Support for Article Series: Allows users to create and organize article series, providing a better reading experience and navigation for visitors.
  • Search Functionality: Enables visitors to search for specific content within the website, enhancing usability and user engagement.
  • Icon Display for Blog Posts: Displays icons on the blog post list page that represent the language or framework discussed in the respective post.
  • Newsletter Integration: Enables the integration of a newsletter signup feature using MDX, allowing users to collect and manage subscribers effectively.
  • License: Provides a clear and permissive license for using the code, encouraging developers to utilize the framework while respecting the author's rights.

Installation

To install the i4o.devFramework, follow these steps:

  1. Clone the project:

    git clone <project-url>
    
  2. Add the required pages:

    • About page:
      • [x] Add about page
    • Projects page using Remix pages:
      • [x] Add projects page
    • Home page update:
      • [x] Update home page
    • Blog and blog post pages:
      • [x] Add blog and blog post page
    • Import blog posts from Ghost:
      • [x] Import blog posts from Ghost
      • [x] Format all the imported blog posts properly
  3. Implement additional features:

    • Display now playing from Spotify
      • [x] Display now playing from Spotify
    • RSS functionality
      • [x] RSS
    • Reading time and progress
      • [x] Detect reading time and show in post list and post page
      • [x] Show reading progress
    • Sitemap generation
      • [ ] Sitemap
    • SEO optimization
      • [ ] SEO stuff
    • Support for article series
      • [ ] Support article series
    • Search functionality
      • [ ] Search
    • Add resume page
      • [ ] Add resume page
    • Icon display for blog post list page
      • [ ] Show icons in blog post list page for the language/framework the post is talking about.
    • Newsletter integration
      • [ ] Newsletter in MDX
  4. License notice:

    • Include the license notice inspired by leerob's license:
      • You are free to use this code as inspiration or use it directly.
      • Any and all content (blog posts, personal info, page copy, images, etc) are the property of the author and must not be copied or derived to form other content.
      • Crediting the author is appreciated but not required.
      • No confusing license. Be kind and help others learn.

Summary

The i4o.devFramework offers a comprehensive solution for web development, providing features such as RemixComponents, Catalyst UIStyling, and TailwindCSS. It allows easy installation and local project execution while offering functionalities like adding different pages, importing blog posts, displaying now playing from Spotify, generating a sitemap, and supporting article series. Additionally, features like reading time detection, reading progress display, and SEO optimization enhance the user experience and website visibility. The framework also includes plans for search functionality, resume page addition, and newsletter integration. With a clear and permissive license, the i4o.devFramework encourages developers to leverage its capabilities while respecting the author's rights.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

blog
Blog

Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

mdx
MDX

MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.