Maggieappleton.com V2
Now retired. My previous digital garden built with Next.js, React, and MDX. Featuring loosely opinionated notes, half-formed ideas, and content that is always growing.
Overview:
Maggie's Digital Garden is an open-source project showcasing growing notes, essays, and design patterns. Visitors are encouraged to explore the codebase for inspiration but advised against copying it in its entirety due to its personalized design and structure. The project utilizes a stack consisting of Next.js, React, MDX, and various other tools to create a unique and functional digital garden experience.
Features:
- Open Source: Codebase available for exploration and inspiration.
- Custom Design: Personalized aesthetic preferences and functional design choices.
- Tool Integration: Utilizes a stack including Next.js, React, MDX, and other tools.
- Global Styles: Features a design system with global variables and components for consistency.
- Typography: Font choices include Canela Deck for headings, Canela Text for body, and Lato for UI components.
- Layout Elements: Pre-built components like <TwoColumn />, <ThreeColumn /> for easy layout structuring.
- Image Handling: Specialized image components like <Img />, <BasicImage /> for optimized visual content display.
- Fluid Typography: Type set on a fluid scale using calculations from the Utopia system.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- 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
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Headless UI
Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.
- Digital Garden
A digital garden is a personal, evolving website that shares interconnected ideas and projects.
- 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.
- Google Analytics
A website that uses Google Analytics to track website performance and user behavior. This includes features such as website traffic monitoring, conversion tracking, and audience segmentation to gain insights and optimize website performance.
