From ee2098e6e68b31aa6f57f5a926418483876d9ccb Mon Sep 17 00:00:00 2001 From: Luke Else Date: Wed, 25 Oct 2023 10:54:39 +0100 Subject: [PATCH] Added timeline component to website --- src/{ => lib/components}/Card.svelte | 0 src/{ => lib/components}/Modal.svelte | 0 .../components}/Toasts/CloseIcon.svelte | 0 .../components}/Toasts/ErrorIcon.svelte | 0 .../components}/Toasts/InfoIcon.svelte | 0 .../components}/Toasts/SuccessIcon.svelte | 0 src/{ => lib/components}/Toasts/Toast.svelte | 0 src/{ => lib/components}/Toasts/Toasts.svelte | 0 src/lib/components/timeline/Timeline.svelte | 21 +++++++ .../timeline/TimelineConnector.svelte | 13 +++++ .../timeline/TimelineContent.svelte | 30 ++++++++++ .../components/timeline/TimelineDot.svelte | 19 ++++++ .../components/timeline/TimelineItem.svelte | 58 +++++++++++++++++++ .../timeline/TimelineOppositeContent.svelte | 31 ++++++++++ .../timeline/TimelineSeparator.svelte | 16 +++++ src/lib/index.ts | 38 ++++++++++++ src/lib/types.d.ts | 9 +++ src/main.svelte | 16 +++-- src/routes/+layout.svelte | 2 +- src/routes/contact/+page.svelte | 2 +- src/timeline.svelte | 56 ++++++++++++++++++ static/json/me.json | 19 +++++- 22 files changed, 323 insertions(+), 7 deletions(-) rename src/{ => lib/components}/Card.svelte (100%) rename src/{ => lib/components}/Modal.svelte (100%) rename src/{ => lib/components}/Toasts/CloseIcon.svelte (100%) rename src/{ => lib/components}/Toasts/ErrorIcon.svelte (100%) rename src/{ => lib/components}/Toasts/InfoIcon.svelte (100%) rename src/{ => lib/components}/Toasts/SuccessIcon.svelte (100%) rename src/{ => lib/components}/Toasts/Toast.svelte (100%) rename src/{ => lib/components}/Toasts/Toasts.svelte (100%) create mode 100644 src/lib/components/timeline/Timeline.svelte create mode 100644 src/lib/components/timeline/TimelineConnector.svelte create mode 100644 src/lib/components/timeline/TimelineContent.svelte create mode 100644 src/lib/components/timeline/TimelineDot.svelte create mode 100644 src/lib/components/timeline/TimelineItem.svelte create mode 100644 src/lib/components/timeline/TimelineOppositeContent.svelte create mode 100644 src/lib/components/timeline/TimelineSeparator.svelte create mode 100644 src/lib/types.d.ts create mode 100644 src/timeline.svelte diff --git a/src/Card.svelte b/src/lib/components/Card.svelte similarity index 100% rename from src/Card.svelte rename to src/lib/components/Card.svelte diff --git a/src/Modal.svelte b/src/lib/components/Modal.svelte similarity index 100% rename from src/Modal.svelte rename to src/lib/components/Modal.svelte diff --git a/src/Toasts/CloseIcon.svelte b/src/lib/components/Toasts/CloseIcon.svelte similarity index 100% rename from src/Toasts/CloseIcon.svelte rename to src/lib/components/Toasts/CloseIcon.svelte diff --git a/src/Toasts/ErrorIcon.svelte b/src/lib/components/Toasts/ErrorIcon.svelte similarity index 100% rename from src/Toasts/ErrorIcon.svelte rename to src/lib/components/Toasts/ErrorIcon.svelte diff --git a/src/Toasts/InfoIcon.svelte b/src/lib/components/Toasts/InfoIcon.svelte similarity index 100% rename from src/Toasts/InfoIcon.svelte rename to src/lib/components/Toasts/InfoIcon.svelte diff --git a/src/Toasts/SuccessIcon.svelte b/src/lib/components/Toasts/SuccessIcon.svelte similarity index 100% rename from src/Toasts/SuccessIcon.svelte rename to src/lib/components/Toasts/SuccessIcon.svelte diff --git a/src/Toasts/Toast.svelte b/src/lib/components/Toasts/Toast.svelte similarity index 100% rename from src/Toasts/Toast.svelte rename to src/lib/components/Toasts/Toast.svelte diff --git a/src/Toasts/Toasts.svelte b/src/lib/components/Toasts/Toasts.svelte similarity index 100% rename from src/Toasts/Toasts.svelte rename to src/lib/components/Toasts/Toasts.svelte diff --git a/src/lib/components/timeline/Timeline.svelte b/src/lib/components/timeline/Timeline.svelte new file mode 100644 index 0000000..d4e5151 --- /dev/null +++ b/src/lib/components/timeline/Timeline.svelte @@ -0,0 +1,21 @@ + + + + + diff --git a/src/lib/components/timeline/TimelineConnector.svelte b/src/lib/components/timeline/TimelineConnector.svelte new file mode 100644 index 0000000..aff4005 --- /dev/null +++ b/src/lib/components/timeline/TimelineConnector.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/src/lib/components/timeline/TimelineContent.svelte b/src/lib/components/timeline/TimelineContent.svelte new file mode 100644 index 0000000..914fd4a --- /dev/null +++ b/src/lib/components/timeline/TimelineContent.svelte @@ -0,0 +1,30 @@ + + +
+ +
+ + diff --git a/src/lib/components/timeline/TimelineDot.svelte b/src/lib/components/timeline/TimelineDot.svelte new file mode 100644 index 0000000..e2a9366 --- /dev/null +++ b/src/lib/components/timeline/TimelineDot.svelte @@ -0,0 +1,19 @@ + + + + + + + diff --git a/src/lib/components/timeline/TimelineItem.svelte b/src/lib/components/timeline/TimelineItem.svelte new file mode 100644 index 0000000..0e4b81a --- /dev/null +++ b/src/lib/components/timeline/TimelineItem.svelte @@ -0,0 +1,58 @@ + + +
  • + {#if !$$slots['opposite-content']} +
    + {:else} + + {/if} + +
    • + + diff --git a/src/lib/components/timeline/TimelineOppositeContent.svelte b/src/lib/components/timeline/TimelineOppositeContent.svelte new file mode 100644 index 0000000..055ddb0 --- /dev/null +++ b/src/lib/components/timeline/TimelineOppositeContent.svelte @@ -0,0 +1,31 @@ + + +
    + +
    + + diff --git a/src/lib/components/timeline/TimelineSeparator.svelte b/src/lib/components/timeline/TimelineSeparator.svelte new file mode 100644 index 0000000..7b82f6d --- /dev/null +++ b/src/lib/components/timeline/TimelineSeparator.svelte @@ -0,0 +1,16 @@ + + +
    + +
    + + diff --git a/src/lib/index.ts b/src/lib/index.ts index 856f2b6..a8fc0a6 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1 +1,39 @@ // place files you want to import through the `$lib` alias in this folder. +import Timeline from '$lib/components/timeline/Timeline.svelte'; +import TimelineItem from '$lib/components/timeline/TimelineItem.svelte'; +import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte'; +import TimelineDot from '$lib/components/timeline/TimelineDot.svelte'; +import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte'; +import TimelineContent from '$lib/components/timeline/TimelineContent.svelte'; +import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte'; + +import Toasts from '$lib/components/Toasts/Toasts.svelte'; +import Toast from '$lib/components/Toasts/Toast.svelte'; +import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte'; +import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte'; +import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte'; +import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte'; + +import Card from '$lib/components/Card.svelte'; +import Modal from '$lib/components/Modal.svelte'; + + +export { + Timeline, + TimelineItem, + TimelineSeparator, + TimelineDot, + TimelineConnector, + TimelineContent, + TimelineOppositeContent, + + Toasts, + Toast, + CloseIcon, + InfoIcon, + SuccessIcon, + ErrorIcon, + + Card, + Modal +}; diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts new file mode 100644 index 0000000..1722b51 --- /dev/null +++ b/src/lib/types.d.ts @@ -0,0 +1,9 @@ +type TimelinePosition = 'right' | 'left' | 'alternate'; + +type ParentPosition = 'right' | 'left'; + +type TimelineConfig = { + rootPosition: TimelinePosition; +}; + +export { TimelinePosition, ParentPosition, TimelineConfig }; diff --git a/src/main.svelte b/src/main.svelte index 2d2d552..afae5a5 100644 --- a/src/main.svelte +++ b/src/main.svelte @@ -3,8 +3,10 @@ import { Toast, ToastType } from "$lib/toast"; import { addToast } from "$lib/store"; - import Card from './Card.svelte'; - import Modal from './Modal.svelte'; + import Card from '$lib/components/Card.svelte'; + import Modal from '$lib/components/Modal.svelte'; + + import Timeline from "./timeline.svelte"; let showModal: boolean = false; let activeModal: any = null; @@ -76,7 +78,7 @@ } /* Skills Cards CSS */ - .skills-container { + .container { padding-top: 3em; max-width: 90%; margin: auto; @@ -112,7 +114,7 @@ -
    +

    Skills

    @@ -135,6 +137,12 @@
    +
    +

    Experience

    +
    + +
    +
    {addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 4000))}
    {addToast(new Toast("Welcome!", ToastType.Success, true, 3000))}
    {:catch} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 87b0f1a..97699fd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/static/json/me.json b/static/json/me.json index d841f6a..784896c 100644 --- a/static/json/me.json +++ b/static/json/me.json @@ -39,5 +39,22 @@ "about": "Svelte is an impressive web framework that stands out in the world of front-end development. It's known for its unique approach, compiling components to highly optimized vanilla JavaScript, resulting in blazing-fast web applications. Svelte's simplicity and declarative syntax make it easy to learn and use, and it encourages efficient, maintainable code. " } ], - "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 Rust-Lang." + "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 Rust-Lang.", + "timeline" : [ + { + "duration" : "September 2015 - July 2020", + "title" : "The Norton Knatchbull School (GCSEs)", + "description" : "FSMQ (C)
    Maths (8)
    Geography (9)
    Biology (9)
    Chemistry (9)
    Physics (9)
    Spanish (7)
    English (Literature & Language) (7, 7)
    Computer Science (9)" + }, + { + "duration" : "September 2020 - July 2022", + "title" : "The Norton Knatchbull School (A-Levels)", + "description" : "Computer Science (A*)
    Mathematics (A)
    Physics (A)" + }, + { + "duration" : "September 2022 - Present", + "title" : "Thales UK - Software Engineer", + "description" : "As a software engineering apprentice at Thales UK, I find myself partaking in agile / scrum development methodologies in a strong team of 6 other engineers. The team iterates on a pre-existing system designed for the MOD, written in C++, using internal frameworks to assist.

    To extend this, the apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..." + } + ] } \ No newline at end of file