Site
Guillermo's portfolio and blog. Built with Next.js, Notion API and Chakra UI
Overview:
Guillermo de la Puente's Personal Site version 2 is a portfolio website that showcases his work and blog posts. It utilizes various technologies such as Next.js, Notion API, Chakra UI, and MDX to create a user-friendly and developer-friendly experience. The site also incorporates features like a contact form powered by FormBold and a dynamically generated RSS feed.
Features:
- Notion as CMS: Each blog post is a Notion page in a Notion database, and during build time, all pages are statically generated using the Notion API.
- NotionPageRenderer component: To render the blog posts, a NotionPageRenderer component is implemented, which allows for efficient parsing and rendering of Notion content.
- Markdown for content: The portfolio project descriptions use markdown, parsed to React using @next/mdx, making it easier to write and edit large chunks of copy.
- Contact Form powered by FormBold: The contact form backend is integrated with FormBold, providing a simple and easy-to-use solution for creating forms and handling form submissions.
- Dynamic RSS feed generation: The site generates an RSS feed in XML format, dynamically pulling the blog posts and including them in the feed. The feed is accessible at https://guillermodlpa.com/rss.xml.
Summary:
Guillermo de la Puente's Personal Site version 2 is a well-designed portfolio website that leverages Next.js, Notion API, and other technologies to create a seamless experience for both developers and users. The use of Notion as a CMS allows for easy management of blog posts, while markdown and FormBold simplify content creation and form integration. Additionally, the site implements dynamic RSS feed generation to keep users updated with the latest blog posts. Overall, this personal site showcases Guillermo's skills and expertise while providing a smooth user experience.
- 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
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- 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.
- 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 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.
- 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.