My Portfolio 3.0 🎉

Check out my new portfolio! 1st attempt was using CSS and HTMl and less than a handful of lines of JavaScript. 2nd attempt was using more JavaScript to animate the page more and give it some cool effects. This third time I decided to build it using Next.js as it seems to be a very popular framework and some new tools to go along with it.

Motivation

Thought my portfolio could use a makeover and it seems like a pretty small project to begin using Next.js. I believe that with even this slight makeover, it can draw more attention to myself and better display my skills and progress through a nice and clean UI. This inspiration was taken from some portfolio examples from the Next.js website.

Main Technologies ⚡️

• Next.js
• Tailwind CSS
• Upstash
• Contentlayer

Project Dependencies

This section is more for my sake as I will be using new dependencies I have never worked with so I am detailing the use for each below:

Note: descriptions are directly from NPM website

• @next/font: includes a built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.
• @next/mdx: use MDX with Next.js
• @upstash/redis: is an HTTP/REST based Redis client built for typescript, built on top of Upstash REST API
• contentlayer: is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application's pages
• framer-motion: an open source motion library for React, made by Framer
• lucide-react: implementation of the lucide icon library for react applications
• markdown-wasm: very fast Markdown & HTML renderer implemented in WebAssembly
• next-contentlayer
• react-wrap-balancer: simple React component that makes titles more readable
• rehype-autolink-headings: rehype plugin to add links from headings back to themselves
• rehype-pretty-code: beautiful code blocks for your MD/MDX docs
• rehype-slug: rehype plugin to add ids to headings
• remark-gfm: remark plugin to support GFM (autolink, footnotes, strikethrough, tables, tasklists)

This is a Next.js project bootstrapped with create-next-app.

Running Locally

git clone https://github.com/kekedezha/dezhas-portfolio-2.0.git
cd chronark.com

Create a .env file similar to .env.example.

Then install dependencies and run the development server:

npm install
npm run dev

Cloning / Forking

Please remove all of my personal information (projects, images, etc.) before deploying your own version of this site.