Skip to content

Commit

Permalink
feat: namecard page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tanyawat-Arsaga
Tanyawat-Arsaga committed Mar 6, 2024
1 parent e434e0b commit 1ae96ca
Show file tree
Hide file tree
Showing 25 changed files with 911 additions and 679 deletions.
6 changes: 4 additions & 2 deletions apps/client/src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@tailwind base;
@tailwind base; /* Preflight will be injected here */

@tailwind components;
@tailwind utilities;

@tailwind utilities;
Binary file added apps/client/src/assets/kaho-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/client/src/assets/kaho-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/client/src/assets/kanata-peek.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions apps/client/src/components/Footer.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script>
import { t } from '@i18n';
import Typography from './core/Typography.svelte';
import { t } from '@i18n';
import Typography from './core/Typography.svelte';
</script>

<div
class="w-full py-2 flex justify-center items-center bg-primary shadow-md"
style="view-transition-name: footer"
class="w-full py-2 flex justify-center items-center bg-primary-400 shadow-md"
style="view-transition-name: footer"
>
<Typography class="mb-0"
><span class="mr-2">{$t('common.copyright')}</span> |
<a
target="_blank"
rel="noreferrer"
href="https://github.com/hamzaabamboo/ham-san.net"
class="ml-2">{$t('common.view-source')}</a
></Typography
>
<Typography class="mb-0"
><span class="mr-2">{$t('common.copyright')}</span> |
<a
target="_blank"
rel="noreferrer"
href="https://github.com/hamzaabamboo/ham-san.net"
class="ml-2">{$t('common.view-source')}</a
></Typography
>
</div>
192 changes: 96 additions & 96 deletions apps/client/src/components/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,109 @@
<script lang="ts">
import { invalidateAll } from '$app/navigation';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { locale, t } from '@i18n';
import { localizationUrls } from '@stores/localizationUrls';
import { LANGUAGES } from '@utils/localization';
import Fa from 'svelte-fa';
import { invalidateAll } from '$app/navigation';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { locale, t } from '@i18n';
import { localizationUrls } from '@stores/localizationUrls';
import { LANGUAGES } from '@utils/localization';
import Fa from 'svelte-fa';
let menuOpen = false;
let menuOpen = false;
// let navbar: HTMLElement;
// let navbar: HTMLElement;
const handleChangeLanguage = (language: (typeof LANGUAGES)[number]) => {
locale.set(language);
fetch('/?/set-language', {
method: 'POST',
body: `language=${language}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(() => invalidateAll());
if (menuOpen) menuOpen = false;
};
const handleChangeLanguage = (language: (typeof LANGUAGES)[number]) => {
locale.set(language);
fetch('/?/set-language', {
method: 'POST',
body: `language=${language}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(() => invalidateAll());
if (menuOpen) menuOpen = false;
};
$: links = [
{ label: $t('common.home'), href: '/' },
{ label: $t('common.about-me'), href: '/about' },
{ label: $t('common.projects'), href: '/projects' },
{ label: $t('common.note'), href: '/notes' },
// { label: $t('common.hobbies'), href: '/hobbies' },
// { label: $t('common.blog'), href: '/blog' },
{ label: $t('common.contact'), href: '/contact' }
];
$: links = [
{ label: $t('common.home'), href: '/' },
{ label: $t('common.about-me'), href: '/about' },
{ label: $t('common.projects'), href: '/projects' },
{ label: $t('common.note'), href: '/notes' },
// { label: $t('common.hobbies'), href: '/hobbies' },
// { label: $t('common.blog'), href: '/blog' },
{ label: $t('common.contact'), href: '/contact' }
];
</script>

<!-- bind:this={navbar} -->
<nav
class="w-full h-12 flex items-center justify-between sticky bg-primary top-0 shadow-sm z-20"
class="w-full h-12 flex items-center justify-between sticky bg-primary-400 top-0 shadow-sm z-20"
>
<div class="w-full h-12 flex items-center justify-between px-4 z-20" style:view-transition-name="header">
<!-- Logo Section -->
<div class="w-full md:w-auto relative z-20">
<!-- <Logo /> -->
<a href="/">{$t('common.name')}</a>
</div>
<div
class="w-full h-12 flex items-center justify-between px-4 z-20"
style:view-transition-name="header"
>
<!-- Logo Section -->
<div class="w-full md:w-auto relative z-20">
<!-- <Logo /> -->
<a href="/">{$t('common.name')}</a>
</div>

<!-- Desktop Menu-->
<div class="items-center hidden md:flex">
<div>
{#each links as link}
<a href={link.href} class="p-2">{link.label}</a>
{/each}
</div>
<div class="px-2">|</div>
<div>
{#each LANGUAGES as language}
{#if $localizationUrls[language]}
<a
class="px-1"
href={$localizationUrls[language]}
on:click={() => handleChangeLanguage(language)}
>{language.toUpperCase()}
</a>
{:else}
<button class="px-1" on:click={() => handleChangeLanguage(language)}>
{language.toUpperCase()}</button
>
{/if}
{/each}
</div>
</div>
<!-- Desktop Menu-->
<div class="items-center hidden md:flex">
<div>
{#each links as link}
<a href={link.href} class="p-2">{link.label}</a>
{/each}
</div>
<div class="px-2">|</div>
<div>
{#each LANGUAGES as language}
{#if $localizationUrls[language]}
<a
class="px-1"
href={$localizationUrls[language]}
on:click={() => handleChangeLanguage(language)}
>{language.toUpperCase()}
</a>
{:else}
<button class="px-1" on:click={() => handleChangeLanguage(language)}>
{language.toUpperCase()}</button
>
{/if}
{/each}
</div>
</div>

<!-- Mobile Menu-->
<div
class="items-center flex relative z-20 md:hidden"
on:click={() => (menuOpen = !menuOpen)}
>
<Fa icon={faBars} size="md" />
</div>
</div>
<div
class="fixed w-full h-full z-10 transition-all bg-white top-0 pt-16 md:hidden"
class:-right-full={!menuOpen}
class:right-0={menuOpen}
>
<div class="flex flex-col justify-center px-2 text-center">
{#each links as link}
<a href={link.href} class="p-2" on:click={() => (menuOpen = false)}>{link.label}</a>
{/each}
<hr />
<div class="pt-4">
{#each LANGUAGES as language}
{#if $localizationUrls[language]}
<a
class="px-1"
href={$localizationUrls[language]}
on:click={() => handleChangeLanguage(language)}
>{language.toUpperCase()}
</a>
{:else}
<button class="px-1" on:click={() => handleChangeLanguage(language)}>
{language.toUpperCase()}</button
>
{/if}
{/each}
</div>
</div>
</div>
<!-- Mobile Menu-->
<div class="items-center flex relative z-20 md:hidden" on:click={() => (menuOpen = !menuOpen)}>
<Fa icon={faBars} size="md" />
</div>
</div>
<div
class="fixed w-full h-full z-10 transition-all bg-white top-0 pt-16 md:hidden"
class:-right-full={!menuOpen}
class:right-0={menuOpen}
>
<div class="flex flex-col justify-center px-2 text-center">
{#each links as link}
<a href={link.href} class="p-2" on:click={() => (menuOpen = false)}>{link.label}</a>
{/each}
<hr />
<div class="pt-4">
{#each LANGUAGES as language}
{#if $localizationUrls[language]}
<a
class="px-1"
href={$localizationUrls[language]}
on:click={() => handleChangeLanguage(language)}
>{language.toUpperCase()}
</a>
{:else}
<button class="px-1" on:click={() => handleChangeLanguage(language)}>
{language.toUpperCase()}</button
>
{/if}
{/each}
</div>
</div>
</div>
</nav>
10 changes: 5 additions & 5 deletions apps/client/src/components/core/Button.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script>
let _class = '';
export { _class as class };
let _class = '';
export { _class as class };
</script>

<button
{...$$restProps}
class="px-4 py-2 mx-auto bg-primary rounded-md transition-shadow shadow-sm hover:shadow-md　{_class}"
{...$$restProps}
class="px-4 py-2 mx-auto bg-primary-400 rounded-md transition-shadow shadow-sm hover:shadow-md　{_class}"
>
<slot />
<slot />
</button>
Loading

0 comments on commit 1ae96ca

Please sign in to comment.