Giter VIP home page Giter VIP logo

stefankudla.com's Introduction

LinkedIn


Stefan Kudla's Logo

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
  2. Getting Started
  3. Roadmap
  4. Contributing
  5. Contact

About The Project

stefankudla.com Screen Shot

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

(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:

  • 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)

stefankudla.com's People

Contributors

stefkudla avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

abaso007

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.