Created skill cards
This commit is contained in:
parent
1b33bd398d
commit
6b0af2fb3e
18
src/app.html
18
src/app.html
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<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="viewport" content="width=device-width" />
|
||||||
<meta name="color-scheme" content="dark" />
|
<meta name="color-scheme" content="dark" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
@ -29,6 +30,23 @@
|
|||||||
margin: 2rem;
|
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) {
|
@media (max-width: 800px) {
|
||||||
.not-required {
|
.not-required {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card {
|
.main-card {
|
||||||
background-color: var(--bg-grad);
|
background-color: var(--bg-grad);
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
padding: .2em 2em 2em 2em;
|
padding: .2em 2em 2em 2em;
|
||||||
@ -52,6 +52,56 @@
|
|||||||
margin-bottom: 1em;
|
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>
|
</style>
|
||||||
|
|
||||||
{#await getJson('/json/me.json')}
|
{#await getJson('/json/me.json')}
|
||||||
@ -61,7 +111,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:then info}
|
{:then info}
|
||||||
<div class="card">
|
<div class="main-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h1>{info.name}</h1>
|
<h1>{info.name}</h1>
|
||||||
<h3 class="not-required">{info.job_title}</h3>
|
<h3 class="not-required">{info.job_title}</h3>
|
||||||
@ -72,6 +122,27 @@
|
|||||||
<p class="about">{@html info.about}</p>
|
<p class="about">{@html info.about}</p>
|
||||||
</div>
|
</div>
|
||||||
</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}
|
{:catch}
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
|
|||||||
@ -5,18 +5,21 @@
|
|||||||
"skills" : [
|
"skills" : [
|
||||||
{
|
{
|
||||||
"skill": "Rust",
|
"skill": "Rust",
|
||||||
"logo": "test",
|
"logo": "devicon-rust-plain",
|
||||||
|
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate",
|
||||||
"mastery": 100
|
"mastery": 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"skill": "C++",
|
"skill": "Svelte",
|
||||||
"logo": "test",
|
"logo": "devicon-svelte-plain",
|
||||||
"mastery": 40
|
"about": "Lorem ipsum dolor sit alore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate",
|
||||||
|
"mastery": 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"skill": "Linux",
|
"skill": "Git",
|
||||||
"logo": "test",
|
"logo": "devicon-git-plain",
|
||||||
"mastery": 10
|
"about": "Lorem ipsum doerit in voluptate",
|
||||||
|
"mastery": 100
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>."
|
"about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>."
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user