Digital Garden

Digital Garden

I wanted to create an online portfolio that doubled as a blog site, a "digital garden" of sorts that I added to and cared for.. a well of knowledge and lessons.  
 

I curated a tech stack to bring this vision to life:

 

  1. Strapi CMS: For content management, I opted for Strapi. While there's an intuition learning curve, I've enjoyed using it for its simplicity and free pricing model, as opposed to more complex CMS like ContentStack.  
     
  2. Heroku for CMS Hosting: Heroku used to be free but now costs around $5 a month which isn't the worst thing in the world but I'm sure I could've found something for free if I kept digging. With its easy deployment process and scalability, Heroku ensures a reliable backend infrastructure without the hassle of managing servers.  
     
  3. ReactJS/NextJS: To power the frontend of my portfolio/blog, I selected Next.js and React. Next.js's server-side rendering capabilities are quite powerful and allows for CSR development quite easily too. Will probably check out Svelte some day but that day isn't today. With React's latest update I still have hope.  
     
  4. Vercel for Frontend Hosting: Vercel's seamless deployment workflow provides a dynamic and performant user experience.  
     
  5. Tailwind CSS for UI: To streamline UI development and maintain a clean codebase, I integrated Tailwind CSS. Its utility-first approach allows for rapid prototyping and customization, enhancing the overall design aesthetic.  
     
  6. CI: Using Husky pre-commits with ESLint/Prettier/TypeScript type checking for my continuous integration toolchain. Husky is a utility that allows linting, type checking and testing when committing code. It has a pre-commit hook that typechecks, lints and prettifies code. I’m also using lint-staged which achieves something similar but only checks the files that have been updated, rather than every file. This ensures quality control and integrity of the codebase.  
     
  7. Accessibility Compliance: Following some WAI-ARIA standards (ARIA attributes) is a good start to making this website more accessible. The next step would be following some WCAG standards like focus management. Ultimately, in a commercial setting this would be proficient in WCAG 2.1 Accessibility standards for AA compliance.  
     
  8. SEO Optimization: I've implemented Meta tags, JSON-LD Schemas, Sitemaps, robots.txt, Link tags, Next Image optimization for a more optimized website.  
     

With my online portfolio and blog now live, I'm excited to share my work and insights with the world!

githubgithub icongithubgithub icon

Strapi CMS • NextJS • Heroku Cloud Hosting • Tailwind CSS • SASS/SCSS