Portfolio
A Next.js & Material UI portfolio that stylizes markdown files from the GitHub API and Contentful CMS.
Overview
The author completed the final prototype of a weather app and decided to build a new portfolio using NextJS 9.3. They discuss their thought process in choosing between Material UI and Tailwind CSS as the CSS framework for their portfolio. They ultimately decided to stick with Material UI due to their familiarity with it and the access to source code examples. The author also talks about the inspiration behind the overall design of their portfolio.
Features
- Ability to opt-in for Static Site Generation on a page-by-page basis using NextJS 9.3.
- Choice between Material UI and Tailwind CSS as the CSS framework.
- Access to source code examples in Material UI for implementing different components.
- Improved understanding of CSS attributes and how to use them.
- Inspiration-driven design for the portfolio.
Summary
The author discusses their decision-making process in choosing between Material UI and Tailwind CSS for their portfolio. They ultimately chose Material UI due to their familiarity with it and the access to source code examples, which helped them gain a better understanding of CSS attributes and usage. The author also talks about the inspiration that drove the overall design of their portfolio.
- 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
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Contentful
Contentful is a headless content management system (CMS) that provides a flexible and scalable platform for creating, managing, and delivering digital content across multiple channels and devices.
- 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.
- 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.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Prism JS
PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.
- Vercel
Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.