Skip to content

My portfolio. Full-stack website built with NextJS as a backend framework and React and TailwindCSS for frontend primarily. GitHub GraphGL API integrated. Deployed on Vercel.

Notifications You must be signed in to change notification settings

mladenovic-13/personal-portfolio

Repository files navigation

Personal Portfolio

This project is my portfolio web application, where you can see all my projects and blog articles in Serbian.

Screenshot 2022-09-08 at 16.23.39 Large.jpeg

Built with:

  • Next.js
  • React
  • TypeScript
  • TailwindCSS
  • Headless UI
  • React Query
  • GitHub GraphGL API (Octokit)
  • Markdown It

GitHub GraphGL API

Because the place where I put all my work and project is GitHub, I don't want to add content on both my portfolio website and GitHub manually. I came to the idea that I could use GitHub as a data source for my portfolio. Maybe it's not the best, but it seems practical to me. So, I found Octokit on StackOverflow.

I define API endpoints in my Next.js project that collect data from GitHub and returns object fulfilled with desirable data. To this point, I was not too fond of GraphGL, but after a while, I fell in love with it.

I fetched only pinned repository data on the index page with React Query (also used to cash data).

Screenshot 2022-09-09 at 20.06.02 Large.jpeg

For Project page purposes, I implemented a hook that fetches all repositories with React Query.

Screenshot 2022-09-09 at 20.07.00 Large.jpeg

Markdown to HTML

Like with GitHub, I didn't want to copy or paste my articles from one place to another. Because I write my articles in Craft (MacOS note-taking application with a feature to export markdown files), I found it interesting to write code that will collect all my markdown files and make a blog with them.

NPM packages that allow me to do that are 'Markdown It, 'Grey Matter,' and, of course, 'fs' for converting files to a simple string.

Screenshot 2022-09-09 at 20.08.01 Large.jpeg

About

My portfolio. Full-stack website built with NextJS as a backend framework and React and TailwindCSS for frontend primarily. GitHub GraphGL API integrated. Deployed on Vercel.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published