mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 00:49:19 +02:00
Added better layout
This commit is contained in:
Jonas_Jones
parent
7054a8b7cf
commit
865526a219
4 changed files with 172 additions and 183 deletions
105
src/components/ProjectComponent.svelte
Normal file
105
src/components/ProjectComponent.svelte
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<script>
|
||||
export let project;
|
||||
import ProjectsLinks from "./ProjectsLinks.svelte";
|
||||
|
||||
import "../routes/+page.css";
|
||||
</script>
|
||||
|
||||
<div class="top">
|
||||
<img class="image" src="/project-banners{project.backgroud}" alt=" " />
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="content">
|
||||
<div class="project-topline">
|
||||
<div class="project-title">{project.title}</div>
|
||||
<div class="project-links">
|
||||
<ProjectsLinks {project} />
|
||||
<a
|
||||
class="project-status"
|
||||
style="color: {project.statuscolor};border-color:{project.statuscolor}"
|
||||
>{project.status}</a
|
||||
><a class="project-version">{project.version}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-description">{project.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.project-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 3px solid #dcdcdc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.project-version {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: -4px;
|
||||
padding: 2px;
|
||||
border: 3px solid #dcdcdc;
|
||||
border-radius: 100px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
align-items: right;
|
||||
text-align: right;
|
||||
align-content: right;
|
||||
}
|
||||
|
||||
.top {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.project-topline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
57
src/components/ProjectsLinks.svelte
Normal file
57
src/components/ProjectsLinks.svelte
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script>
|
||||
export let project;
|
||||
</script>
|
||||
|
||||
<div class="project-links">
|
||||
{#each Object.entries(project.links) as [platform, link]}
|
||||
<a
|
||||
class="project-link"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{#if platform === "GH"}
|
||||
<i class="fa fa-github" aria-hidden="true" />
|
||||
{:else if platform === "WB"}
|
||||
<i class="fa fa-globe" aria-hidden="true" />
|
||||
{:else if platform === "YT"}
|
||||
<i class="fa fa-youtube" aria-hidden="true" />
|
||||
{:else if platform === "TW"}
|
||||
<i class="fa fa-twitter" aria-hidden="true" />
|
||||
{:else if platform === "DC"}
|
||||
<i class="fa fa-discord" aria-hidden="true" />
|
||||
{:else if platform === "PT"}
|
||||
<i class="fa fa-patreon" aria-hidden="true" />
|
||||
{:else if platform === "SP"}
|
||||
<i class="fa fa-spotify" aria-hidden="true" />
|
||||
{:else if platform === "IG"}
|
||||
<i class="fa fa-instagram" aria-hidden="true" />
|
||||
{:else}
|
||||
{platform}
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.project-links {
|
||||
display: inline-block;
|
||||
align-items: right;
|
||||
text-align: right;
|
||||
align-content: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: var(--project-link-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
margin-top: 3px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: var(--project-link-color-hover);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import NavBar from "../../components/NavBar.svelte";
|
||||
import ParallaxBg from "../../components/ParallaxBg.svelte";
|
||||
import Padding from "../../components/padding.svelte";
|
||||
import ProjectComponent from "../../components/ProjectComponent.svelte";
|
||||
|
||||
import projects from "./projects.json";
|
||||
|
||||
|
|
@ -124,62 +125,7 @@
|
|||
<div class="project-container">
|
||||
{#each searchResults as project}
|
||||
<div class="project">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<h2 class="project-title">
|
||||
{project.title}<br class="smaller-screen" /><br
|
||||
class="smaller-screen"
|
||||
/><a
|
||||
class="project-status"
|
||||
style="color: {project.statuscolor};border-color:{project.statuscolor}"
|
||||
>{project.status}</a
|
||||
><a class="project-version">{project.version}</a>
|
||||
</h2>
|
||||
<p class="project-description">{project.description}</p>
|
||||
<div class="project-bg">
|
||||
<img
|
||||
src="/project-banners{project.backgroud}"
|
||||
alt=" "
|
||||
/>
|
||||
</div>
|
||||
<Padding />
|
||||
<Padding />
|
||||
<div class="project-links">
|
||||
<div>
|
||||
{#each Object.entries(project.links) as [platform, link]}
|
||||
<a
|
||||
class="project-link"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{#if platform === "GH"}
|
||||
<i class="fa fa-github" aria-hidden="true" />
|
||||
{:else if platform === "WB"}
|
||||
<i class="fa fa-globe" aria-hidden="true" />
|
||||
{:else if platform === "YT"}
|
||||
<i class="fa fa-youtube" aria-hidden="true" />
|
||||
{:else if platform === "TW"}
|
||||
<i class="fa fa-twitter" aria-hidden="true" />
|
||||
{:else if platform === "DC"}
|
||||
<i class="fa fa-discord" aria-hidden="true" />
|
||||
{:else if platform === "PT"}
|
||||
<i class="fa fa-patreon" aria-hidden="true" />
|
||||
{:else if platform === "SP"}
|
||||
<i class="fa fa-spotify" aria-hidden="true" />
|
||||
{:else if platform === "IG"}
|
||||
<i class="fa fa-instagram" aria-hidden="true" />
|
||||
{:else}
|
||||
{platform}
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a class="download-button" href="{project.links.GH}"
|
||||
>More Info</a
|
||||
>
|
||||
</div>
|
||||
<ProjectComponent {project} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -203,120 +149,13 @@
|
|||
}
|
||||
|
||||
.project {
|
||||
transition: background-color 0.3s;
|
||||
transition: filter 0.3s;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding-bottom: 50px;
|
||||
border: 2px solid var(--project-border-color);
|
||||
}
|
||||
|
||||
.project-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background-color: var(--project-background-color);
|
||||
}
|
||||
|
||||
.project-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.918),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.project:hover img {
|
||||
-webkit-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 3px solid #dcdcdc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.project-version {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: -4px;
|
||||
padding: 2px;
|
||||
border: 3px solid #dcdcdc;
|
||||
border-radius: 100px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: var(--project-link-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: var(--project-link-color-hover);
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin-left: 10px;
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
background-color: rgb(25, 25, 100);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-decoration: none;
|
||||
border: 3px solid rgb(0, 0, 100);
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
min-width: 200px;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
|
|
@ -348,21 +187,9 @@
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.smaller-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.project-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.smaller-screen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue