Voces de Guiraa' is a speech therapy scholarship program supporting Guiraa' Terapias, a therapy studio located in the heart of Oaxaca, Mexico. My good friends run the program and they reached out for advice for creating a website to help connect donors to make a donation. I was happy to contribute the domain, hosting and development of this site to help grow the program.
Normally I like to reflect on the biggest challenge and the mistakes that I made in each of my projects. For this project I didn't really face significant challenges and you will have to tell me what mistakes I have made. I am really reaching here, but the biggest challenge in putting this site together was learning how to work with PostCSS and PurgeCSS in conjunction with the other Gatsby and Markdown tools that I used to produce the site. By default gatsby-plugin-purgecss is only going to enumerate your javascript components but my site was built with lots of different component file types, like mdx.
{
resolve: `gatsby-plugin-purgecss`,
options: {
// develop: true, // toggle this command to remove styles in development as well
tailwind: true,
purgeOnly: [`src/css/style.css`],
content: [path.join(process.cwd(), 'src/**/!(*.d).{js,jsx,md,mdx}')]
}
},So... Why was I using these tools in the first place? Because I was excited to try out Tailwindcss, a utility first css library, and the Gatsby Starter project for tailwind uses these tools. I had yet to try them and well, it was an interesting experience. PostCSS seems really powerful, I had kind of assumed it was an alternative to a preprocessor but it is really a beast of its own and can be used in conjunction with preprocessors or to create your own preprocessor. The biggest challenge was getting used to this and configuring my project and vscode to lint me while i @apply'd bliss.
What I enjoyed most about this project is the thought that just a little bit of my time could help sponsor families and children in need of therapy to develop really fundamental skills. I have supported the program myself for a few years but I hope that this site helps attract more donors, including businesses, to offer so much more.
When we got started on this project, my friend Amy sent over a gallery of photos, a document with a draft of the body content for each page and links to the Guiraa' socials. I got started by getting to know their brand from the already published artifacts. The logo is great and there is clearly another designer producing some graphics for the studio that I hope I can meet someday. I incorporated the existing assets and color palette into the site and used google fonts to pick a typeface combination that read well and complemented the logo. The body content that Amy provided was really superb, especially for a first draft with no working design documents. All that I really needed to do was build out the site, create teasers for each page and direct the user towards making a donation.
Another thing that I like to reflect on are any conflicts encountered during the project but I cannot say that there was any conflict in this one. Amy and I were totally happy to work together on this project, it was really simple and we were both excited by eachother's work. One thing that I tried not to get too attached to was this idea of offering cards with scholarship opportunities. My concept was a bit idealistic, I expected Amy to be able to list some details about the current scholarship opportunities. That would be great but what she really needs is just some general information, to capture the interest of potential donors and to be able to follow up with them about their support for the program.
If I could spend more time on this project I would go ahead and setup Netlify CMS so that Amy could maintain the content for the site and publish program updates.
Netlify and Gatsby could not have made this site any easier to produce. Gatsby and its markdown plugins make it incredibly easy to build out a website. The Gatsby ecosystem is incredibly rich. The tailwindcss Gatsby starter was a great way to get started with tailwind and introduced me to new css authoring tools that I had no experience with. Netlify made it super affordable and easy to get the domain, ssl and implement CI/CD workflows to deploy the site. The site's Contact page uses Netlify forms which is a feature that scans your static site for web forms with the netlify attribute. It captures the submissions for you and you can review them and configure notifications and view the submissions in the Netlify GUI. I can't think of a better developer experience and it enabled me to provide what I think is an exceptionally high quality site in very little time with very little cost. This project was a dream.