brendonotto/obsidian-homepage

Obsidian homepage - Minimal and aesthetic template (with my unique features)

Obsidian-homepage Tutorial

don't forget to install the homepage above to take or get inspired by what you are interested in.

Showcase : https://forum.obsidian.md/t/obsidian-homepage-showcase-minimal-and-aesthetic-template-with-unique-features/40367

Homepage.mov

Features

• Infobox functionality (with banner)
• Automatic humanized greeting heading
• Life progress (Thanks to https://github.com/SlRvb)
• Obsidian activity
• My style to navigate through the notes

Infobox functionality (with banner)

What do you need :

• Download the CSS Snippets which are located in the folder Infbox.
  • ITS theme Image Adjustment.css
  • ITS callouts (infobox).css

How to do it :

First of all read this, it will tell you easily how it works.

• https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Guide/Callouts.md

Basically what I did, I took the infobox and I turned it into small boxes where I have all my other main pages linked and all separated into three categories where each category has its own banner depending on its "role" in my vault.

Your turn! :

feel free to see it in the "00. Homepage.md" and create your own categories by changing the links and banners. Normally with the link I sent above, it will be a piece of cake for you.

Automatic humanized greeting heading

I'm not going to take too long on this, I've already created a post about it on the obsidian forum so don't hesitate to see it.

• https://forum.obsidian.md/t/dataviewjs-get-an-automatic-humanized-morning-afternoon-evening-great-for-user-greetings/33351

What do you need and How to do it :

All you need is the Dataview plugin, then go to its settings and activate dataviewjs. With "00. Homepage.md" copy and paste the code and change the texts as you like. Voila you've done it.

Life Progress

Credit to @SlRvb for creating this wonderful code.

What do you need and How to do it :

All you need is the Dataview plugin, then go to its settings and activate dataviewjs. With "00. Life Progress.md", copy and paste the code and all you have to do is change the year, month and day corresponding to your birth date. Here :

For example, if I was born on 10/20/2000, I would write year: 2000, month: 10, day: 20

And then the progress bar will be set automatically with a percentage difference of your age at the age of 80. You can change to any age by changing the "80" in the line of code you see in the image above.

Your date of birth is for the "Life" line. The rest is already in the code, don't touch the rest if you don't know what you are doing!

Obsidian activity

Credit to @Rainbell129 for this code.

What do you need and How to do it :

With "00. Activity.md", copy and paste the code and you are done.

My style to navigate through the notes

I just wanted to share this for people who want easy navigation for their notes. It's simple, just put at the top of each page the link to the page before it. and do this to all your pages. this way you'll be faster and more efficient with your notes than looking through folders! Feel free to try it on "00. Homepage.md" by clicking on the link "Obsidian" inside the "Others" folder.

Conclusion

There you go, you've learned everything about my homepage and you're ready to create your own. Don't hesitate to contact me if you want to discover my other off-homepage pages. Have a nice day and create the homepage of your dreams :).