wirtzdan/website

Personal website build with Chakra UI, NextJS and Airtable ✨

danielwirtz.com

Welcome behind the curtain of my personal website/portfolio. Take a look around.

This website is build using Next.js (React Framework), Chakra UI (Component Library) and Airtable as a simple backend. The backend comes into play on the blog, books and tools page.

Read this article to see how I'm using Airtable as a backend.

I think the most interesting pages to look at are:

• https://danielwirtz.com/blog
• https://danielwirtz.com/books
• https://danielwirtz.com/tools

Get it running locally

To get this website running locally, type this into your terminal:

$ git clone https://github.com/wirtzdan/website danielwirtz.com
$ cd danielwirtz.com
$ yarn
$ yarn dev

Make sure to add environmental variables, if you want to play around with the Airtable and Raindrop integration. To do so create a .env.local file similar to .env.example.

Using my code in your website

Read License.md

Questions / Feedback

Do you have questions or feedback? Then the reach out to me on Twitter

website's Issues

New ideas :P

Hey @wirtzdan, I am just creating my own website and yours is amazing! I was having doubts with using Chakra or Tailwind and seeing your code I have decided to use Chakra as my knowledge of CSS is very poor ): I am creating my website little by little and inspired in yours. I have also checked other people websites to get ideas and there are a few that you could implement:

1. Resume section: There is a nice website called gitconnected where you can sign in with GitHub and create your own JSON Resume Schema, which seems to be a standard data structure for resumes. As the web gives you an endpoint and a pdf link (at the moment only 1 template, but they are adding new features like pdf templates, linkedin import, etc), I think it could feed another section to have all your resume displayed by Chakra ;) I have seen this which creates a quite nice resume, but he doesnt use the resume schema and forces to use an external CMS like Prismic to structure the data, which is far more complex than my approach.
2. Posts categories: You could add categories to your posts and also filtering based on that. Go to the blog section of my website to see and example of what I mean.
3. Gradient: As you may have seen, chakra now offers a gradient tool and I have just applied it to my home page. I like it because it remembers me to the vercel deploy, preview, ship gradient in the home page.
4. Stats section: I have thought about it as a connection to other APIs from the services I use (for example GitHub, Spotify) to collect metrics (commits, contributions, last listened song, etc). I have got the idea from Lee Robinson website.
5. Projects section: To showcase your projects in a more extended format. Again inspired by Lee's website.
6. Splitbee: To collect metrics about your site. They have a free plan and seems very nice.

What do you think about this? Would you modify something?

Also I have a question about why did you decided to move your mdx blog posts to airtable? How do you write the mdx format there? I mean, you have to write it while having your project running in local to see changes rendered from api response? I have thought about using Notion as there are API wrappers for React on GitHub.

Again, thanks to give me inspiration for my website from your amazing site!

[!issue] Compliment

Hey! Just wanted to say I love the look of your site. It's pleasant and fun. Keep up the good work!

feel free to close this out once you read it

How to launch the website?

Is there a chance to show you how to create a database in airtable.com so that the website works?

[ Other ] Dark mode

ayyyy, nice to meet u!

I refer to your code. Until now, I don't how to make dark mode (also light mode) keep when reflash page.

• My website
• Source

Thank you very much!

There are no scenrios...

Error says, there is no scenrio you must have to create one.

how it should be removed?

AirTable db

Can you please provide a link to your airtable db so that we can configure our project

Is any chance that can write how to use the repo?

thx~

Minor issues

Hey! Love your website, it's a huge inspiration :)

Two tiny issues I found:

1. "Bookmarks" nav button text is leaking out of button in mobile view

2. Typo on home page, I think you meant 'transformational' online course?