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

Show skills as cards #297

Merged
merged 3 commits into from
Oct 28, 2024
Merged

Show skills as cards #297

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
eb1b821
Add Web Technologies to skill cards
JonasWanke Oct 20, 2024
35fd254
Remove old text
JonasWanke Oct 20, 2024
798317d
Align buttons
JonasWanke Oct 28, 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
2 changes: 1 addition & 1 deletion src/components/Cta.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { title, subtitle, action } = Astro.props;
---

<div
class="overflow-hidden bg-wsi-blue-300 px-6 py-20 text-center shadow-2xl sm:rounded-3xl sm:px-16"
class="overflow-hidden rounded-3xl bg-wsi-blue-300 px-6 py-10 text-center shadow-2xl sm:px-16 sm:py-20"
>
<h2
class="mx-auto max-w-2xl text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
Expand Down
30 changes: 30 additions & 0 deletions src/components/skill/SkillCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
interface Props {
name: string;
description: string;
action: { label: string; url: string };
}

const { name, description, action } = Astro.props;
---

<div
class="flex flex-col justify-between gap-8 rounded-3xl bg-gray-50 px-6 py-6 text-center shadow-2xl sm:py-8 xl:px-10"
>
<div>
<h2
class="mx-auto max-w-2xl text-lg font-bold tracking-tight text-gray-800 sm:text-xl md:text-2xl"
>
{name}
</h2>
<p class="text-md mx-auto mt-2 max-w-4xl leading-8 text-gray-600">
{description}
</p>
</div>
<a
href={action.url}
class="rounded-md bg-wsi-blue-300 px-8 py-2 text-base font-semibold leading-7 text-white shadow-sm hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:text-lg"
>
{action.label}
</a>
</div>
68 changes: 31 additions & 37 deletions src/pages/en/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Hero from "~/components/Hero.astro";
import Link from "~/components/Link.astro";
import HeadedSection from "~/components/sections/HeadedSection.astro";
import WavedSection from "~/components/sections/WavedSection.astro";
import SkillCard from "~/components/skill/SkillCard.astro";
import { defaultLang, type Language } from "~/i18n";
import Layout from "~/layouts/Layout.astro";

Expand Down Expand Up @@ -47,46 +48,39 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
</HeadedSection>
<WavedSection type="top" title="Our Skills">
<p class="sm:text-xl">
The National Training Centres in Software Development are located at the
The National Training Centers in Software Development are located at the
<Link href="https://aeg-nb.de" isExternal>
Albert-Einstein-Gymnasium Neubrandenburg</Link
>. At this location,
<Link
href={getRelativeLocaleUrl(lang, "mobile-applications-development")}
>
Mobile Applications Development
</Link>
und
<Link
href={getRelativeLocaleUrl(lang, "it-software-solutions-for-business")}
>
IT Software Solutions for Business
</Link>
are represented. More information on the individual skills can be found on
the respective subpages.
>. More information on the individual skills can be found on their
respective pages:
</p>
<div class="mx-4 grid grid-cols-1 gap-x-24 gap-y-8 md:grid-cols-2">
<div>
<p class="border-b-2 border-white pb-1 text-xl">
Mobile Applications Development
</p>
<p class="pt-4 md:text-justify">
As a software developer with a specialization in mobile applications,
you are a programmer and designer in one. You ensure that the apps
work on users' mobile devices, look appealing, and are fun to use.
</p>
</div>
<div>
<p class="border-b-2 border-white pb-1 text-xl">
IT Software Solutions for Business
</p>
<p class="pt-4 md:text-justify">
The skill IT Software Solutions for Business represents the entire
spectrum of software-developing IT professions. All full-stack
programmers are suitable. This includes desktop, server, database,
mobile app, and web development.
</p>
</div>
<div
class="mx-4 grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-12"
>
<SkillCard
name="Mobile Applications Development"
description="As a software developer with a specialization in mobile applications, you are a programmer and designer in one. You ensure that the apps work on users' mobile devices, look appealing, and are fun to use."
action={{
label: "Find out more",
url: getRelativeLocaleUrl(lang, "mobile-applications-development"),
}}
/>
<SkillCard
name="IT Software Solutions for Business"
description="This skill represents the entire spectrum of software-developing IT professions. All full-stack programmers are suitable. This includes desktop, server, database, mobile app, and web development."
action={{
label: "Find out more",
url: getRelativeLocaleUrl(lang, "it-software-solutions-for-business"),
}}
/>
<SkillCard
name="Web Technologies"
description="This skill is about planning, designing, and testing websites, as well as their maintenance and the integration of third-party and social media platforms."
action={{
label: "Find out more",
url: getRelativeLocaleUrl(lang, "web-technologies"),
}}
/>
</div>
</WavedSection>
<WavedSection type="bottom">
Expand Down
63 changes: 30 additions & 33 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Hero from "~/components/Hero.astro";
import Link from "~/components/Link.astro";
import HeadedSection from "~/components/sections/HeadedSection.astro";
import WavedSection from "~/components/sections/WavedSection.astro";
import SkillCard from "~/components/skill/SkillCard.astro";
import { defaultLang, type Language } from "~/i18n";
import Layout from "~/layouts/Layout.astro";

