Portfolio Svelte

screenshot of Portfolio Svelte
svelte
vite
scss

Portfolio Svelte

My over-complicated personal site. A place to show off work and writing, and a place to try weird stuff.

Overview:

ryanfiller.com is a personal portfolio site and blog that showcases the owner's coding abilities. It serves as a platform to display projects and write blog posts. The site is built using Svelte & SvelteKit and is hosted on Netlify. It prioritizes user privacy by eschewing invasive analytics tracking.

Features:

  • Parsing Markdown Files: The site allows for the creation and publishing of blog posts by parsing markdown files.
  • Serving Images: It uses git LFS to store and serve images associated with the blog posts.
  • Testing Setup: The site is equipped with Cypress and accessibility extensions for running basic tests.
  • Hosting on Netlify: Netlify is used for hosting the site and Netlify Large Media acts as the image transformer and CDN.
  • Privacy-focused Analytics: The site employs Netlify Analytics to anonymously track server requests and uses GoatCounter to gather insights on browser usage and screen sizes.
  • Roadmap: The owner maintains a list of planned features and known bugs.
  • Bug Reporting: Users can file issues or communicate through Twitter for reporting any broken elements.
  • Open Source License: The site is a public repository released under the MIT license, allowing others to replicate and utilize the code.

Installation:

To install the ryanfiller.com theme, follow these steps:

  1. Clone the repository.
  2. If you want to access the images, make sure to install git LFS as well.
  3. Install the required dependencies, including Svelte and SvelteKit.
  4. Navigate to the site's directory and run it.
  5. Access the site by visiting http://localhost:3000.

Summary:

ryanfiller.com is a personal portfolio site and blog built using Svelte & SvelteKit. It offers features such as parsing markdown files for blog posts, serving images, and conducting basic tests using Cypress. The site prioritizes user privacy by avoiding invasive analytics tracking and utilizes Netlify for hosting and Netlify Large Media for image transformation and CDN. The owner maintains a roadmap and encourages bug reporting to ensure an optimal browsing experience. The site is open source, released under the MIT license, and allows others to use the code while respecting the original content.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

netlify
Netlify

Netlify is a cloud-based web development platform that provides a range of tools and services to help developers build, deploy, and manage modern web applications. It offers features such as continuous deployment, serverless functions, and CDN hosting, making it an ideal platform for building fast, scalable, and secure websites.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.