SvelteKit

I used sveltekit to create this portfolio website. I decided to go with sveltekit because of the server-side rendering (SSR) and all of the SEO features, as well as making the website really fast. The fact that this, to me, is less than an actual framework as it relies heavily on vanilla HTML, CSS, and JavaScript is what I'm looking for.

In comparing all of the frameworks for the best one to use, my list is 1.) Sveltekit 2.) Astro 3.) React. I like Astro because it is really easy to use, and you can use any other framework's components you want. I can use svelte with astro, react with astro, etc. I put react as #3 because it is really verbose.. but it does the same thing that sveltekit and astro do.

I am very knowledgable to the fundamentals of web development. CSS is a real hobby that I have because I'm a very visual person. Sveltekit has made it super simple to put my ideas on the web.

The framework is based off of html. Javascript is used in a script tag, css is used in a style tag, just like you do it inline in html. Everything is scoped, so it makes it really easy to build things.

Svelte is a client based compiler that generates optimized javascript. Sveltekit is a framework that uses svelte under the hood. Think of how Nuxt is to Vue, or how Next is to React. In the end, sveltekit is a new approach to building rich user interfaces. Originally, svelte was created as a tool to build components for data visualization. It makes creating data visualizations super easy!

Svelte is usually used for SPA's (single page applications), but with sveltekit, you can use it's routing features to create a MPA's (multi-page applications). This is what I did with this website.

You need Node.js installed. Once you have it installed, you will use npm in your terminal. In your terminal, type cd folder to change the directory to whatever folder you want to create your project in. If you're at where you want to be at, type npm create svelte@latest. This will create a new sveltekit project. Once you have the project created, you will cd into the project and run npm install. This will install all of the dependencies that you need to run the project. Once you have the project installed, you will run npm run dev to start a development server and start the project. Now when you make changes to your code and press save, it will update on your development server without having to hit refresh! Also, this starts the project on http://localhost:5173.

Once you have the development server running, you can start building your project. You can use the src/routes folder to create new pages. You can use the src/lib folder to store and create new components or data for your project.

You can use the +layout.svelte file to create a layout for your project. You can use the +error.svelte file to create an error page. And +page.svelte creates a new page.