How I built my portfolio using NextJS, Typescript, and Chakra UI

• vocalizer

  1 286 10.0 HTML

  A simple javascript plugin to show people how to say your name correctly.

For this sound i just used Vocalizer and downloaded my name's sound. Added it to webpack config to identify the file extension and location next.config.js

• countapi-js

  4 35 1.7 JavaScript

  Discontinued Wrapper for CountAPI using promises.

To achieve this, I use Google Analytics and countapi-js.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• gray-matter

  17 3,762 1.2 JavaScript

  Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert

gray-matter: Converts a string with front-matter to object.

• react-markdown

  48 12,167 7.2 JavaScript

  Markdown component for React

  

react-markdown: Markdown component for React using remark.

• TypeScript

  1,302 97,832 9.9 TypeScript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  

If you're building your projects with javascript, then you have to try typescript, Typescript will definitely help you documenting your code as you go, Also it forces you to use the right type so this will decrease the bugs and speed up your productivity while you're coding.

• react-syntax-highlighter

  14 3,840 1.5 JavaScript

  syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  

react-syntax-highlighter: Syntax highlighting component for React.

• Next.js

  2,039 120,313 10.0 JavaScript

  The React Framework

  

NextJS is one of the strongest framework to build a production project. I've used some features like SSG or pre-render pages at build time, API routes, file-system routing, fast refresh, configuration and deployments are super easy.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• react-hook-form

  210 39,505 8.9 TypeScript

  📋 React Hooks for form state management and validation (Web + React Native)

  

I used react-hook-form to create the form, Also created an api to handle the request

• leerob.io

  59 6,853 8.7 MDX

  ✨ My portfolio built with Next.js, Tailwind, and Vercel.

• chakra-ui

  344 36,514 9.0 MDX

  ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  

Here's the styling part, I use chakra-ui for creating reactjs components and styles without writing css. Also Chakra ui is handling the app color mode, and much more in the styling part. You can customize the theme, declaring the default values for the app you can check this folder for further information about this styles/theme.

Suggest a related project