![Stefan Kudla's Logo](/public/images/stefan_kudla_logo_round.png)
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
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!
- 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:
- 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 ...
- Redesign home page in Figma
- Redesign blog page in Figma
- [] Figure out Tailwind CSS nesting (or postcss nesting)
Stefan Kudla - LinkedIn - [email protected]
Website Link: stefankudla.com