diff --git a/assets/css/main.css b/assets/css/main.css index 2604506..5676e9d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -84,3 +84,17 @@ font-weight: 300; } } + +@layer base { + .link, + .content a { + color: var(--color-emerald-500); + text-decoration: none; + text-underline-offset: .25rem; + + &:hover { + color: var(--color-emerald-300); + text-decoration: underline; + } + } +} diff --git a/src/components/Card.astro b/src/components/Card.astro index be961cb..1c75359 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -1,7 +1,49 @@ -
-
- +--- +import { Image } from 'astro:assets' - +interface Props { + imageCover?: string + imageHeight?: number + imageWidth?: number +} + +const { imageCover, imageHeight, imageWidth } = Astro.props +--- + +
+ {imageCover && imageHeight && imageWidth && +
+ {""} +
+ } + +
+
+ + + +
+ +
+ +
-
+ + + \ No newline at end of file diff --git a/src/components/Heading.astro b/src/components/Heading.astro index 8410f23..04bf6f3 100644 --- a/src/components/Heading.astro +++ b/src/components/Heading.astro @@ -1,23 +1,46 @@ --- +type HeadingType = 'h0' | 'h1' | 'h2' | 'h3' + interface Props { - tag: 'h1' | 'h2' | 'h3'; + tag: HeadingType + style?: HeadingType } -const { tag = "h1" } = Astro.props; +const { tag = "h1" } = Astro.props +const { style = tag } = Astro.props + +function renderClasses(style: HeadingType) { + switch (style) { + case 'h0': + return "font-heading text-4xl md:text-6xl font-bold" + case 'h1': + default: + return "font-heading text-2xl md:text-4xl font-bold" + case 'h2': + return "font-heading text-xl md:text-3xl font-bold" + case 'h3': + return "font-heading text-lg md:text-xl font-bold" + } +} --- +{tag === 'h0' && +

+ +

+} {tag === 'h1' && -

+

} {tag === 'h2' && -

+

} {tag === 'h3' && -

+

} diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro new file mode 100644 index 0000000..20a74e3 --- /dev/null +++ b/src/components/Navbar.astro @@ -0,0 +1,44 @@ +--- +interface MenuItem { + label: string + to: string +} + +const menuItems: MenuItem[] = [ + { + label: "Home", + to: "/" + }, + { + label: "Projects", + to: "/projects" + } +] + +interface Props { + floating?: boolean +} + +const { floating = false } = Astro.props +--- + +
+ +
diff --git a/src/components/home/Hero.astro b/src/components/home/Hero.astro deleted file mode 100644 index 4194352..0000000 --- a/src/components/home/Hero.astro +++ /dev/null @@ -1,53 +0,0 @@ ---- -import Button from "../Button.astro"; -import Heading from "../Heading.astro"; -// import HeroVerticalCards from "./HeroVerticalCards.astro"; ---- - -
-
-
- - Hello, I'm Alexis ! ðŸ‘‹ - - -
-

- I'm a front-end engineer from France and all-around web enthusiast. -

-
- -
- -
-

- Let's build something cool together :) -

-
- -
- - - -
-
-
- -

@2025 Â· Website is currently a WIP ; some things may change !

-
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro new file mode 100644 index 0000000..cb0ef57 --- /dev/null +++ b/src/layouts/HomeLayout.astro @@ -0,0 +1,101 @@ +--- +import '../../assets/css/main.css' +import BgParticles from '../components/BgParticles.astro' +import BgGrid from '../components/BgGrid.astro' +import HeadFavicon from './HeadFavicon.astro' +import Navbar from "../components/Navbar.astro"; +interface Props { + title?: string + description?: string + hasParticles?: boolean + hasGrid?: boolean +} + +const { title = "Home", hasParticles = false, hasGrid = false } = Astro.props + +const baseTitle = 'Alexis Pelé' +const renderedTitle = `${title} · ${baseTitle}` + +const { description = baseTitle } = Astro.props + +const authorName = "Alexis Pelé" +const authorUsername = "AlexisNP" +const websiteDomain = "alexcreates.fr" +--- + + + + + + + + + + { renderedTitle } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {hasParticles && + + } + + {hasGrid && + + } + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index bc74ec4..93014fa 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -3,7 +3,7 @@ import '../../assets/css/main.css' import BgParticles from '../components/BgParticles.astro' import BgGrid from '../components/BgGrid.astro' import HeadFavicon from './HeadFavicon.astro' - +import Navbar from "../components/Navbar.astro"; interface Props { title?: string description?: string @@ -11,7 +11,7 @@ interface Props { hasGrid?: boolean } -const { title = "Home", hasParticles = true, hasGrid = true } = Astro.props +const { title = "Home", hasParticles = false, hasGrid = false } = Astro.props const baseTitle = 'Alexis Pelé' const renderedTitle = `${title} · ${baseTitle}` @@ -85,7 +85,9 @@ const websiteDomain = "alexcreates.fr" - + + + {hasParticles && diff --git a/src/pages/index.astro b/src/pages/index.astro index 75b4715..558e63f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,13 +1,57 @@ --- -import Hero from '../components/home/Hero.astro'; -// import Tooling from '../components/home/Tooling.astro'; -import Layout from '../layouts/Layout.astro'; +import Button from '../components/Button.astro'; +import Heading from '../components/Heading.astro'; +import HomeLayout from '../layouts/HomeLayout.astro'; --- - -
- + +
+
+
+
+ + Hello, I'm Alexis ! ðŸ‘‹ + - +
+

+ I'm a front-end engineer from France and all-around web enthusiast. +

+
+ +
+ +
+

+ Let's build something cool together :) +

+
+ +
+ + + +
+
+
+ +

@2025 Â· Website is currently a WIP ; some things may change !

+
- + diff --git a/src/pages/projects.astro b/src/pages/projects.astro new file mode 100644 index 0000000..38999a6 --- /dev/null +++ b/src/pages/projects.astro @@ -0,0 +1,56 @@ +--- +import Card from '../components/Card.astro'; +import Heading from '../components/Heading.astro'; +import Layout from '../layouts/Layout.astro'; +--- + + +
+
+ + My projects + +
+ +
+
    +
  • + + + + + + + + + Interactive maps + + + +

    World-building does not come easy for me, as I tend to struggle with aphantasia.

    +

    I started this side-project to help me visualize my tabletop world better. It features translations, multiple maps and distance measurements.

    +     +     +
    • +
  • + + + + + + + + + Tabletop Calendars + + + +

    I wasn't satisfied with the custom calendar apps currently available ; especially with their interfaces. So I obviously has to make my own !

    +

    It also was the perfect excuse to experiment and push Nuxt / Shadcn code to production

    +     +     +
    • +
+
+
+