jermspeaks.github.io

Personal Website

MIT License

Stars
2
View Code on GitHub Visit Website
Ecosystems: Astro, MDX, Svelte, Tailwind CSS
jermspeaks.github.io - v1.2.2 Latest Release

Published by jermspeaks 4 months ago

What's Changed

Full Changelog: https://github.com/jermspeaks/jermspeaks.github.io/compare/v1.2.1...v1.2.2

jermspeaks.github.io - v1.2.1

Published by jermspeaks 8 months ago

What's Changed

Dependency Updates

Full Changelog: https://github.com/jermspeaks/jermspeaks.github.io/compare/v1.2.0...v1.2.1

jermspeaks.github.io - Website v1.2.0

Published by jermspeaks 9 months ago

New Year, Combined Pages

I haven't given a website update since June 2023.

  • #125 Resume updates
  • #188 Writing has expanded to adding weekly notes
  • #274 New project added! ✨ Thanks Make Real!
  • #289 Combined many pages into a general "curations" page

Bug Fixes and Enhancements

  • #112 Fix the relative links by removing on mobile and making classes
  • #114 about page layouts updated titles for indexing
  • #115 Added alt tags as figcaption (helps with attribution too)
  • #117 Add reading time to blog posts
  • #139 Upgraded to Astro 4
  • #240 Asides added as an Astro component
  • #251 Fixed the RSS reader initial image post
jermspeaks.github.io - v1.1.0

Published by jermspeaks over 1 year ago

Website v1.1.0

Tailwind, 🌑 Dark Mode, and Solving My Woes with Styling

Some major updates are around styling. Previously, I was using some CSS files to style the different pages. However, after a lot of tinkering with Tailwind, I went full in. And boy has it made it easier to update styling, especially around media queries.

I hate to think about media queries, write a quick template or some variables, when tailwind makes that super easy. Add to your classes, sm: or md:, or lg: and you’re good to go for what you want to style at a specific breakpoint. What it means is, you have to think about your smallest width first, then move on to where you want your next breakpoint and add that utility class.

Where I immediately saw this benefit was a bug I found with a list of navigation links. With a little bit of tinkering, I was able to make the classes from flex with a default of no wrapping, to flex-wrap then md:flex-no-wrap to get that desired effect.

Another super helpful thing was immediately adding dark mode support. With the prefix, dark:, it made my life so much easier. I saw some initial places where I needed to modify the website immediately, and having this utility class prefix allowed me to get straight to styling vs. thinking about CSS selectors and rules. That said, having a background in CSS is a huge help, and even if I had to write only CSS, I’d still be operable.

Also, you may now notice there are links next to headings. That’s all thanks to installing my first rehype plugin! I had no idea there was such a rich community of rehype and remark plugins for all different use cases. I’m excited to explore more of them.

Lastly, my RSS feed has been updated. The books and films are added to the main feed, as well as styling the feed page itself. I didn’t know it used a .xsl file, and I used a generic template.

New Collections 📚 🎥

I expanded on my library. The films, anti-library, and book reviews have been added. The lindy library is passable and needs a bit more design and explanation. I’m proud of adding the log alongside the movies and books. I plan to link the log back to those pages too, where I can.

A lot of tinkering with Tailwind helped make this a lot easier too. I knew the design needed to look a little different, so for the past month, I’ve been browsing the pages on my own until they looked the way I wanted.

Content Updates

My resume, about page, now page, and many, many other pages have been updated. This was a long time coming. For years, I’ve kept the same about page, being about the “brief” version vs. the Twitter version vs. the LinkedIn version. I don’t think that represented me well. After some inspiration from Derek Sivers’ about page, I restarted the process from scratch. I thought more about it as an autobiography, rather than a professional LinkedIn page. It’s a lot more personal, and hopefully, that shines than the corporate version that I wince at.

Search 🔍

I installed the Algolia Crawler earlier in the month and finally had time to add a search component over the weekend. A little more refinement is needed to get the search results to display correctly (specifically removing the navigation text), but we’ll get there.

Under the hood 🚘

Getting the initial setup with Netlify was a major lift. Everything else has felt like a smaller lift, but also necessary. For example, dependabot wasn’t installed, so I made sure dealing with package updates was automated. I included meta tags that were missing for SEO purposes, verifying Twitter cards and Open Graph links (like LinkedIn) to work correctly.

What’s next?

Honestly, I’m going to take a step back and work on the content. While I’d love to update the Lindy Library, I’d much rather do what I do best, and write more blog posts. I have been working on a personal content pipeline to gather ideas, slowly work through books, and put my own take out there.

If there are any issues you find with the website, feel free to open an issue on GitHub. Ta ta for now 👋.

Changelog

  • #43 Add Github Actions to automatically tag the repository by semantic versioning
  • #45 Migrate from vanilla CSS to Tailwind CSS
  • #48 Dark Mode added!
  • #50 Additions to “Logs” - Add concert and musical for 2023
  • #51 Addition to “Library” - Add a brief lindy library
  • #54 Install Dependabot to Github project
  • #60, #61 Add first rehype plugin to add relative links to headings
  • #62 Netlify configuration - add security headers and update timezone
  • #66 Added top navigation for blog
  • #75 Expand on the films section and add them to the main page enhancement
  • #76 Extend press to include more talks, papers, and updated formatting enhancement
  • #82 Updated meta tags for SEO. Twitter cards and Open Graph links should correctly render updated hero images
  • #86 RSS page styled, should make it a lot more readable
  • #91 Migate blog posts with book reviews to the library book detailed pages
  • #92 Add films and books to rss feed
  • #93 Create anti-library page. Install Umami Analytics
  • #94 Add a “now” page
  • #99 Updated resume content
  • #103 Include quick algolia search enhancement
jermspeaks.github.io - v1.0.0

Published by jermspeaks over 1 year ago

First version release

  • Migration over to Astro
  • See #37 #38 #39 #40 #41 #42
Badges
Extracted from project README
Netlify Status
Related Projects
webapp-template

SvelteKit x Tailwind CSS x Supabase x Turborepo (pnpm)

27 Jul 2020 116
cf-status-page

Status page auto deployed on Cloudflare

05 May 2023 29
generator-jhipster-svelte

Generate Svelte powered JHipster web applications

28 Aug 2020 63
inthistweet

✨ Futuristic ✨ twitter image, gif and video downloader. Enter a Tweet URL, click search, and dow...

12 Dec 2022 182
SvelteKitTemplate

Travis's SvelteKit site template

16 Apr 2021 11
sveltekit-blog-mdx

SvelteKit MDX starter blog with MDsveX (Svelte in markdown)

09 Jun 2021 271
template

Elder.js template project. It is part template, part tutorial. Dive in!

02 Aug 2020 113
authui

Fully customizable login flow for your applications. Get started in minutes, not hours!

18 May 2023 66
sveltekit-blog

Sveltekit blog starter project created with sveltekit, typescript, tailwindcss, postcss, husky, a...

22 Aug 2021 202
atlas-academy-old

A previous version of the blog for Atlas Academy. Made with 🚀Astro.

18 Aug 2023 2
junglejs

The Jamstack static site framework for Svelte

22 May 2020 276
netlify-plugin-cloudflare-pages-deploy

An awesome plugin to make you Netlify as a CI/CD tool for Cloudflare Pages. Deploy your static si...

29 Aug 2023 4
astro-bento

A bento-styled portfolio template using Astro, Solidjs, TailwindCSS, and D3.

06 May 2024 2
sveltekit-starter

Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and st...

04 Apr 2021 606
website-astro

Website designed with Astro, Vue, Svelte and React, with multiple Apps, Quizzes and Games

03 Feb 2024 2