luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Created skill cards

Browse Source
This commit is contained in:
Luke Else
2023-09-25 21:38:42 +01:00
parent abe1ea2055
commit e6c45567f2
3 changed files with 101 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark" />
%sveltekit.head%
@ -29,6 +30,23 @@
margin: 2rem;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--green);
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@media (max-width: 800px) {
.not-required {
display: none;

75
src/main.svelte
View File

@ -5,7 +5,7 @@
</script>
<style>
.card {
.main-card {
background-color: var(--bg-grad);
border-radius: 1em;
padding: .2em 2em 2em 2em;
@ -52,6 +52,56 @@
margin-bottom: 1em;
}
.card-header .logo {
color: var(--fg);
font-size: 3em;
}
/* Skills Cards CSS */
.skills-container {
max-width: 90%;
padding: 0em 2em;
margin: 0em auto;
}
.cards {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 3em 3em;
justify-content: center;
padding: 3em 1em 2em 0em;
list-style: none;
transition: all 0.2s;
}
.card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 20%;
padding: .5em 2.5em 2em 2.5em;
background: var(--bg-grad);
border-radius: .5em;
scroll-snap-align: start;
transition: all 0.2s;
}
.card:hover {
box-shadow: .5em .5em .5em var(--cyan);
}
.card .card-content {
margin: 1em 0;
max-width: 85%;
}
.card .card-footer {
display: flex;
justify-content: space-between;
margin-top: auto;
}
</style>
{#await getJson('/json/me.json')}
@ -61,7 +111,7 @@
</div>
</div>
{:then info}
<div class="card">
<div class="main-card">
<div class="card-header">
<h1>{info.name}</h1>
<h3 class="not-required">{info.job_title}</h3>
@ -72,6 +122,27 @@
<p class="about">{@html info.about}</p>
</div>
</div>
<div class="skills-container">
<ul class="cards">
{#each info.skills as skill}
<li class="card">
<div>
<div class="card-header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
</div>
<div class="card-content">
<p class="not-required">{skill.about}</p>
</div>
</div>
<div class="card-footer">
<a href="/repos">Repos</a>
</div>
</li>
{/each}
</ul>
</div>
{:catch}
<div class="card">
<div class="card-header">