Skip to content

arielrezinn/personal-site

Repository files navigation

Welcome!

This is my personal website that I started building in 2020 to further my understanding of accessible web development. Its's built from scratch using Gatsby and is a constant work in progress. If you have any suggestions for improvement, I'm happy to hear them!

📙 Todo

  1. Fix the height issue on mobile devices where the vh is smaller than computed and content is hidden behind the navbar
  2. Make the embedded pdf of my resume accessible to screen reader users
  3. List some of the intentional choices I've made to improve site accessibility on my accessibility page
    • Atkinson Hyperlegible
    • Accessible color palettes
    • Focus indicators w/ focus-visible pseudo class
  4. Add an easily-accessible way to contact me (like a form or smth)
  5. Figure out if/how to add skip links back in
  6. Create a way to automatically display and filter cool sites/resources on the resources page
  7. Make sure the default font size is 16px, 18px, or 20px
  8. Keep line lengths around 70 characters at most by setting max-width: 70ch; in the css
  9. Add AAC Shim to this site to improve the experience for users of AAC
  10. Give the mobile and web navbars the tag or otherwise specify that they are nav elements to make them more accessible
  11. Make sure all images/logos are elements and not font glyphs, which are very inaccessible
  12. Redo landing page with a photo of ME !
  13. Add animation for navbar links
  14. Add an option to switch the site to the dyslexia-friendly font
  15. Upgrade npm packages/dependencies

🪲 Known Bugs

  1. flash of light when loading page
    • especially noticeable on dark mode
    • common issue, should be an easy fix

🚀 Gatsby Quick start

  1. Start developing with Gatsby.

    Navigate into your new site’s directory and start it up.

    gatsby develop
  2. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.