Personal site

💥 Introduction

Being a frontend developer, I realized the importance of having my own digital footprint. So, I decided to create my own website. This site serves a dual purpose - it's a platform where I can display my work, and also a space for me to express my thoughts through blog posts.

🚀 Features

• Block-style editor: allows to create articles composed of different types of content blocks. These blocks can include titles, paragraphs, Markdown-formatted text, iframes for embedding content, code snippets, and images. This feature gives flexibility in structuring articles by combining these various block types to create engaging and diverse content.
• Tag filtering: Using tags, users can explore content based on particular topics, themes, or categories. Each diary is associated with one or more tags that reflect its subject matter.
• Cloud Firestore Integration: Firebase's seamless integration simplifies data storage and synchronization, ensuring real-time updates across devices and platforms.
• grommet framework: provides a set of UI components designed for accessibility, modularity, and responsiveness. Its theming capabilities ensure a consistent and visually appealing user interface across the application.
• Animations: tilting diary card animation creates an interaction with the content previews. Parallax animation bring a dynamic, multi-layered effect to content as users scroll.

📜 Packages

• React - the library for web and native user interfaces
• Typescript - typesafety, enhances code quality, catches errors during development, and improves overall maintainability.
• Cloud Firestore/Firebase - flexible, scalable NoSQL cloud database, built on Google Cloud infrastructure, to store and sync data.
• Nanostores - a tiny (298 bytes) state manager with many atomic tree-shakable stores.
• grommet - a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
• Feature-Sliced Design - architectural methodology for frontend projects.
• GSAP - fancy high-performance animations that work in every major browser.
• React Hook Form - performant, flexible and extensible forms with easy-to-use validation.
• Loadable Components - a React code splitting library.
• Sass - powerful professional grade CSS extension language.
• React Router V6 - lightweight routing library.
• React Helmet - a document head manager.
• Yarn - an open-source package manager used to manage dependencies in JavaScript projects.
• Vite - a build tool that aims to provide a faster and leaner development experience for modern web projects.
• Vitest - a Vite-native testing framework.
• Node.js - a cross-platform, open-source JavaScript runtime environment.
• Prettier - a code formatter.

🛠️ Local development

To ensure that you are able to install everything properly, I would recommend you to have Yarn, React and Vite installed. Once everything is set up, run the commands:

• yarn to install dependencies,
• yarn develop to start local dev server,
• yarn test to run tests,
• yarn format to format and lint,

Also, you could check other scripts in package.json.

If you have any development ideas, feel free to create a pull request or message me.