stefankudla.com

This is my new portoflio site built with the Jamstack, more specifically, typescript, Next.js, Tailwind, and Cosmic.js!
Explore the docs »

View Live Site · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. Contact

About The Project

My new and improved Portfolio site which I converted from my old WordPress website. This has been the largest project I have worked on to date. There was a lot of researching, planning, and deep coffee coding sessions involved.

I learned that when it comes to building a project, your limitations vanish where your fear ends. I jumped all in with this one and pushed through all of the struggles, while learning so much about production level programming. Cheers!

(back to top)

Built With

• Next.js
• TailwindCSS
• Typescript
• Cosmic.js
• Node.js

(back to top)

Roadmap

• Planning and research: Find a solid Jamstack configuration.

Big shoutout to Dev World. He inspired me to go the CosmicJs Route

• Fork NextJs/CosmicJs example from Vercel
• Build out the home page with a minimalist and readable layout.

I got inspiration from a few awesome dev websites:

• Rida.dev
• jeffjadulco.com
• craftz.dog

• Import WordPress Posts using Cosmicjs WordPress Importer extension
• Create a Posts and Works page to house all of my blog posts and projects, use getStaticProps to fetch all the data from Cosmicjs
• Create <[slug]> pages for posts and pages and convert the markdown to HTML as well as add styles
• Implement dark mode using next-themes
  • Fix flash on page reload when dark mode is enabled | ~ Fixed 05/05/22 ~
• Deploy production site on Vercel
  • add CNAME records to current server
  • enjoy the benefits of Github repo CI with Vercel :D
• Implement basic SEO, sitemap, google search console verification
• Add simple page transitions using Framer Motion
• Create an About page
  • Personalized content about my coffee setup and WFH setup
• Implement Spotify API
  • Display track that I'm currently listening to in top menu | ~ Shipped 05/17/22 ~
  • Display my top ten most listened to tracks on the about page | ~ Shipped 05/15/22 ~
• Migrate from npm to pnpm
• Improve page render time and first contentful paint
• Fix scroll to top bug
• Implement a table of contents on blog posts
• Updating to Next.js 13 ...

Major site redesign 2023

• Redesign home page in Figma
• Redesign blog page in Figma

Chores

• [] Figure out Tailwind CSS nesting (or postcss nesting)

(back to top)

Contact

Stefan Kudla - LinkedIn - [email protected]

Website Link: stefankudla.com

(back to top)