My Personal Website, build with Next.js and Tailwind CSS

  • By Rizki Maulana Citra
  • Last update: Dec 25, 2022
  • Comments: 5

My Personal Website, built with React, Next.js, TailwindCSS, and Strapi for headlessCMS

Additional Libs

  • Next-SEO
  • Next-Themes
  • Next-PWA
  • Next-MDX-Remote && mdxPrism
  • Framer Motion

TO DO

  • Syntax Highlighting
  • Next Authentication
  • Guest Book
  • Comments with GitHub

More Description Soon...

Github

https://github.com/rizkimcitra/rizkicitra

Comments(5)

  • 1

    Create Snippets

    Share your snippet to my website, as part of Hacktoberfest event!.

    go to src/data/snippet, create a new .mdx file and create your own snippet!

    1. you should use kebab-case for the file name
    2. you can use template provided on another snippet to fill up your meta data
    3. You DON'T need to start development server, just use Markdown Viewer to preview your snippet.
  • 2

    How to add additonal external javascript library?

    Where and how to add external javascript library as a CDN? @rizkimcitra i want add adsense verification script :)

    Example this my adsense verification script

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-74********6464" crossorigin="anonymous"></script>

    I want to add that at between head tag

  • 3

    Comment system

    I need to create a new feature, a comment section!

    but I really need to choose between

    • manually create the comment system backed with supabase
    • enable discussion on this repository and start with giscus
  • 4

    Dynamic author

    provide dynamic author information by using github apis' like image and profile.

    on all blog posts in .mdx files, use github url to get github profile and github profile picture.

    author only need to provide their username in metadata, such as

    name: John Doe
    github_username: john_doe
    

    and then there would be a component to show the author profile url and author profile picture

    like so:

    export default function AuthorInfo(props){
     return (
      <div>
       <img src={`https://github.com/${props.github_username}.png`} />
     </div>
     )
    }
    
  • 5

    i18n

    Would be lovely to have multiple language on my website, there is so many 18n library out there, which one should I pick?

    Current roadmap is I 'll have 2 languages:

    • English (primary)
    • Indonesia (can be selected by user inside a popover)

    Roadmap:

    • [ ] Choose library
    • [ ] Implement to static page
    • [ ] Implement to dynamic page