Crafting A Minimalist Portfolio Website with SvelteKit and Pico CSS

• Redis

  14 13,867 3.4 TypeScript

  🚀 A robust, performance-focused, and full-featured Redis client for Node.js.

  

To make data retrieval efficient and minimize the need to request data from the API on every page load, I implemented a caching strategy using the ioredis package, which is a popular redis client for Node.js for interacting with a Redis database.

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

However, the question of CSS styling remained. The vast ecosystem of Tailwind CSS, with its extensive class-based utility system and configurations, felt kind of overwhelming for my needs. On the other hand, creating styles entirely from scratch using pure CSS felt time-consuming and inefficient.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• portfolio

  1 3 8.0 Go

  Class-less personal portfolio & resume website built using Go, Templ, HTMX, and styled with Pico CSS. (by bagashiz)

After that, I set up a GitHub workflow to build and publish the Docker image to the GitHub Container Registry automatically.

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

Creating a portfolio website can be a practical way to showcase resumes, projects, and blogs. As someone who leans more towards backend development, I found myself in the situation of wanting to establish an online presence without drowning myself into the complexities of React or dealing with the manual development with plain HTML, CSS, and JavaScript. It was in the search for a simpler alternatives that I found Svelte, and its meta-framework, SvelteKit.

• Redis

  318 64,821 9.7 C

  Redis is an in-memory database that persists on disk. The data model is key-value, but many different kind of values are supported: Strings, Lists, Sets, Sorted Sets, Hashes, Streams, HyperLogLogs, Bitmaps.

  

To make data retrieval efficient and minimize the need to request data from the API on every page load, I implemented a caching strategy using the ioredis package, which is a popular redis client for Node.js for interacting with a Redis database.

• React

  1,694 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

Creating a portfolio website can be a practical way to showcase resumes, projects, and blogs. As someone who leans more towards backend development, I found myself in the situation of wanting to establish an online presence without drowning myself into the complexities of React or dealing with the manual development with plain HTML, CSS, and JavaScript. It was in the search for a simpler alternatives that I found Svelte, and its meta-framework, SvelteKit.

• pico

  65 12,325 9.3 CSS

  Minimal CSS Framework for semantic HTML

  

/*! * Minimal theme switcher * * Pico.css - https://picocss.com * Copyright 2019-2023 - Licensed under MIT */ /** * Minimal theme switcher * * @namespace * @typedef {Object} ThemeSwitcher * @property {string} _scheme - The current color scheme ("auto", "light", or "dark"). * @property {string} menuTarget - The selector for the menu element that contains theme switchers. * @property {string} buttonsTarget - The selector for theme switcher buttons. * @property {string} buttonAttribute - The attribute name used for theme switcher buttons. * @property {string} rootAttribute - The attribute name used for the root HTML element to store the selected theme. * @property {string} localStorageKey - The key used to store the preferred color scheme in local storage. */ export const ThemeSwitcher = { // Config _scheme: 'auto', menuTarget: "details[role='list']", buttonsTarget: 'a[data-theme-switcher]', buttonAttribute: 'data-theme-switcher', rootAttribute: 'data-theme', localStorageKey: 'picoPreferredColorScheme', /** * Initialize the theme switcher. * * @function * @memberof ThemeSwitcher */ init() { this.scheme = this.schemeFromLocalStorage || this.preferredColorScheme; this.initSwitchers(); }, /** * Get the color scheme from local storage or use the preferred color scheme. * * @function * @memberof ThemeSwitcher * @returns {string|null} The color scheme ("light", "dark", or null). */ get schemeFromLocalStorage() { if (typeof window.localStorage !== 'undefined') { if (window.localStorage.getItem(this.localStorageKey) !== null) { return window.localStorage.getItem(this.localStorageKey); } } return this._scheme; }, /** * Get the preferred color scheme based on user preferences. * * @function * @memberof ThemeSwitcher * @returns {string} The preferred color scheme ("light" or "dark"). */ get preferredColorScheme() { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }, /** * Initialize the theme switcher buttons and their click events. * * @function * @memberof ThemeSwitcher */ initSwitchers() { const buttons = document.querySelectorAll(this.buttonsTarget); buttons.forEach((button) => { button.addEventListener( 'click', (event) => { event.preventDefault(); // Set scheme this.scheme = button.getAttribute(this.buttonAttribute) || 'auto'; // Close dropdown document.querySelector(this.menuTarget)?.removeAttribute('open'); }, false ); }); }, /** * Set the selected color scheme and update the UI. * * @function * @memberof ThemeSwitcher * @param {string} scheme - The color scheme to set ("auto", "light", or "dark"). */ set scheme(scheme) { if (scheme == 'auto') { this.preferredColorScheme == 'dark' ? (this._scheme = 'dark') : (this._scheme = 'light'); } else if (scheme == 'dark' || scheme == 'light') { this._scheme = scheme; } this.applyScheme(); this.schemeToLocalStorage(); }, /** * Get the current color scheme. * * @function * @memberof ThemeSwitcher * @returns {string} The current color scheme ("auto", "light", or "dark"). */ get scheme() { return this._scheme; }, /** * Apply the selected color scheme to the HTML root element. * * @function * @memberof ThemeSwitcher */ applyScheme() { document.querySelector('html')?.setAttribute(this.rootAttribute, this.scheme); }, /** * Store the selected color scheme in local storage. * * @function * @memberof ThemeSwitcher */ schemeToLocalStorage() { if (typeof window.localStorage !== 'undefined') { window.localStorage.setItem(this.localStorageKey, this.scheme); } } };

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• SvelteKit

  611 17,685 9.8 JavaScript

  web development, streamlined (by sveltejs)

  

Creating a portfolio website can be a practical way to showcase resumes, projects, and blogs. As someone who leans more towards backend development, I found myself in the situation of wanting to establish an online presence without drowning myself into the complexities of React or dealing with the manual development with plain HTML, CSS, and JavaScript. It was in the search for a simpler alternatives that I found Svelte, and its meta-framework, SvelteKit.

• Font-Awesome

  211 72,999 5.0 JavaScript

  The iconic SVG, font, and CSS toolkit

  

The featured GitHub projects are dynamically retrieved through the power of the GitHub GraphQL API. The blog posts are seamlessly pulled in using the Dev.to API. Additionally, Redis is used to cache the GitHub and Dev.to API responses for 1 hour to reduce the number of API calls. Icons are provided by Font Awesome through their kit from the CDN. I've also implemented the new View Transition API feature to enhance the user experience.

Suggest a related project