CHORE: Cleaning up codebase
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m5s
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m5s
Moved component content to be above inline style blocks
This commit is contained in:
parent
da5f47a841
commit
051cd42fdb
GPG Key ID:
B44FAF5CD3964A56
@ -9,6 +9,47 @@
|
|||||||
import Loading from "$lib/components/Loading.svelte";
|
import Loading from "$lib/components/Loading.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#await getJson('/json/me.json')}
|
||||||
|
<Loading />
|
||||||
|
{:then info}
|
||||||
|
<div class="main-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h1>{info.name}</h1>
|
||||||
|
<h3 class="not-required">{info.job_title}</h3>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="flex-container">
|
||||||
|
<img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
|
||||||
|
<p class="about">{@html info.about}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Skills</h1>
|
||||||
|
<hr />
|
||||||
|
<div class="cards">
|
||||||
|
<Skills skills="{info.skills}"></Skills>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Experience</h1>
|
||||||
|
<hr />
|
||||||
|
<!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
|
||||||
|
<Timeline timelineData="{info.timeline}"></Timeline>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
|
||||||
|
<div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
|
||||||
|
{:catch}
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h1>Unable to load portfolio overview data</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
|
||||||
|
{/await}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.main-card {
|
.main-card {
|
||||||
background-color: var(--bg-secondary);
|
background-color: var(--bg-secondary);
|
||||||
@ -64,44 +105,3 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{#await getJson('/json/me.json')}
|
|
||||||
<Loading />
|
|
||||||
{:then info}
|
|
||||||
<div class="main-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h1>{info.name}</h1>
|
|
||||||
<h3 class="not-required">{info.job_title}</h3>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="flex-container">
|
|
||||||
<img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
|
|
||||||
<p class="about">{@html info.about}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>Skills</h1>
|
|
||||||
<hr />
|
|
||||||
<div class="cards">
|
|
||||||
<Skills skills="{info.skills}"></Skills>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>Experience</h1>
|
|
||||||
<hr />
|
|
||||||
<!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
|
|
||||||
<Timeline timelineData="{info.timeline}"></Timeline>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
|
|
||||||
<div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
|
|
||||||
{:catch}
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h1>Unable to load portfolio overview data</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
|
|
||||||
{/await}
|
|
||||||
@ -3,6 +3,18 @@
|
|||||||
import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
|
import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href = "/">//Profile</a>
|
||||||
|
<a href = "/repos">//Repos</a>
|
||||||
|
<a href = "/contact">//Contact</a>
|
||||||
|
<ThemeSwitcher />
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="main-container fade">
|
||||||
|
<Toasts />
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
@ -46,15 +58,3 @@
|
|||||||
100% { opacity: 1; }
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href = "/">//Profile</a>
|
|
||||||
<a href = "/repos">//Repos</a>
|
|
||||||
<a href = "/contact">//Contact</a>
|
|
||||||
<ThemeSwitcher />
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="main-container fade">
|
|
||||||
<Toasts />
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -29,6 +29,48 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<div slot="header">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
</div>
|
||||||
|
<div slot="content">
|
||||||
|
<form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
|
||||||
|
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
||||||
|
|
||||||
|
<!-- Form Items-->
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" id="name" name="name" required placeholder="Your Name" />
|
||||||
|
<input type="email" id="email" name="email" required placeholder="Your Email" />
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" name="subject" placeholder="Subject" required>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<textarea id="message" name="message" rows="4" required placeholder="Your Message" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hidden Attributes-->
|
||||||
|
<input type="hidden" name="replyTo" value="@">
|
||||||
|
<input type="text" name="honeypot" style="display: none;">
|
||||||
|
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
||||||
|
|
||||||
|
<!-- reCAPTCHA integration -->
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
||||||
|
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<button type="submit" class="submit-button">Send Message</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
|
||||||
|
<a href="mailto:contact@luke-else.co.uk">E-Mail</a>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
/* Contact form styling */
|
/* Contact form styling */
|
||||||
@ -105,42 +147,3 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<Card>
|
|
||||||
<div slot="header">
|
|
||||||
<h2>Contact</h2>
|
|
||||||
</div>
|
|
||||||
<div slot="content">
|
|
||||||
<form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
|
|
||||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" id="name" name="name" required placeholder="Your Name" />
|
|
||||||
<input type="email" id="email" name="email" required placeholder="Your Email" />
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" name="subject" placeholder="Subject" required>
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<textarea id="message" name="message" rows="4" required placeholder="Your Message" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="hidden" name="replyTo" value="@">
|
|
||||||
<input type="text" name="honeypot" style="display: none;">
|
|
||||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<!-- reCAPTCHA integration -->
|
|
||||||
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
|
||||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<button type="submit" class="submit-button">Send Message</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div slot="footer">
|
|
||||||
<a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
|
|
||||||
<a href="mailto:contact@luke-else.co.uk">E-Mail</a>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|||||||
@ -8,20 +8,6 @@
|
|||||||
let activeModal: any = null;
|
let activeModal: any = null;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.card-footer {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5em;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
color: var(--fg);
|
|
||||||
font-size: 3em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{#each skills as skill}
|
{#each skills as skill}
|
||||||
<Card on:click={() => {showModal = true; activeModal = skill}}>
|
<Card on:click={() => {showModal = true; activeModal = skill}}>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
@ -57,3 +43,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card-footer {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5em;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
color: var(--fg);
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user