Readme + motivation
- Remove boilerplate + Add my spiel
This commit is contained in:
parent
2a13698538
commit
3cbbbc2eab
40
README.md
40
README.md
@ -1,38 +1,28 @@
|
||||
# create-svelte
|
||||
# Website-2.0
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
A project to reface my old website, and treat it as a portfolio.
|
||||
|
||||
## Creating a project
|
||||
## Aim of Project and Motivation
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
Originally I downloaded a template from some random website and worked off that to create my very first website. Sure it looked nice, but it wasn't really made by me. So, starting mostly from scratch, I'm rebuilding this website into something better than it was before. For reference, here is a picture of the website as of creating this project:
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
![ReferenceImage](./readme-images/oldWebsite.png "The Old Website")
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
Another motivation behind the project is creating something more professional. For my endevours in the job-space, a portfolio site is an excellent foot in the door in showing an employer what you are capable of, and what you have done in your own time.
|
||||
|
||||
## Developing
|
||||
## Tools Used
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
I wanted to make something a lot simpler and use a more modern framework. So like every developer ~2020, my eyes were drawn immediately to rust. While Rust is cool, it just isn't suited for this sort of project. Maybe in a few years time Rust will have matured enough and have easier frameworks. [Check here for more information on the Rust web ecosystem](https://www.arewewebyet.org/)
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
Svelte seemed like the perfect mix between being something more modern than React, but with the familiarity of JavaScript and modern frameworks still present. Performance wise, it also holds up very well, and is a delight to work with.
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
## Starting Off
|
||||
|
||||
## Building
|
||||
Starting off, the easiest thing is creating a new logo. The previous logo is a screenshot of GTA 5 with a blur effect applied to make the text more visible. I'm a fan of the colourful visual style of this old logo, so wanted something as colourful, but with some more effort to make it truly mine.
|
||||
|
||||
To create a production version of your app:
|
||||
I created the NickBland logo with an SVG generator, so that it can scale infinitely, and added a colour bomb on each corner akin to something like the Festival of Colours in India. Here's the result:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
![New Dark Theme](./readme-images/splashDark.jpg "New Dark theme splash")
|
||||
![New Light Theme](./readme-images/splashLight.jpg "New Light theme splash")
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
In the exploratory phase of creating this theming, I initially wanted to create an animation where the burst would shoot out from either side of the screen -- at great expense to the user. While this seemed absolutely awesome in my head, I came to the realisation that people don't really care about that sort of stuff unless they can get to the content quickly.
|
||||
|
BIN
readme-images/oldWebsite.png
Executable file
BIN
readme-images/oldWebsite.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 702 KiB |
BIN
readme-images/splashDark.jpg
Executable file
BIN
readme-images/splashDark.jpg
Executable file
Binary file not shown.
After Width: | Height: | Size: 1.6 MiB |
BIN
readme-images/splashLight.jpg
Executable file
BIN
readme-images/splashLight.jpg
Executable file
Binary file not shown.
After Width: | Height: | Size: 2.3 MiB |
Loading…
Reference in New Issue
Block a user