lissy93/devolio
A developer portfolio site for the rest of us
151
An aggregated portfolio and blog site for developers
Demo: devolio.as93.net
A tutorial, for to this project is available on DEV.to
A mirror is available at codeberg.org/alicia/devolio
Devolio is a self-hosted developer homepage, where you can showcase your projects, blog posts, coding stats and more.
Data fetched from existing sources (GitHub, RSS, Dev.to etc), so there's no backend to manage.
It's easy to make it your own, with custom styles and a simple config file.
The app is split into several pages: Portfolio | Blog | Contact | About
Portfolio
The portfolio page displays the projects you've built. Data is fetched from your GitHub profile.
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.
You can add or override any project data in the config file, as well as manually add more projects.
Blog
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.
Start typing to filter results, and use the keyboard to navigate posts.
There's also the option to include secondary feeds, which can be toggled by the user using the dropdown menu. This may be useful for including less important updates, without them cluttering up your main feed.
Contact
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
The about page has space for a short bio, profile image, and work experience.
✅ Localized with multi-language support
✅ Unit tested
✅ Fast load speeds
✅ Server-side rendering for good SEO
✅ Meets accessibility standards
✅ Fully responsive
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.
# 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
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.
Use the 1-click deploy to get up and running in seconds.
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
Alternatively, use the docker-compose.yml
as a template, and run docker compose up
You can pass in your own config.ts
with -v ./my-config.ts:/app/src/helpers/config.ts
, and rebuild with docker exec -it [container-id] yarn build
where container ID can be found with docker ps
)
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 specifiedTWITTER_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
- Colorsdimensions.scss
- Sizesmedia-queries.scss
- Breakpointstypography.scss
- FontsLanguages
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:
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 :)
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.
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.
Sponsors
Peng1can | Eddy Lazzarin | Anand Chowdhary | David Young | Carol Ouellet | Zach Biles |
Ulises Gascón | Brian McGonagill | Vlad Timofeev | Jason Ash | DRXAquosus | Brent |
Jtfinley72 |
Contributors
Stargazers
Lissy93/Devolio is licensed under MIT © Alicia Sykes 2022.
> For information, see TLDR Legal > MIT
The MIT License (MIT)
Copyright (c) Alicia Sykes <alicia@omg.com>
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 :)
docker pull lissy93/devolio