Skip to content

My simple portfolio blog built using 11th and tailwindcss.

Notifications You must be signed in to change notification settings

mmdsharifi/mmdsharifi.com

 
 

Repository files navigation

My simple portfolio blog built using 11ty and tailwindcss based on 11ty base blog Now come with dark mode.

Shortcodes

Responsive gallery or single image using srcset via cloudinary, output webp format. ]

{% respimg path, alt, style %}

<!-- settings: -->
eleventyConfig.srcsetWidths = [
  { w: 400, v: 400 },
  { w: 600, v: 600 },
  { w: 800, v: 800 },
  { w: 1200, v: 1200 },
  { w: 1440, v: 1440 }

(figure) Image with caption tag.

{% figure path, alt %}

Features

  1. Convert external links to target _blank and noreferrer for better SEO optimisation, using markdown-it & markdown-it-link-attributes plugins.
/* Markdown Overrides */
let markdownLibrary = markdownIt({
  html: true,
  breaks: true
}).use(markdownitlinkatt, {
  pattern: /^(?!(https:\/\/mmdsharifi\.com|#)).*$/gm,
  attrs: {
    target: '_blank',
    rel: 'noreferrer'
  }
})
eleventyConfig.setLibrary('md', markdownLibrary)
  1. Draft post enabled.
  2. Responsve images using srcset
  3. Cloudinary and Netlify ready.
  4. score 4 x 100 in Google lighthouse.
  5. CSSnano (minify) ready.

Installation

  1. Clone or download this repo and run npm install.
  2. Remove unwated posts / works.
  3. Update the site info in metadata.json.
  4. Update the homepage info in data.json.
  5. Update about.md.
  6. Go nuts :)

Hope you like it ❤️

TODO List

[] add favicon.svg

About

My simple portfolio blog built using 11th and tailwindcss.

Topics

Resources

Stars

Watchers

Forks

Languages

  • HTML 84.4%
  • CSS 7.7%
  • Nunjucks 6.8%
  • JavaScript 1.1%