nunogois / nunogois-website

www.nunogois.com - Personal website, built with Astro and Tailwind CSS.

nunogois-website

Personal website: www.nunogois.com.

Built with SvelteKit (Svelte) and Tailwind CSS.

Hosted in Cloudflare Pages.

Lighthouse scores 2021-11-12 (Blog disabled)

Development

I wasn't very satisfied with my website lately. It was lacking in content, performance and SEO.

SvelteKit (Svelte) and Tailwind CSS were things I wanted to try out for a while now, so it made perfect sense to use them to build my new website.

SvelteKit

SvelteKit and Svelte make so much sense to me in this modern era of front-end that I can't imagine building websites like this one with anything else right now. That's how much I enjoyed them.

For (sort-of static) websites like this, having everything happen at build time and then saving all that time for the end-user once deployed is the perfect choice. SvelteKit endpoints are a stroke of genius. It also includes TypeScript support out-of-the-box and Vite.

Overall it was an amazing developer experience and I assume it's only going to get better in time.

Tailwind CSS

Tailwind CSS is something I haven't tried before this but was already aware of its pros and cons. For something like a personal website, where I want to make as many little adjustments as possible, for a really personalized experience, I think it's a good choice.

I even went the extra mile and deleted some CSS classes I created earlier, just so I use Tailwind's utility classes instead, to really get into it.

Should have probably modularize more into components for a DRY-er approach, but it is what it is.

Cloudflare

A friend mentioned I should give Cloudflare Pages a try for my next Jamstack project, and I did. It was a nice developer experience and, as you can see, the website is super fast.

Due to the way Svelte works, if I create content like a new repo or Medium story for example, the website doesn't update to reflect that new content - It needs a rebuild. For that, I created a build webhook and then a Cloudflare worker with a CRON job to rebuild the site, assuring that it's always up to date:

addEventListener("scheduled", (event) => {
  event.waitUntil(handleScheduled(event.scheduledTime));
});

async function handleScheduled(request) {
  return fetch("https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/MY_WEBHOOK", {
    method: 'POST'
  });
}

The only thing I didn't appreciate that much was that I needed to create a page rule (only 3 free) to redirect non-www to www. Hopefully that's something they will integrate into Pages soon.

Still, being able to do all of this in such a nice way and for free would blow my younger self's mind.

Other

Surprisingly I didn't add many other things to my website:

• @sveltejs/adapter-static
• Iconify
• Svelte Lottie Player
• rss-parser

Only thing required for my setup was adapter-static.

Old website

If you're curious about the previous website, you can check the repo here: nunogois-website-nuxt-2018.

TODO

• Add Tailwind CSS (https://github.com/svelte-add/tailwindcss)
• Single index page with:
  • Home
  • About
  • Skills (dynamically loaded from GitHub profile)
  • Projects (dynamically loaded from GitHub, popular and latest)
  • Blog (dynamically loaded from Medium, order by date descending)
  • CV (external link to cv.nunogois.com)
  • Contact
• Properly handle some of the assets instead of linking to external URLs
• Responsiveness check and optimizations
• Cleanup
• SEO optimizations
• Publish to www.nunogois.com
• Announce: Twitter, LinkedIn, Instagram
• Figure out the best way of triggering builds (daily cron from Cloudflare worker, maybe)

BONUS

• Publish to new.nunogois.com while in development
• Add Lottie
• Make repo public
• Improve README.md
• Further SEO optimizations - Headers are apparently a big thing in SEO
• Even more SEO optimizations - Convert my name component into a simpler h1
• Add contact form
• Add recruit page
• Medium blog is ruining Lighthouse scores - fix it (maybe migrate to dev.to in the near future)
• Improve Lighthouse scores as much as possible

MAYBE?

• i18n with PT
• Add animations