Modif page principale, ajout error handling

This commit is contained in:
Nabil Ould Hamou 2024-03-25 11:00:02 +01:00
parent 9b6643a7a2
commit a276cd5bd9
2 changed files with 52 additions and 45 deletions

View file

@ -1,4 +1,8 @@
<div class='flex flex-col items-center justify-center w-full h-full'>
<h1 class='text-lg text-foreground font-bold'>404</h1>
<h3>This page does not exist.</h3>
</div>
<script lang="ts">
import { page } from '$app/stores';
</script>
<div class="flex flex-col items-center justify-center w-full">
<h1 class="text-lg text-foreground font-bold">404</h1>
<h3>{$page.error?.message}</h3>
</div>

View file

@ -1,44 +1,47 @@
<script lang="ts">
import {Button} from '@/components/ui/button'
import { GithubLogo } from "radix-icons-svelte";
import { TwitterLogo } from "radix-icons-svelte";
import { FileText } from "radix-icons-svelte";
import * as Card from "@/components/ui/card";
import * as Avatar from "@/components/ui/avatar"
import { Button } from '@/components/ui/button';
import { GithubLogo } from 'radix-icons-svelte';
import { TwitterLogo } from 'radix-icons-svelte';
import { FileText } from 'radix-icons-svelte';
import * as Card from '@/components/ui/card';
import * as Avatar from '@/components/ui/avatar';
</script>
<div class='flex flex-col justify-center items-center h-full text-center cursor-default mt-20'>
<Card.Root class="max-w-xs sm:max-w-sm ease-in-out duration-500">
<Card.Header class="flex items-center">
<Card.Title>Nabil Ould Hamou</Card.Title>
<Card.Description>Computer Science Student</Card.Description>
<Avatar.Root class="h-32 w-32">
<Avatar.Image src="https://github.com/nabilouldhamou.png" alt="@nabilouldhamou" />
<Avatar.Fallback>NOH</Avatar.Fallback>
</Avatar.Root>
</Card.Header>
<Card.Content>
<p class="text-muted-foreground">Hi I am <span class="text-foreground font-bold">Nabil</span> 👋</p>
<p class="text-muted-foreground">I am a <span class="text-foreground">computer science student</span> 👨‍💻 interested in <span class="text-foreground">embedded systems engineering</span> 📟.</p>
</Card.Content>
<Card.Footer class="flex flex-col justify-center gap-2">
<div class="flex justify-center gap-1.5 sm:gap-3">
<Button href="https://github.com/nabilouldhamou" target='_blank' variant="outline">
<GithubLogo class="mr-2 h-4 w-4" />
Github
</Button>
<Button href="/CV.pdf" target='_blank' variant="outline">
<FileText class="mr-2 h-4 w-4" />
CV
</Button>
<Button href="https://x.com/nbil_o" target='_blank' variant="outline">
<TwitterLogo class="mr-2 h-4 w-4" />
Twitter
</Button>
</div>
<p class="font-bold">Contact: ouldhamounabil@gmail.com</p>
</Card.Footer>
</Card.Root>
</div>
<div class="flex flex-col justify-center items-center h-full text-center cursor-default mt-20">
<Card.Root class="max-w-xs sm:max-w-sm ease-in-out duration-500">
<Card.Header class="flex items-center">
<Card.Title>Nabil Ould Hamou</Card.Title>
<Card.Description>Computer Science Student</Card.Description>
<Avatar.Root class="h-32 w-32">
<Avatar.Image src="https://github.com/nabilouldhamou.png" alt="@nabilouldhamou" />
<Avatar.Fallback>NOH</Avatar.Fallback>
</Avatar.Root>
</Card.Header>
<Card.Content>
<p class="text-muted-foreground">
Hi I am <span class="text-foreground font-bold">Nabil</span> 👋
</p>
<p class="text-muted-foreground">
I am a <span class="text-foreground">computer science student</span> 👨‍💻 interested in
<span class="text-foreground">software engineering</span> 📟.
</p>
</Card.Content>
<Card.Footer class="flex flex-col justify-center gap-2">
<div class="flex justify-center gap-1.5 sm:gap-3">
<Button href="https://github.com/nabilouldhamou" target="_blank" variant="outline">
<GithubLogo class="mr-2 h-4 w-4" />
Github
</Button>
<Button href="/CV.pdf" target="_blank" variant="outline">
<FileText class="mr-2 h-4 w-4" />
CV
</Button>
<Button href="https://twitter.com/nbil_o" target="_blank" variant="outline">
<TwitterLogo class="mr-2 h-4 w-4" />
Twitter
</Button>
</div>
<p class="font-bold">Contact: ouldhamounabil@gmail.com</p>
</Card.Footer>
</Card.Root>
</div>