A re-usable aggregated portfolio and blog site for developers
aliciasykes.com
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
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.
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.
# 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- 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.
Use the 1-click deploy to get up and running in seconds.
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.
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
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.
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.
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- Fonts
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)
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.
Alicia Sykes |
Alicia Bot |
Daniel Patterson |
Jess Porter |
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 <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 :)
