Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riadhadrani/slick-portfolio-svelte-5
The rewrite of the slick-portfolio-svelte using sveltekit (svelte 5) and shadcn-svelte
https://github.com/riadhadrani/slick-portfolio-svelte-5
portfolio svelte sveltekit template-repository typescript
Last synced: 2 days ago
JSON representation
The rewrite of the slick-portfolio-svelte using sveltekit (svelte 5) and shadcn-svelte
- Host: GitHub
- URL: https://github.com/riadhadrani/slick-portfolio-svelte-5
- Owner: RiadhAdrani
- Created: 2024-11-19T13:34:32.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-30T02:38:11.000Z (26 days ago)
- Last Synced: 2024-12-30T03:24:22.611Z (26 days ago)
- Topics: portfolio, svelte, sveltekit, template-repository, typescript
- Language: Svelte
- Homepage: https://riadhadrani.github.io/slick-portfolio-svelte-5/
- Size: 6.03 MB
- Stars: 7
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slick Portfolio With Svelte.
Vercel-like style portfolio template for developers.
[For a reference, check out my personal protfolio, slightly changed, but uses this template.](https://riadhadrani.github.io/RiadhAdrani)
## Libraries
The main libraries used here are :
- `shadcn-svelte` : component library.
- `tailwindcss` : css styling.
- `unocss` : fonts and icons.
- using `carbon` (and thus the icon names `i-carbon-*`) icons that could be browsed [here](https://icones.js.org/collection/carbon)
- `mode-watcher` : color mode utility.
- `prismjs` : markdown parsing in combination with `marked`, `marked-mangle`, `marked-gfm-heading-id` and `dompurify`.
## Create
You can either clone or fork this repository :
### `fork`
You can fork the project, maintaining a link to the original repo using the `fork` button, make sure the check the `Copy the master branch only` checkbox.
### `clone`
- using `git` :
```bash
# ssh
git clone [email protected]:RiadhAdrani/slick-portfolio-svelte-5.git protfolio
# https
git clone https://github.com/RiadhAdrani/slick-portfolio-svelte-5.git protfolio
```
- using `degit` npm executable :
```bash
npx degit RiadhAdrani/slick-portfolio-svelte-5 portfolio
```
if you don't have `degit`, it will prompt you to accept, enter `y`.
> You can add the main repo as another remote repo to maintain updates in the future.
>
> ```bash
> # ssh
> git remote add main [email protected]:RiadhAdrani/slick-portfolio-svelte-5.git
> ```
## Deploy to GitHub pages
Before deploying to `GitHub Pages`:
### Enable workflows for `Forks`
If you forked the repo, go to the `Actions` tab in the newly generated repository, and enable workflows, click on the green button `I understand my workflows, go ahead and enable them` :
### Actions Settings
Allow `GitHub Pages` in your repo settings with correct permissions:
- go to your repo `Settings` > `Actions` > `General`
- in `Actions permissions` : make sure that `Allow all actions and reusable workflows` checkbox is checked
### svelte.config.js
Depending on the name of your repository, you would like to set the `base` variable to that, starting with a leading slash like this:
```js
const base = '/slick-portfolio-svelte';
```
But if your repository name is the same as your Github domain name; my Github name is `RiadhAdrani` so my domain name is `riadhadrani.github.io` (lower cased), and so the special repository name is also `riadhadrani.github.io`: if that is the case, you need to set the base to an empty string
```js
const base = '';
```
### Launching the build and deploy workflow
If you didn't commit and push the changes in the `svelte.config.js` yet, you can do that now, otherwise you can create an empty commit:
```bash
git commit --allow-empty -m "chore: trigger workflow"
```
and push it to your `master` or `main` branch.
In the `Actions` tab, make sure that the `Build and Deploy` workflow is successful (wait for it to complete): you should have at least one successfull workflow run:
### Enable GitHub pages
- go to your repo's `Settings` > `Pages`
- in Source section, select `Deploy from a branch`.
- in Branch section, select `gh-pages` and `/ (root)` and click on save
Again in the `Actions` tab, make sure that the `pages-build-deployment` workflow is successful (wait for it to complete): you should have at least one successfull workflow run:
> If for some reason no action was launched, try pushing empty commit.
## That's it
That's it, you can click on the latest deployment and visit it.
## Adapt to your needs
If you want to use the template as it is, you can :
- update files in `src/lib/data` with your data.
- update `src/lib/index.css` for custom styling.
- update `src/lib/index.css` for custom markdown styling.
- update `static/favicon.png` to customize the tab's icon.
- You can find `shadcn-svelte` component in `src/lib/components/ui`, other components are arranged by their page, or in the `common` folder.
But feel free to explore and hack the template to your needs if you feel like it.
## Known issues:
- Svelte no longer support `node 14`, use a newer version instead.