All solutions

To display the specific hero component on different viewports (small and large screen devices), we can create both separate components and render them depending on what viewport it falls. Since the Navigation and Hero Components both have different display. I created a viewport store wherein it tracks on what viewport size it belongs to.

Viewport Store

import { writable } from 'svelte/store'

let isDesktop = createStore(null)

function createStore(initial: boolean) {
  const { subscribe, set } = writable(initial)

  return {
    subscribe,
    set: (value: boolean) => {
      set(value)
    },
  }
}
export default isDesktop

To use it on the Hero Component, I created two components for the small and large viewports, and render them base on what the value of the store.

Hero Component

 import HeroSmall from './HeroSmall.svelte'
 import HeroLarge from './HeroLarge.svelte'
 import isDesktop from '../stores/viewport'

{#if $isDesktop}
<HeroLarge />
{:else}
<HeroSmall />
{/if}

Main Component

let innerWidth = window.innerWidth

$: if (innerWidth > 1024) {
    $isDesktop = true
} else {
    $isDesktop = false
}

<svelte:window bind:innerWidth />

How amazing and simple Svelte's Store is to use for state management. With the use of the dollar prefix $ for auto subscription and cleanup.

import { writable } from 'svelte/store'
import type { JobStore } from '../types/Job.type'

let store = createFilterStore([])

function createFilterStore(initial: string[]): JobStore {
  const { subscribe, set } = writable(initial)

  return {
    subscribe,
    set: (value: string[]) => {
      set(value)
    },
  }
}
export default store

Another challenge that I faced was on how to make sure that all the Filter Tags would return the exact Job Listing. There are lots of ways to use like with the ES6 Object Entries, but I just went with the Object Destructuring since it was more of a simple head-on approach and used Svelte's Reactivity to trigger when value changes.

//svelte reactivity, so whenever filterStore value changes, the function would execute
$: applyFilter(), $filterStore

function applyFilter(): void {
    if ($filterStore.length === 0) {
      jobs = [...data]
      return
    }

    jobs = data.filter((post) => {
      const { role, level, languages, tools } = post
      const keys = [role, level, ...languages, ...tools]

      const hasAllElements = $filterStore.every((item) => keys.includes(item))
      if (hasAllElements) return post
    })
  }

Instead of using svgs as images, with Svelte we can directly use them as Svelte Component Icon by changing .svg into .svelte and export them together with the links so that we can both use them for the Navbar Component.

import TodoIcon from '../icons/icon-todo.svelte'
import CalendarIcon from '../icons/icon-calendar.svelte'
import ReminderIcon from '../icons/icon-reminders.svelte'
import PlanningIcon from '../icons/icon-planning.svelte'

export function createLinks() {
  return [
    {
      page: 'Features',
      links: [
        {
          Icon: TodoIcon,
          page: 'Todo List',
        },
        {
          Icon: CalendarIcon,
          page: 'Calendar',
        },
        {
          Icon: ReminderIcon,
          page: 'Reminders',
        },
        {
          Icon: PlanningIcon,
          page: 'Planning',
        },
      ],
    },
  ]
}

To integrate Chart.js with Svelte, you have to make sure you imported the correct path when using Chart.js with npm.

import { Chart, type ChartItem } from 'chart.js/auto'

Since the chartCanvas would return undefined when the component is rendered, we have to use Svelte's onMount() to make sure that the chart would be displayed after the component is rendered.

import { onMount } from 'svelte'

let ctx: ChartItem
let chartCanvas: HTMLCanvasElement
let myChart: Chart

onMount(() => {
  displayChart()

  return () => {
    myChart.destroy()
  }
})

function displayChart(): void {
  //chart initialization goes here.....
}

<canvas class="cursor-pointer" bind:this={chartCanvas} />

To handle more testimonials, loop through all testimonials and initialize their positions to next then dynamically change them base on the user's input for navigating the next slider.

To dynamically update the slider's position when using TailwindCSS use the svelte:class directive to apply tailwind positioning classes

How important and powerful RegEx can do when it comes to client side validations. And how amazing ES7 String Padding when displaying output and placeholders.

Note: This is a 2-year old ago project solution 😀

Note: This is a 2-year old ago project solution 😀

Note: This is a 2-year old ago project solution 😀

Note: This is a 2-year old ago project solution 😀

Note: This is a 2-year old ago project solution 😀

You can't add an ::after pseudo element selector to an image inside an <img> tag. You can use a work-around by using another tags like <div> or <span> and declare the background attributes and styles in the CSS.

Note: This is a 2-year old ago project solution 😀

Use transform: translate() to align the background patterns when using absolute positioning, so that other contents inside the body won't get affected.

Note: This is a 2-year old ago project solution 😀

You can't add a pseudo-element selector on an <img> tag for the hover state. You can use a work-around by wrapping it inside a <div> or targeting its parent element to do the CSS styling. It's best to wrap the image description inside a div (especially if it consists alot of contents e.g. texts and buttons). But for this one, I didn't use it since there's only a single icon that needs to be displayed.