AS93

81
22
2 MB
Feb, 2023
1 day ago
Svelte

✨ 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

A tutorial, for how to build something similar is available on DEV.to

A mirror of this repository is available at 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. 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

# 1. Clone the repo and cd into it (update username if you've forked)
git clone [email protected]: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 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 for your target environment.

Quick Deploy

Use the 1-click deploy to get up and running in seconds.

Depoly Devolio to Netlify

Depoly Devolio to Render

Deploy Devolio to Railway

Deploy Devolio to Vercel

Once you've got a fork of the repository, you can make changes to the 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 published on DockerHub under lissy93/devolio using this workflow

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 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 as a template, and run docker compose up

Test on PWD


Configuring

Basic Data

All site data is located in 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 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/. For more advanced theming, you can edit the content of the <style> blocks within individual routes and components.

Variables are split into the following files:

  • color-palette.scss - Colors
  • dimensions.scss - Sizes
  • media-queries.scss - Breakpoints
  • typography.scss - Fonts

Languages

The app is fully translatable, with all hard-coded copy located in locales. The users language can be detected automatically based on browser/ OS preference, or manually set using the dropdown in the UI. To add a new language, simply create a new file named by your locale's ISO code, populate the contents (use en as a template), then import it in app.

Currently, the following languages are supported:

  • English (en-GB)

More

If you'd like to configure anything else, then it should be pretty straight-forward by directly editing the specific routes or components. If you need any help with any of this, feel free to raise an issue :)


Community

Report an Issue

Found something that's not working? Open an issue, and describe the problem, steps to reproduce alond with expected and actual output. If relevant, also include details about your environment. I'll try and fix / respond to any tickets within 48-hours.

Contributing

Contributions of any kind are very welcome, and would be much appreciated. For Code of Conduct, see Contributor Convent.

To get started, fork the repo, make your changes, add, commit and push the code, then come back here to open a pull request. If you're new to GitHub or open source, this guide or the git docs may help you get started, but feel free to reach out if you need any support.

Submit a PR

Support

Sponsor Lissy93 on GitHub

Credits

Sponsors

koconder
Vincent Koc
peng1can
Peng1can
alydemah
Aly Mohamed
bgadrian
B.G.Adrian
tbjers
Torgny Bjers
emlazzarin
Eddy Lazzarin
AnandChowdhary
Anand Chowdhary
shrippen
Shrippen
bile0026
Zach Biles
UlisesGascon
Ulises Gascón
digitalarche
Digital Archeology
InDieTasten
InDieTasten
bmcgonag
Brian McGonagill
vlad-timofeev
Vlad Timofeev
helixzz
HeliXZz
forwardemail
Forward Email - Open-source & Privacy-focused Email Service (2023)
Bastii717
Bastii717
frankdez93
Frankdez93
ratty222
Brent
hernanpopper
Hernanpopper
NixyJuppie
Nixy
nrvo
Nrvo
mezza93
mezza93

Contributors

Lissy93
Alicia Sykes
liss-bot
Alicia Bot
xcpep
Daniel Patterson

Stargazers

Recent Star Gazers


Status

🐳 Build + Publish Multi-Platform Image 🏷️ Tag new Versions 🪞 Mirror to Codeberg 💓 Inserts Contributor & Sponsors


License

Lissy93/Devolio is licensed under MIT © Alicia Sykes 2022.
> For information, see TLDR Legal > MIT

Expand License
The MIT License (MIT)
Copyright (c) Alicia Sykes <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sub-license, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included install
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANT ABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

© Alicia Sykes 2023
Licensed under MIT

Thanks for visiting :)