mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-05-01 19:41:22 +00:00
Merge pull request #216 from bartvdbraak/docs/readme-update
Update README and add project structure
This commit is contained in:
GitHub
commit
8d07d3ec7b
3 changed files with 29 additions and 33 deletions
38
README.md
38
README.md
|
|
@ -1,6 +1,6 @@
|
|||
<div align="center">
|
||||
<a href="https://hellob.art/"><img src="https://github.com/bartvdbraak/hellob.art/assets/3996360/365337f4-0ad8-4107-bcb1-8a4843ceae94" alt="hellob.art" width="30%"></a>
|
||||
<p><em>Personal website built with Svelte</em></p>
|
||||
<p><em>current work and studies in a SvelteKit-based portfolio</em></p>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
|
@ -9,6 +9,10 @@
|
|||
<a href="https://github.com/bartvdbraak/hellob.art/deployments/activity_log?environment=Production"><img src="https://img.shields.io/github/deployments/bartvdbraak/hellob.art/production?label=vercel&logo=vercel" /></a>
|
||||
</div>
|
||||
|
||||
## Description
|
||||
|
||||
This is a personal website built with Svelte and SvelteKit. It includes a variety of components and routes, and it's styled with Tailwind CSS. The project is set up with a number of quality assurance tools, including ESLint, Prettier, and Husky.
|
||||
|
||||
## Installation
|
||||
|
||||
To install the project and its dependencies, follow these steps:
|
||||
|
|
@ -42,13 +46,18 @@ pnpm run dev
|
|||
pnpm run dev -- --open
|
||||
```
|
||||
|
||||
## Technologies Used
|
||||
## Project Structure
|
||||
|
||||
- **Svelte:** The framework used for building this portfolio project.
|
||||
- **SvelteKit:** The tooling and routing framework for Svelte projects.
|
||||
- **Tailwind CSS:** A utility-first CSS framework packed with classes.
|
||||
- **Skeleton:** UI Toolkit for Svelte + Tailwind.
|
||||
- **Threlte:** Declarative Three.js for Svelte.
|
||||
This project has the following structure:
|
||||
|
||||
- `src/`: This is where the main application code is stored. This includes:
|
||||
- `app.d.ts`, `app.html`, `app.pcss`: Main application files.
|
||||
- `lib/`: Contains assets, components, config, content, etc.
|
||||
- `routes/`: Contains routing layout, pages and server-side code.
|
||||
- `styles/`: Contains style files.
|
||||
- `static/`: Contains static files like `browserconfig.xml`, `site.webmanifest`, and fonts.
|
||||
- `.github/`: Contains GitHub related files like `dependabot.yml`, `renovate.json`, and workflows.
|
||||
- Configuration files: `.eslintignore`, `.eslintrc.cjs`, `.gitignore`, `.npmrc`, `.prettierignore`, `.prettierrc`, `postcss.config.cjs`, `svelte.config.js`, `tailwind.config.js`, `tsconfig.json`, `vite.config.ts`.
|
||||
|
||||
## Contributing
|
||||
|
||||
|
|
@ -56,17 +65,4 @@ I'm open to contributions! If you find any bugs, have suggestions, or want to ad
|
|||
|
||||
## License
|
||||
|
||||
This project is licensed under the GPLv3 License. Feel free to explore, learn, and have fun!
|
||||
|
||||
Some dependencies may hold different licenses but are in compliance with GPLv3:
|
||||
|
||||
- `MIT`: Compatible with GPLv3.
|
||||
- `Apache 2.0`: Compatible with GPLv3.
|
||||
- `BSD-3-Clause`: Compatible with GPLv3.
|
||||
- `BSD-2-Clause`: Compatible with GPLv3.
|
||||
- `ISC`: Compatible with GPLv3.
|
||||
- `Python-2.0`: Compatible with GPLv3. (Note: Python has its own license, and version 2.0 is compatible with GPLv3).
|
||||
- `CC-BY-4.0`: This is a Creative Commons license, which is not a software license. It's generally not recommended to include CC licenses in software projects due to potential compatibility issues. This might cause complications if you choose GPLv3.
|
||||
- `CC0-1.0`: Not a software license, but it is explicitly designed to waive all copyrights, making it effectively compatible with GPLv3.
|
||||
- `0BSD`: Compatible with GPLv3.
|
||||
- `(MIT OR CC0-1.0)`: MIT is compatible with GPLv3, and CC0-1.0 is effectively compatible with GPLv3.
|
||||
This project is licensed under the terms of the [LICENSE](LICENSE) file.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 MiB After Width: | Height: | Size: 2.2 MiB |
|
|
@ -1,5 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Button } from '../ui/button';
|
||||
import { Eye } from 'lucide-svelte';
|
||||
|
||||
export let images: { src: string; alt: string; style?: string }[] = [];
|
||||
|
||||
|
|
@ -30,19 +32,17 @@
|
|||
class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style}"
|
||||
/>
|
||||
{/each}
|
||||
<div class="absolute bottom-[5%] left-[50%] grid translate-x-[-50%] grid-flow-col gap-2">
|
||||
<div class="absolute bottom-[2.5%] left-[50%] grid translate-x-[-50%] grid-flow-col gap-2">
|
||||
{#each images as _, i (_.src)}
|
||||
<button on:click={() => handleMarkerClick(i)} aria-label="select image">
|
||||
<svg height="20" width="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle
|
||||
cx="8"
|
||||
cy="8"
|
||||
r="8"
|
||||
class:current-marker={index === i}
|
||||
class="transition-fill fill-gray-500 duration-500 ease-out"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<Button
|
||||
variant="outline"
|
||||
class={index === i ? 'opacity-80' : 'opacity-30'}
|
||||
size="icon"
|
||||
aria-label={`Toggle image ${i + 1}`}
|
||||
on:click={() => handleMarkerClick(i)}
|
||||
>
|
||||
<Eye class="transition-fill ease-outmuted h-4 w-4 " />
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue