See it live at https://juliehill.rocks
- SvelteKit
- PostCSS
- TailwindCSS
- Flowbite
- Playwright
- mdsvex
- Prettier
- ESLint
- TypeScript
- Customizable and extensible
- Highlight skills with language logos on front page
- Add content via Markdown
This project was built from scratch using as much modern tooling and industry best-practice as possible. The repo is setup with branch protection and CI, CD is handled via Cloudflare Pages, commit messages are consistent and informative, and linting, formatting, and testing are all enforced.
Designed to be modular and reusable, other users can simply modify user.config.ts to use the app for their own personal site. Social media links can be added or removed, but the icon components will need to be imported in the config file to be used. Icon handling is not great, and requires an ambiguously defined subset of Devicons - as long as the icon has an SVG version with a filename of {language}-original.svg will work. Aiming to improve this behavior for public release.
Additional content can be added via Markdown files. Anything in $content/pages will get a Nav link generated for it and will be accessible via route /{filename}. MDsveX allows you to import any Markdown file to be used as a component, as such:
<script>
import Markdown from '$content/markdown.md'
</script>
<Markdown />Layout and styling need to be improved still.
I knew I wanted to use Svelte, so I started looking for a component library that was aesthetically pleasing to me and looked like it included all of the components I expected to use. I found several suitable ones, and considered Bootstrap, but Flowbite won me over thanks to the Tailwind underpinnings, which is another tool I'm not sure how I'd live without.
The goal is to demonstrate thoroughly modern, high quality, well-documented, and reusable code.
First off, go into tailwind.config.cjs and comment out my colors and uncomment the one you want instead
Then go into src/user.config.ts and set the values to what you want. Language deviconKey should be a string which will map to a Devicon SVG file with the filename pattern {deviconKey}-original.svg. Icon components for socials must be imported from the flowbite-svelte-icons package, which you can browse online here