Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#24] - Feat set up netlify redirect rules #28

Merged
merged 3 commits into from
Oct 3, 2024
Merged

[#24] - Feat set up netlify redirect rules #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5c4a6e
[#24] - Add 404 page view
dylanson25 Oct 3, 2024
2f0cfe2
[#24] - Move main tag to Layout
dylanson25 Oct 3, 2024
3996f39
[#24] - Netlify redirection rules
dylanson25 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _redirects
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* /404.html 404
8 changes: 6 additions & 2 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,12 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
<body class="bg-slate-700">
<main
class="flex relative overflow-hidden justify-center items-center h-full w-full font-sans"
>
<slot />
</main>
</body>
</html>
<style is:global>
Expand Down
21 changes: 21 additions & 0 deletions src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
import Layout from '../layouts/Layout.astro';

const title = '404 | Page Not Found';
---

<Layout title={title}>
<section class="flex flex-col text-center">
<h2 class="text-9xl font-bold font-mono text-gray-200">404</h2>
<h1 class="mt-2 text-gray-200 text-xl">
<span class="text-cyan-500/70 font-bold text-xl">Oops!</span> Page Not Found
</h1>
<p class="mt-5 text-gray-300">
Sorry, we couldn’t find the page you’re looking for.
</p>
<a
class="font-bold hover:shadow-[0_0_5px_rgba(245,245,245,0.50)] text-gray-300 hover:text-gray-200 bg-slate-500/50 w-fit mx-auto mt-3 p-2 rounded-lg block"
href="/">Go back to homepage</a
>
</section>
</Layout>
80 changes: 38 additions & 42 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,47 +15,43 @@ const socialMedia: SocialMedia[] = [
---

<Layout title="Dylanson25 | Portafolio">
<main
class="flex relative overflow-hidden justify-center items-center h-full w-full bg-slate-700 font-sans"
<header class="absolute top-0 px-10 pt-6 pb-4 rounded-b-lg bg-slate-500/50">
<h2 class="font-semibold text-gray-200/70 text-center mb-2">
Dylanson25.dev
</h2>
<ul class="grid gap-6 grid-cols-3">
{
socialMedia.map(({ name, url }) => (
<li class="hover:drop-shadow-[0_0_10px_rgba(245,245,245,0.50)] hover:fill-white fill-[#e4e2e2]">
<a href={url} target="_blank">
<Icon fill_hover="white" size="lg" name={name} />
</a>
</li>
))
}
</ul>
</header>
<section>
<Image
class="rounded-full drop-shadow-lg"
src={dylanImg}
alt="Imagen Dylan Villarreal Toscano"
width={300}
/>
<h1 class="font-semibold text-gray-200 text-center mt-5 text-3xl">
Dylan <br /> Villrarreal Toscano
</h1>
</section>
<section
class="absolute hidden md:block right-0 bottom-2 -rotate-12 bg-orange-300 rounded-lg p-2 w-full h-full max-h-56 max-w-64"
>
<header class="absolute top-0 px-10 pt-6 pb-4 rounded-b-lg bg-slate-500/50">
<h2 class="font-semibold text-gray-200/70 text-center mb-2">
Dylanson25.dev
</h2>
<ul class="grid gap-6 grid-cols-3">
{
socialMedia.map(({ name, url }) => (
<li class="hover:drop-shadow-[0_0_10px_rgba(245,245,245,0.50)] hover:fill-white fill-[#e4e2e2]">
<a href={url} target="_blank">
<Icon fill_hover="white" size="lg" name={name} />
</a>
</li>
))
}
</ul>
</header>
<section>
<Image
class="rounded-full drop-shadow-lg"
src={dylanImg}
alt="Imagen Dylan Villarreal Toscano"
width={300}
/>
<h1 class="font-semibold text-gray-200 text-center mt-5 text-3xl">
Dylan <br /> Villrarreal Toscano
</h1>
</section>
<section
class="absolute hidden md:block right-0 bottom-2 -rotate-12 bg-orange-300 rounded-lg p-2 w-full h-full max-h-56 max-w-64"
>
<h2 class="font-semibold text-4xl leading-10 font-mono">
My New <br /> Site Is <br /> Coming <br /> Soon!
</h2>
</section>
<article class="absolute left-5 bottom-5 md:hidden">
<h2 class="text-2xl text-slate-100/50 font-extrabold">
My New Site Is <br /> Coming Soon!
</h2>
</article>
</main>
<h2 class="font-semibold text-4xl leading-10 font-mono">
My New <br /> Site Is <br /> Coming <br /> Soon!
</h2>
</section>
<article class="absolute left-5 bottom-5 md:hidden">
<h2 class="text-2xl text-slate-100/50 font-extrabold">
My New Site Is <br /> Coming Soon!
</h2>
</article>
</Layout>