✨ My Website

A re-usable aggregated portfolio and blog site for developers
aliciasykes.com

## Intro This is my personal website. It's configurable, so feel free to use it, or any parts of it for yourself :) **About**
A self-hosted developer homepage, to showcase your projects, posts, coding stats, and more.
Data is fetched from external sources (GitHub, RSS, social platforms...), so no need for a CMS.
Crafted with SvelteKit + TypeScript- prioritising SEO, performance, accessibility, and compatibility.
**Contents** - [**Intro**](#intro) - [**Usage Guides**](#developing) - [Developing](#developing) - [Deploying](#deploying) - [Configuring](#configuring) - [**Community**](#community) - [Report an Issue](#report-an-issue) - [Contributing](#contributing) - [Support](#support) - [Credits](#credits) - [**License**](#license) _{A tutorial, for how to build something similar is available on **[DEV.to](https://dev.to/lissy93/sveltekit-10-build-an-blog-fetching-posts-from-your-dev-profile-29f)**} ^{A mirror of this repository is available at **[codeberg.org/alicia/devolio](https://codeberg.org/alicia/devolio)**} ### Pages

Portfolio Page - Displays projects from GitHub

The portfolio page displays the projects you've built. Data is fetched from your GitHub profile, with optional extra fields added in the config. Each project can include: name, description, thumbnail, language, star/fork/issue count, license, size, date create/updated and links to the repo and project website. Featured projects can be made to span multiple cells, in order to display more info. When a thumbnail is present, the user can hover over the card to view full details. There's sorting and filtering options, useful if you've got a few hundred projects. Data is fetched dynamically from GitHub, but you can add or override any project data in the config file, as well as manually add more projects.

Blog Page - Displays articles from RSS

The blog page displays posts that you've published. Data is fetched and aggregated from one or more RSS feeds defined in the config. Post content is rendered as HTML, as well as metadata including author, date, link to original and optional thumbnail. The user can start typing to filter results, and use the keyboard to navigate posts.

Contact Page - Contact form, and social media summary

The contact page includes links to social profiles, a contact form, and space for GPG keys. Hover over the social media links, to show relevant user stats, like follower count, karma/ rep, join date and more. The contact form let's users write you a message, and include their name + mail address. Upon sending, the message will be emailed to you, using [EmailJS](https://emailjs.com). There's also space for including PGP key, and links to encrypted messenger apps.

About Page - Displays bio, work experience, tech stack

The about page has space for a short bio, profile image, work experience and tech stack.

### Tech

Quality Gates

✅ Localized with multi-language support
✅ Unit tested
✅ Fast load speeds
✅ Server-side rendering for good SEO
✅ Meets accessibility standards
✅ Fully responsive

Tech Stack

Built with Svelte, using SvelteKit (1.0.0) and written in TypeScript. The build system is Vite/ Rollup, with dependencies managed with PNPM. Standards implemented with ESLint and Prettier, with testing done using Vitest and Playwright. Styles are composed in SCSS with CSS variables for theming. There's an optional Dockerfile with a Deno web server.

--- ## Developing ```bash # 1. Clone the repo and cd into it (update username if you've forked) git clone git@github.com:Lissy93/devolio.git && cd devolio # 2. Install dependencies pnpm install # 3. Start the development server pnpm run dev -- --open ``` --- ## Deploying ### Manual Deploy - Fork the repo, then follow the steps above to clone and install dependencies - Make any desired changes (see [Configuring](#configuring) below) - Push changes to your repository - Enable the build action, to deploy to a service of your choice You can also build the site yourself `npm run build`, then either run `node build` to start the server, or use an appropriate [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. ### Quick Deploy Use the 1-click deploy to get up and running in seconds. [![Depoly Devolio to Netlify](https://img.shields.io/badge/Deploy-Netlify-%2330c8c9?style=for-the-badge&logo=netlify&labelColor=1e0e41 'Deploy Devolio to Netlify, via 1-Click Script')](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/devolio 'Deploy Devolio to Render, via 1-Click Script') [![Depoly Devolio to Render](https://img.shields.io/badge/Deploy-Render-%236c83fa?style=for-the-badge&logo=render&labelColor=1e0e41&logoColor=6c83fa)](https://render.com/deploy?repo=https://github.com/lissy93/devolio 'Deploy Devolio to Render, via 1-Click Script') [![Deploy Devolio to Railway](https://img.shields.io/badge/Deploy-Railway-%23853bce?style=for-the-badge&logo=railway&labelColor=1e0e41&logoColor=853bce)](https://railway.app/new/template/hROvhb 'Deploy Devolio to Railway, via 1-Click Script') [![Deploy Devolio to Vercel](https://img.shields.io/badge/Deploy-Vercel-%23ffffff?style=for-the-badge&logo=vercel&labelColor=1e0e41)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flissy93%2Fdevolio&env=GITHUB_TOKEN,TWITTER_TOKEN&project-name=devolio&repository-name=devolio_My-Developer-Portfolio 'Deploy Devolio to Vercel, via 1-Click Script') Once you've got a fork of the repository, you can make changes to the [`config.ts`](https://github.com/Lissy93/devolio/blob/master/src/helpers/config.ts) (and any other files) to customize the site, and once commited, this will be reflected in your live version. ### Docker Deploy There's a multi-arch [`Dockerfile`](https://github.com/Lissy93/devolio/blob/master/Dockerfile) published on DockerHub under [`lissy93/devolio`](https://hub.docker.com/r/docker/lissy93/devolio) using [this workflow](https://github.com/Lissy93/devolio/blob/master/.github/workflows/docker-build-publish.yml) To run the container directly from DockerHub or GHCR, use: `docker run -p 3000:80 lissy93/devolio` You'll likley want to make your own configuration file, use [`config.ts`](https://github.com/Lissy93/devolio/blob/master/src/helpers/config.ts) as a template, and pass it to the container with `-v ./my-config.ts:/app/src/helpers/config.ts`. To rebuild the app, or run any other commands, use `docker exec -it [container-id] yarn build` (where container ID can be found with `docker ps`). Alternatively, use the [`docker-compose.yml`](https://github.com/Lissy93/devolio/blob/master/docker-compose.yml) as a template, and run `docker compose up` [![Test on PWD](https://img.shields.io/badge/Try-Play_with_Docker-%232496ED?style=for-the-badge&logo=docker&labelColor=1e0e41)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/devolio/master/docker-compose.yml 'Deploy Devolio to PWD, via 1-Click Script') --- ## Configuring ### Basic Data All site data is located in [`config.ts`](https://github.com/Lissy93/devolio/blob/master/src/helpers/config.ts). Here you can specify site name, URLs to RSS feeds, GitHub username to fetch projects from, contact details, etc. ### Secrets Sensitive data, like API keys are set as environmental variables. These can either be set in the [`.env`](https://github.com/Lissy93/devolio/blob/master/.env) file, or in the admin panel for your hosting provider (e.g. for Netlify: Site settings --> Environmental Variables) Accepted Values - `GITHUB_TOKEN` - A scoped API key for fetching repositories, and displaying social stats on the contact page. Optional, but you may experience rate limits if not specified - `TWITTER_TOKEN` - Bearer token for showing follower count on the contact page. ### Styles Style values are managed with CSS variables, for easy configuration. These values are defined in the SCSS files within [`styles/`](https://github.com/Lissy93/devolio/tree/master/src/styles). For more advanced theming, you can edit the content of the `

AS93