pretz.dev

Todo

• Figure out basic tech stack
• Get ideas on layout and looks
• Robots.txt
• Sitemap.xml
• favicon.ico
• Make basic main page (HTML only)
• Skip navigation link
• Accessibility aria labels
• Make basic CSS for main page
• Set up Cloudflare Pages
• Finalize main page content
• About page basic format
• About page content
• Projects page basic format
• Projects page content
• Contact page basic format
• Contact page content
• Add the missing page header (with an h1) to the projects page
• Targets and rel attributes on links
• Re-add the Content-Security-Policy to index and projects now that we're using some JS
• Finalize designs
• Large screen sizes
• Small screen sizes
• About page improvements
• Projects page improvements
• Contact page improvements
• JS site enhancements
• Note about techlogos not being my trademark (footer? They're on every page but contact. Ignoring that, contact makes the most sense to put this note on.)
• Custom 404 Page
• Assess how big the carousel images really need to be
• Add modern formats (webp/avif) to images with more-standard fallbacks (jpg/png)
• Site audit with Lighthouse
• Lighthouse follow-up
• Code cleanup

Cloudflare Pages Steps

• Basic setup
• Set up custom domain
• DNSSEC Records
• Fix Cloudflare hiding the email
• Set up www subdomain (for those that type that in out of habit)
• Set up build caching
• Update build system version to 2

Finalize Design Steps

• Fix button text contrast
• Fix button text size
• Set up light-mode colors
• Make a logo
• Turn logo into an actual favicon.ico
• Make "On This Page" links scroll slightly less far down the page, ideally keeping the margin like nav does
• Project-preview projects initial design
• techlogo images size consistency
• techlogo images caption instead of image with words (and contrast issues)
• techlogo images zoom in and display alt text in little popup bubble on hover
• Stylize scrollbar
• Change text highlight color
• Change strong tag color
• Fix the skip to content link (and rename the class)
• Fix gap to the right-side of the techlogos
• Make an image carousel so I can have multiple images on projects. This will also fix the gap on the side of the current single image.
• I feel like the project images are too distracting, possibly due to how bright and colorful they are. Desaturate and/or darken the carousel images slightly?
• Preload font to fix the brief flash of default sans-serif
• Fix carousel's bottom line not having the round corners (due to the scrollbar being beneath it)
• h4 and strong look bad in Firefox's render of Nunito
• h1s of Nunito are also not looking too good with the new font size changes
• Use overflow-clip-margin to fix the corners not matching
• Logo on footer
• Center the h1 and h2? It definitely looks better on mobile
• p text gets too long and looks bad. Max at 75ch? 100ch? Time to research typography
  • p line height

Small Screen Size Improvements

• Move the sidebar to an expandable menu at the top below 667 px width
• Add a border to the navbar?
• tooltip's position:relative is somehow covering up the navbar's content
• Do something to make the list of a links feel more like a proper menu. Display as table? Make links take the full width?
• While the changes made to fix the above issue look and feel better, they also cause overflow at 550-ish px in width
• On this page section takes up too much space.
• Adjust techlogo image size to fill the space when in single-column layout
• Images are very small at small sizes, consider adjusting margins?
• Header sizes are too big at small sizes
• Fix text run-on in small sizes
  • decrease header size?

Large Screen Size Improvements

• Above a certain width, move the image to the side (2-column layout)
• Above a certain width, move the project blocks be all in one row (3-column layout)
• Add max-width to the sidebar?
• Make nav headers and links bigger
• Carousel buttons will scroll until the image is 1.5 rem from the top of the screen. On larger screens, this may scroll the buttons off of the screen, resulting in a jittery process

About Page Improvements

• .NET and DNN are breaking out of their box
• White looks bad
• Fix colors in light mode
• Cloudflare refuses to be vertically centered
• Hover over for an explanation of what it is/is used for
• Click to go to that tech's website (such as click on the DNN logo to go to DotNetNuke)
• Google Analytics is deciding not to be a square with round corners again
• Hover/Focus border has a gap at the bottom
• Add an arrow to signal where the tooltip is coming from
• Assess the accessibility of tooltips
• tooltips can go off-screen when content is high on the screen
• Wider tooltips that do not go off the screen

Projects Page Improvements

• Google Analytics is breaking out of its box
• Add GitHub links to the projects' repos
• Add other relevant links to the projects, such as the website link, ESOUI link, etc.
• Split the "on this page" section to websites, desktop apps, mobile apps, AddOns/mods, hardware, etc.
• Add the rest of my projects.
• Visual Studio is smaller than the rest of the techlogos.
• Techlogos are taking the focus away from the project. Are they too big? Wrong color?
• What about if we made the post color for projects the same as projects are on the front page? That would simplify the color for the problem above. Perhaps splitting the projects into the buckets from above could be the "base", then the projects would stack on top like on the homepage

Contact Page Improvements

• Links look bad in a straight list. Box them up into a grid?
• Add a form to contact
• Clarify that I am available for contract work

JS Site Enhancements

Note: enhancements. Someone with JavaScript disabled should still get a perfectly functioning site, just missing a few niceties that are either not possible or not worth making in plain HTML + CSS.

• Add buttons to navigate between the slides of the carousel
• Add little chain links for after each header. The links already exist (and are on the sidebar), but this may be a more obvious way of making it clear that it's a link
• Change the sidebar to indicate what part of the page they are on
• Theme switcher
• Add the "active-tab" class on the li's in the "On this page" section

Code Cleanup Steps

• Remove ununsed classes
• Simplify the classes and class selections
• Make HTML and general layout consistent between pages
• Clean up and organize CSS
• Split page-specific CSS into their own stylesheets
• Combine duplicate code (CSS, primarily)

Long-Term Enhancements

• It could be a fun project to execute the carousel button script before shipping the HTML to visitors, eliminating the need for the script entirely