RoyAnger.com

royanger.com

The goal with my personal site was threefold:

• create a site that would function as a portfolio
• use modern, current technologies to help showcase my skills
• use a content management solution that was easy to update

On top those goals was the design. I am obviously a developer and not a designer. I took inspiration from other sites, and specifically developer sites, and opted for something clean. I sprinkled a little flare here and there. For example, all throughout the site I used Ubuntu Mono, a monospace font use frequently in code editors, to dress up little parts of the UI.

Portfolio

The content portion of this is all managed in .mdx files so I can quickly add or edit the items here. All of my projects are public on a GitHub while also being deployed live so those interested can visit and interact with them. It was important that I didn't just link to a repo or just to an app on a random Vercel or Heroku deployment URL. I wanted those interested to be able to see the code and interact with the app, and to have the app deployed in a professional manner.

Technologies

The site uses Next as a framework, and all of the content is rendered via Static Site Generation. Aside from the Spotify content, everything else on the site is being loaded from content created by Contentlayer. The data generated by Contentlayer provides full TypeScript support, making it even easier to integrate with the site (which was written in TypeScript). For sending emails from the contact form and fetching information from the Spotify API and creating embedded Tweets (via Contentlayer/MDX) I use the serverless functions written in Next and deployed by Vercel.

Contentlayer

Contentlayer let me set up a system to manage all of the content on the site. You can read more in my post Why I Chose Contentlayer. In short, it lets me quickly and easily edit content on the site. Virtually everything written word is saved in a .mdx file.