simonbukin / personal-website Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 1.96 MB

My personal website, courtesy of SvelteKit.

Home Page: https://www.simonbukin.com

JavaScript 7.43% TypeScript 28.14% HTML 1.00% Svelte 57.82% CSS 5.61%

svelte sveltekit

personal-website's Introduction

personal-website

🚧 WIP 🚧

Hello! This is my revamped personal website. It's heavily in progress at the moment, but will soon contain a portfolio, blog, and about page.

It's built with SvelteKit. You should definitely try building with it, it's very neat.

TODO

✅ Add blog with static HTML for posts
- ✅ /blog/[slug].html
✅ Add static portfolio pages
- ✅ /portfolio/[slug]
- ✅ Add styling
Add playground for small, fun projects
- /fun/[slug]
✅ Add about page
✅ Finish homepage
- ✅ HeroText.svelte
- ✅ Projects.svelte

Building

To create a production version of the app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Credits

For setting up mdsvex and a LOT of other features: https://joyofcode.xyz/sveltekit-markdown-blog

personal-website's People

Contributors

Watchers

personal-website's Issues

Fix Shiki overflowing code snippets

'/svelte-scroll/' currently has overflow issues on mobile, expanding the horizontal viewport too far to the side. It might need to be constrained within the .container, but it already should be?

Disable scroll to top button when JS is disabled

Currently, the BackToTop component is reliant on JS to scroll to top. It should be disabled or hidden when JS is disabled.

Fix scrollbar appearing during full page transitions

The bottom scrollbar appears during full page transitions. It should be disabled in the ~600ms span where the page is transitioning.

Add catpuccino Shiki theme

Currently, I use catpuccino as my default VSCode theme. This requires a custom theme to be loaded in Shiki.

https://github.com/shikijs/shiki/blob/main/docs/themes.md

Add "back to top" + home link at bottom of blog/portfolio pages

"Related content" could be added as well (eg. blogs with the same tag, other portfolio pieces)

When navigating between different pages, it looks like the <svelte:head> tag is only included and set on certain pages, and not all of them, which results in the title of the page being stuck even after navigation.

For example, navigating to a project page and then back to the homepage keeps the tab title the same as the project title.

Add date formatting to `/blog/` and `/portfolio/`

The date returned from the load function is a full date object, which when .toStringed is a little unwieldy. It should be shortened and made friendly. Something like "Thursday, August 3rd, 2023" would be a good format.

Add About page

Currently, the /about/ page exists but is under construction. It should be fully constructed.

There is room here to add some custom components that track fun aspects of my work/life, like my Last.FM stats or Hardcover's currently reading list.

Add RSS.xml

Add an RSS download link generated from the blog posts in '/blog'

Add Blog link

Currently, /blog/[slug] is implemented, but not accessible in a reasonable way outside of manually typing the URL. A blog header should be added to the homepage and the /blog/ endpoint should be updated to list all blog posts.

Add full page transitions

Use a load function at +layout.ts to return the current pathname, and animate using Svelte transitions when the pathname changes.

Fix vertical scrollbar appearing during transition

This was previously fixed for horizontal scrollbars in #11 , but not for vertical ones.

Add custom transition for Apple devices

iOS devices support swiping right to go back a page, which looks pretty odd with the current full page transitions doing a slight move to the left. Should implemented a different animation based on the user-agent of the device.