Portfolio Site

Table Of Contents


My portfolio site is a static site generated using Next.Js and Markdown files for content.

This is not the first portfolio site I have built. But this one I am the most proud of. My original site was a WordPress site. It was always a pain to make updates or add new content.

With my my new site I decided I wanted something really simple and straight forward. That is why I went with Next.Js and Markdown.

The homepage is a just a normal page with a canvas as the background. I used Babylon.Js to create the animation and CSS to use it as the background.


All content for the site is stored in Markdown files. I use the package gray-matter to parse the front matter from the Markdown files. I also use bits of JSON in the files to create things like image galleries, buttons, and video embeds.

The homepage 3D scene is something that I spent a bit of time on. I created the textures for the models and animated them. I used different trigonometric functions to create the animations of the models and the camera. To create the particles I used a Babylon.Js particle system with a custom config for the particles.

The rest of my site uses components from my react component library.

Full List Of Technology Used
  • Next.Js
    • Used to build and export the whole site.
  • Markdown
    • All the content for the site is written in Markdown files and converted into HTML through Next.Js.
    • I use the package gray-matter to parse front matter from the markdown files.
    • The markdown files have bits of JSON which I use to create elements like image galleries, buttons, and video embeds.
  • Babylon.Js
    • I used it to create the 3D animation on the homepage.
    • I used the glow layer to create the glowing effect on the models.
  • React
    • All components expect react-markdown were made by me.
    • On top of components specific to the site I used a React component library I wrote.


The design of the site is minimalist, modern, and sleek. I wanted it to be a simple yet enjoyable experience. Like a Zen garden filled with beautiful art.

I went with a bluish-cyan because I feel it is a very "techy" color and shows off my temperate. Which is always chill and calm.

But simply my design philosophy is this: S.E.E. Which stands for Simple, Elegant, and Effective. You can kind of talk about it but you must see and feel it to believe it.

View Story Book Of Components