Expand Down Expand Up @@ -51,40 +52,36 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
Die Bundesleistungszentren der Softwareentwicklung haben ihren Standort am
<Link href="https://aeg-nb.de" isExternal>
Albert-Einstein-Gymnasium Neubrandenburg</Link
>. An diesem Standort sind die Disziplinen
<Link
href={getRelativeLocaleUrl(lang, "mobile-applications-development")}
>
App-Entwicklung
</Link>
und
<Link
href={getRelativeLocaleUrl(lang, "it-software-solutions-for-business")}
>
Software-Entwicklung
</Link>
vertreten. Mehr Informationen zu den einzelnen Disziplinen finden sich auf
den jeweiligen Unterseiten.
>. Mehr Informationen zu den einzelnen Disziplinen finden sich auf den
jeweiligen Unterseiten:
</p>
<div class="mx-4 grid grid-cols-1 gap-x-24 gap-y-8 md:grid-cols-2">
<div>
<p class="border-b-2 border-white pb-1 text-xl">App-Entwicklung</p>
<p class="pt-4 md:text-justify">
Als Softwareentwickler*in mit der Spezialisierung auf mobile Apps bist
du Programmierer*in und Designer*in in einem. Du sorgst dafür, dass
die Apps auf den mobilen Endgeräten der Benutzer*innen funktionieren,
ansprechend aussehen und Spaß machen.
</p>
</div>
<div>
<p class="border-b-2 border-white pb-1 text-xl">Software-Entwicklung</p>
<p class="pt-4 md:text-justify">
Die Disziplin Software-Entwicklung bildet das gesamte Spektrum der
Software-entwickelnden IT-Berufe ab. Geeignet sind alle
Full-Stack-Programmierer*innen. Dazu zählen Desktop-, Server-,
Datenbank-, Mobile-App- und Webentwicklung.
</p>
</div>
<div
class="mx-4 grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-12"
>
<SkillCard
name="App-Entwicklung"
description="Als Softwareentwickler*in mit der Spezialisierung auf mobile Apps bist du Programmierer*in und Designer*in in einem. Du sorgst dafür, dass die Apps auf den mobilen Endgeräten der Benutzer*innen funktionieren, ansprechend aussehen und Spaß machen."
action={{
label: "Mehr erfahren",
url: getRelativeLocaleUrl(lang, "mobile-applications-development"),
}}
/>
<SkillCard
name="Software-Entwicklung"
description="Diese Disziplin bildet das gesamte Spektrum der Software-entwickelnden IT-Berufe ab. Geeignet sind alle Full-Stack-Programmierer*innen. Dazu zählen Desktop-, Server-, Datenbank-, Mobile-App- und Webentwicklung."
action={{
label: "Mehr erfahren",
url: getRelativeLocaleUrl(lang, "it-software-solutions-for-business"),
}}
/>
<SkillCard
name="Web-Entwicklung"
description="Hier geht es um die Planung und Gestaltung sowie das Testen von Webseiten, deren Pflege, Einbindung von Plattformen Dritter und Integration von Social-Media-Plattformen."
action={{
label: "Mehr erfahren",
url: getRelativeLocaleUrl(lang, "web-technologies"),
}}
/>
</div>
</WavedSection>
<WavedSection type="bottom">
Expand Down