Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Lissy93/my-website
✨ My personal homepage. A developer portfolio site that aggregates all your projects, blog posts, and stats in one place
https://github.com/Lissy93/my-website
blog personal-website portfolio rss svelte
Last synced: 2 months ago
JSON representation
✨ My personal homepage. A developer portfolio site that aggregates all your projects, blog posts, and stats in one place
- Host: GitHub
- URL: https://github.com/Lissy93/my-website
- Owner: Lissy93
- Created: 2023-02-05T16:43:01.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-08T01:59:49.000Z (4 months ago)
- Last Synced: 2024-09-08T03:13:53.905Z (4 months ago)
- Topics: blog, personal-website, portfolio, rss, svelte
- Language: Svelte
- Homepage: https://aliciasykes.com
- Size: 2.43 MB
- Stars: 109
- Watchers: 2
- Forks: 30
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
✨ 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 [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](#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.
[](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/devolio 'Deploy Devolio to Render, via 1-Click Script')
[](https://render.com/deploy?repo=https://github.com/lissy93/devolio 'Deploy Devolio to Render, via 1-Click Script')
[](https://railway.app/new/template/hROvhb 'Deploy Devolio to Railway, via 1-Click Script')
[](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`
[](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 `` 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](https://github.com/Lissy93/devolio/issues/new/choose), 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](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).
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](https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3#let-s-make-our-first-pull-request-) or the [git docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) may help you get started, but feel free to reach out if you need any support.
[](https://github.com/Lissy93/devolio/compare)
### Support
[](https://github.com/sponsors/Lissy93)
### Credits
#### Sponsors
<!-- readme: sponsors -start -->
<table>
<tr>
<td align="center">
<a href="https://github.com/koconder">
<img src="https://avatars.githubusercontent.com/u/25068?u=582657b23622aaa3dfe68bd028a780f272f456fa&v=4" width="80;" alt="koconder"/>
<br />
<sub><b>Vincent Koc</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/tbjers">
<img src="https://avatars.githubusercontent.com/u/1117052?v=4" width="80;" alt="tbjers"/>
<br />
<sub><b>Torgny Bjers</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/AnandChowdhary">
<img src="https://avatars.githubusercontent.com/u/2841780?u=747e554b3a7f12eb20b7910e1c87d817844f714f&v=4" width="80;" alt="AnandChowdhary"/>
<br />
<sub><b>Anand Chowdhary</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/shrippen">
<img src="https://avatars.githubusercontent.com/u/2873570?v=4" width="80;" alt="shrippen"/>
<br />
<sub><b>Shrippen</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/bile0026">
<img src="https://avatars.githubusercontent.com/u/5022496?u=aec96ad173c0ea9baaba93807efa8a848af6595c&v=4" width="80;" alt="bile0026"/>
<br />
<sub><b>Zach Biles</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/UlisesGascon">
<img src="https://avatars.githubusercontent.com/u/5110813?u=3c41facd8aa26154b9451de237c34b0f78d672a5&v=4" width="80;" alt="UlisesGascon"/>
<br />
<sub><b>Ulises Gascón</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/digitalarche">
<img src="https://avatars.githubusercontent.com/u/6546135?u=564756d7f44ab2206819eb3148f6d822673f5066&v=4" width="80;" alt="digitalarche"/>
<br />
<sub><b>Digital Archeology</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/InDieTasten">
<img src="https://avatars.githubusercontent.com/u/7047377?u=8d8f8017628b38bc46dcbf3620e194b01d3fb2d1&v=4" width="80;" alt="InDieTasten"/>
<br />
<sub><b>InDieTasten</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/araguaci">
<img src="https://avatars.githubusercontent.com/u/7318668?v=4" width="80;" alt="araguaci"/>
<br />
<sub><b>Araguaci</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/bmcgonag">
<img src="https://avatars.githubusercontent.com/u/7346620?u=2a0f9284f3e12ac1cc15288c254d1ec68a5081e8&v=4" width="80;" alt="bmcgonag"/>
<br />
<sub><b>Brian McGonagill</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/vlad-tim">
<img src="https://avatars.githubusercontent.com/u/11474041?u=eee43705b54d2ec9f51fc4fcce5ad18dd17c87e4&v=4" width="80;" alt="vlad-tim"/>
<br />
<sub><b>Vlad</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/helixzz">
<img src="https://avatars.githubusercontent.com/u/12218889?u=d06d0c103dfbdb99450623064f7da3c5a3675fb6&v=4" width="80;" alt="helixzz"/>
<br />
<sub><b>HeliXZz</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/patvdv">
<img src="https://avatars.githubusercontent.com/u/12430107?u=e8911c2fb91af4d30432f76da8c40927b2830bd7&v=4" width="80;" alt="patvdv"/>
<br />
<sub><b>Patrick Van Der Veken</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/mryesiller">
<img src="https://avatars.githubusercontent.com/u/24632172?u=0d20f2d615158f87cd60a3398d3efb026c32f291&v=4" width="80;" alt="mryesiller"/>
<br />
<sub><b>Göksel Yeşiller</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/forwardemail">
<img src="https://avatars.githubusercontent.com/u/32481436?v=4" width="80;" alt="forwardemail"/>
<br />
<sub><b>Forward Email - Open-source & Privacy-focused Email Service (2023)</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Bastii717">
<img src="https://avatars.githubusercontent.com/u/53431819?u=604977bed6ad6875ada890d0d3765a4cacc2fa14&v=4" width="80;" alt="Bastii717"/>
<br />
<sub><b>Bastii717</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/getumbrel">
<img src="https://avatars.githubusercontent.com/u/59408891?v=4" width="80;" alt="getumbrel"/>
<br />
<sub><b>Umbrel</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/frankdez93">
<img src="https://avatars.githubusercontent.com/u/87549420?v=4" width="80;" alt="frankdez93"/>
<br />
<sub><b>Frankdez93</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/terminaltrove">
<img src="https://avatars.githubusercontent.com/u/121595180?v=4" width="80;" alt="terminaltrove"/>
<br />
<sub><b>Terminal Trove</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/nrvo">
<img src="https://avatars.githubusercontent.com/u/151435968?u=e1dcb307fd0efdc45cddbe9490a7b956e4da6835&v=4" width="80;" alt="nrvo"/>
<br />
<sub><b>Nrvo</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/hudsonrock-partnerships">
<img src="https://avatars.githubusercontent.com/u/163282900?v=4" width="80;" alt="hudsonrock-partnerships"/>
<br />
<sub><b>hudsonrock-partnerships</b></sub>
</a>
</td></tr>
</table>
<!-- readme: sponsors -end -->
#### Contributors
<!-- readme: contributors -start -->
<table>
<tr>
<td align="center">
<a href="https://github.com/Lissy93">
<img src="https://avatars.githubusercontent.com/u/1862727?v=4" width="80;" alt="Lissy93"/>
<br />
<sub><b>Alicia Sykes</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/liss-bot">
<img src="https://avatars.githubusercontent.com/u/87835202?v=4" width="80;" alt="liss-bot"/>
<br />
<sub><b>Alicia Bot</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/xcpep">
<img src="https://avatars.githubusercontent.com/u/3266614?v=4" width="80;" alt="xcpep"/>
<br />
<sub><b>Daniel Patterson</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/jesopo">
<img src="https://avatars.githubusercontent.com/u/11245819?v=4" width="80;" alt="jesopo"/>
<br />
<sub><b>Jess Porter</b></sub>
</a>
</td></tr>
</table>
<!-- readme: contributors -end -->
#### Stargazers
[](https://github.com/Lissy93/devolio/stargazers)
---
## Status
[](https://github.com/Lissy93/devolio/actions/workflows/docker-build-publish.yml) [](https://github.com/Lissy93/devolio/actions/workflows/tag-versions.yml) [](https://github.com/Lissy93/devolio/actions/workflows/sync-mirror.yml) [](https://github.com/Lissy93/devolio/actions/workflows/insert-contributors.yml)
---
## License
> _**[Lissy93/Devolio](https://github.com/Lissy93/devolio)** is licensed under [MIT](https://gist.github.com/Lissy93/143d2ee01ccc5c052a17) © [Alicia Sykes](https://aliciasykes.com) 2022._<br> > <sup align="right">For information, see <a href="https://tldrlegal.com/license/mit-license">TLDR Legal > MIT</a></sup>
<details>
<summary>Expand License</summary>
```
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.
```
</details>
---
<!-- License + Copyright -->
<p align="center">
<i>© <a href="https://aliciasykes.com">Alicia Sykes</a> 2023</i><br>
<i>Licensed under <a href="https://gist.github.com/Lissy93/143d2ee01ccc5c052a17">MIT</a></i><br>
<a href="https://github.com/lissy93"><img src="https://i.ibb.co/4KtpYxb/octocat-clean-mini.png" /></a><br>
<sup>Thanks for visiting :)</sup>
</p>
<!-- Dinosaur -->
<!--
. - ~ ~ ~ - .
.. _ .-~ ~-.
//| \ `..~ `.
|| | } } / \ \
(\ \\ \~^..' | } \
\`.-~ o / } | / \
(__ | / | / `.
`- - ~ ~ -._| /_ - ~ ~ ^| /- _ `.
| / | / ~-. ~- _
|_____| |_____| ~ - . _ _~_-_
-->