- updated readme
All checks were successful
Node.js CI / build_image (push) Successful in 48s

- updated content on svelte projects page
This commit is contained in:
ChrQR 2024-05-17 21:32:25 +02:00
parent 5d9e6bfda0
commit 7b16965ab9
3 changed files with 29 additions and 43 deletions

View File

@ -1,38 +1,10 @@
# create-svelte This is a portfolio application built to showcase my projects and try out the svelte framework.
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). It is built using:
## Creating a project - Svelte / Sveltekit
- Tailwind CSS
If you're seeing this, you've probably already done this step. Congrats! The gitea workflow builds docker image and pushed it to this registry. It is then deploy to my infrastructure which you can read more about [here](https://rannes.dev/homelab)
```bash The project is hosted at [rannes.dev](https://rannes.dev).
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
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.

View File

@ -44,13 +44,15 @@
<li class="nav-item font-jose inline-block"> <li class="nav-item font-jose inline-block">
<a <a
href={main.name} href={main.name}
class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'} class={selected == nav[i]
? 'nav-link text-2xl p-3 hover:text-slate-400'
: 'nav-link text-2xl p-3 hover:text-slate-400'}
on:click={changeComponent} on:click={changeComponent}
id={i}>{main.name}</a id={i}>{main.name}</a
> >
</li> </li>
{:else} {:else}
<li class="nav-item font-jose inline-block"> <li class="nav-item font-jose inline-block hover:text-slate-400">
<button <button
class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'} class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'}
on:click={changeComponent} on:click={changeComponent}
@ -65,7 +67,7 @@
{#key selected} {#key selected}
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1"> <ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage} {#each selected.subPages as subPage}
<li class="sub-nav-item inline-block font-jose"> <li class="sub-nav-item inline-block font-jose hover:text-slate-400">
<a class="sub-nav-link text-xl p-2" href={subPage}>{subPage.replace(/_/g, ' ')}</a> <a class="sub-nav-link text-xl p-2" href={subPage}>{subPage.replace(/_/g, ' ')}</a>
</li> </li>
{/each} {/each}

View File

@ -1,9 +1,21 @@
<script> <script>
import { fade } from 'svelte/transition';
import { fade } from "svelte/transition";
</script> </script>
<div in:fade> <div in:fade>
<h1 class="text-2xl">Svelte Portfolio Page</h1> <h1 class="text-2xl">Svelte Portfolio Page</h1>
<p>This portfolio is built using <span class="font-normal">Svelte & Svelte kit</span> and <span class="font-normal">Tailwind CSS</span> as a simple static page.</p> <p>
</div> This portfolio is built using <span class="font-normal">Svelte & Svelte kit</span> and
<span class="font-normal">Tailwind CSS</span> as a simple static page.
</p>
<p>
<a
class="underline font-normal hover:text-slate-400"
href="https://gitea.rannes.dev/rannes.dev/my-portfolio">The git repo is available here.</a
>The gitea workflow builds a docker image and pushes it to the projects registry. It is then
deployed to my infrastructure.
<a class="underline font-normal hover:text-slate-400" href="https://rannes.dev/homelab"
>Read more about that here.</a
>
</p>
</div>