A simple template for a portfolio website, with support for writing blogs in Markdown, and code highlighting.
See it in action at https://portfolio-template.omgenomics.com/
Create a copy of this repo by clicking Use this template, then clone your repo:
git clone https://github.com/YOUR_USERNAME/portfolio.git
npm install
npm run devThe main files to modify are:
- Configuration: src/lib/config.js - name, social media links, SEO tags, and navbar links
- Home page: src/routes/+page.svelte - about you, and highlighted projects
- Resume: src/routes/resume/+page.svelte - work experiences and education
- Articles: src/routes/articles/+page.svelte
- Talks: src/routes/talks/+page.svelte
To prettify and lint the code, you can run npm run format && npm run lint
To create a blog post at the url /some/made/up/route/some-topic, create the file src/routes/some/made/up/route/some-topic/+page.md (note the .md extension)
Specify the title and date at the top of the file:
---
title: How to install the bioinformatics tool XYZ
date: "June 10 2024"
---
Use Markdown to write your post, and use "```" around code blocks. To get syntax highlighting on your website, specify the language when you start the block:
```bash
echo $myVariable
```
```python
import pandas as pd
```
```R
abc <- c(1, 2, 3)
```
- See
src/routes/articles/install-xyz/+page.mdas an example. - See
src/components/BlogPost.svelteto change the template for Markdown articles.
- Add a new page by creating a file
src/routes/newpage/+page.svelteand using the pages above as templates to get you started. Then addnewpagetoNAVBAR_CATEGORIESin the filesrc/lib/config.js. - To remove a page, delete the folder
src/routes/oldpageand removeoldpagefrom the filesrc/lib/config.js.
- Create a Cloudflare account
- Under
Compute, clickWorkers & Pages,Pages, thenConnect to git - Connect your repo and select the
mainbranch. Now every time you push code to that branch, your changes will be automatically deployed! - Under Build Settings:
- Framework preset: SvelteKit
- Build command:
npm run build - Build output directory:
.svelte-kit/cloudflare
- To host your portfolio on a custom domain, see https://developers.cloudflare.com/pages/configuration/custom-domains/