Personal Website & Blog in 11ty

Kumar Abhishek's personal website & blog built with Eleventy.

---

🌟 Features

1. Built with Eleventy! (docs)
2. Netlify CMS: easy blog & website configuration management.
3. Simple stack. Minification/bundling using internal 11ty plugins.

🔗 Table Of Contents

1. Project Structure

🗃 Project Structure

• 📄🔧 .eleventy.js All project technical configurations go here
• 📂 src/ Main source directory. Top-level/custom webpages are created right here
  • 📄 index.njk The home page
  • 📂✍ blog/ Create blog posts here
    • 📄 index.njk The blog listing page
    • 📄 blog-tag-pages.njk Page template to list posts for individual tags
  • 📂🔧 _data All the website configuration and data go here
    • 📄🔧 website.yaml Top configurations, like, domain, logo, title, SEO, etc
    • 📑🔧 skills.yaml List your skills here
    • 📑🔧 work.yaml List your professional experiences here
    • 📄🔧 env.yaml Secret configurations as environment variables
  • 📂👩‍💻 _layouts Reusable templates for various page types
    • 📄⭐ base.njk Main template with outermost common code used by all pages
    • 📄 blog_post.njk Template for blog post pages ideally written in markdown
    • 📄 page.njk Template for generic pages ideally written in markdown
  • 📂🧩 _includes All build-time reusable components go here
    • 📄 header.njk Top navigation bar in every page
    • 📄 footer.njk Footer section at the bottom of every page
    • 📄 blogslist.njk List of all blog posts with pagination
    • 📂🎨 css CSS files - inlined into HTML during build
      • 📄 base.css Common CSS rules used in every page
      • 📄 blog.css CSS rules for pages using the 'blog' or 'page' template
      • 📄 header.css CSS rules for top navigation menu
      • 📄 footer.css CSS rules for footer section
      • 📄 flex.css Helper classes for CSS Flexbox
    • 📁 js Javascript files - inlined into HTML during build
  • 📁🖼 assets Static assets like images, icons, etc
• 📂 utils/ 11ty build-time custom utilities...
  • 📄 shortcodes.js Reusable short markup (HTML) snippets (docs)
  • 📄 filters.js Custom filters for 11ty to be used in templates to manipulate data (docs)

Credits

1. Theme inspired from Hylia Starter Kit
2. Notes section inspired from gatsby-theme-code-notes
3. Name pronunciation inspired from LinkedIn's similar feature and @heyatif's post on his Vocalizer script. Though, I wrote a static implementation for efficiency.