This is my latest project, a personal webapp that doubles as a blogging platform and portfolio. This is more like a space where I can jot down my ideas and thoughts which I want to share with the world.
After looking around a bit into other Static Site Generators ( SSGs ) like Jekyll, Gatsby, Gridsome, etc. I finally decided to go ahead with 11ty, and Tailwind CSS for styling. Although, I scoured through hundreds of themes, unable to decide, I started developing.
I used Nunjucks as my templating language, alongwith Markdown for articles and blog pages. For icons, I have used a mix of Font Awesome and Devicons. Apart from the default fonts, I use two fonts : Open Sans and IBM Plex Sans at different places. Apart from this, Endpoint Space was an interesting find for me, which I have used in the Contact page. This allows users to send there comments and messages. Although, I didn't use a lot of Javascript, I created a "Copy Page Link" button which uses a copyPageUrl() function, and in order to manage runtime Javascript, I used esbuild. I plan to add more JS in the near future though :-P.
Focusing on UI Principles and Standardization, I went through some articles on how to space elements, the do's and dont's of UI design. Out of the many things that I read, Don't use padding and margin together and Margin Down Right Method were the ones that I used the most while styling this web app.
Showcasing Creativity: I added a Gallery Page to add a personal touch and showcase my hobbies. This section of the webapp is dedicated to my photography, and designs that I make in my free time, offering visitors a glimpse into my world beyond code.
Referenced Articles
- Detailed Guide to build a 11ty / eleventy & tailwindCSS static site
- Mike Aparicio - Template Talk
- JavaScript for 11ty with esbuild
- Common Pitfalls
- Creating a gallery in 11ty (Eleventy)