Web Remix Stitches
M Haidar Hanif's personal website with React, Remix, Stitches, Radix UI, and deployed to Vercel.
Overview
M Haidar Hanif's personal website is built using React, Remix, Stitches, and Radix UI. It has been deployed to Vercel and can be found on GitHub under the repository named mhaidarhanif-web. This website has gone through multiple rebuilds and utilizes various technologies such as React Router, Framer Motion, Splitbee, and Cloudflare DNS.
Features
- React-based personal website
- Built with Remix, Stitches, and Radix UI
- Deployed to Vercel
- Utilizes React Router for routing
- Styling is done using Stitches and Radix Colors
- Includes animations powered by Framer Motion
- Integrates with Splitbee for analytics tracking
- Uses Cloudflare DNS for domain management
Summary
M Haidar Hanif's personal website is built using React and various other technologies such as Remix, Stitches, Radix UI, React Router, Framer Motion, Splitbee, and Cloudflare DNS. The website has gone through multiple rebuilds and is deployed on Vercel. The installation process involves installing dependencies, starting the Remix development server, and accessing the app through http://localhost:3000. Alternatively, you can use Vercel CLI commands for local development and deployment.
- 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
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Personal
A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.
- 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.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- 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.