haaa
This commit is contained in:
Dominik Strangas
parent
48f8c7f226
commit
763ed4bdcd
|
|
@ -0,0 +1,93 @@
|
|||
Copyright 2017 The Syne Project Authors (https://gitlab.com/bonjour-monde/fonderie/syne-typeface)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
Syne Variable Font
|
||||
==================
|
||||
|
||||
This download contains Syne as both a variable font and static fonts.
|
||||
|
||||
Syne is a variable font with this axis:
|
||||
wght
|
||||
|
||||
This means all the styles are contained in a single file:
|
||||
Syne-VariableFont_wght.ttf
|
||||
|
||||
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||
in those cases you can use the static font files for Syne:
|
||||
static/Syne-Regular.ttf
|
||||
static/Syne-Medium.ttf
|
||||
static/Syne-SemiBold.ttf
|
||||
static/Syne-Bold.ttf
|
||||
static/Syne-ExtraBold.ttf
|
||||
|
||||
Get started
|
||||
-----------
|
||||
|
||||
1. Install the font files you want to use
|
||||
|
||||
2. Use your app's font picker to view the font family and all the
|
||||
available styles
|
||||
|
||||
Learn more about variable fonts
|
||||
-------------------------------
|
||||
|
||||
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||
https://variablefonts.typenetwork.com
|
||||
https://medium.com/variable-fonts
|
||||
|
||||
In desktop apps
|
||||
|
||||
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||
|
||||
Online
|
||||
|
||||
https://developers.google.com/fonts/docs/getting_started
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||
|
||||
Installing fonts
|
||||
|
||||
MacOS: https://support.apple.com/en-us/HT201749
|
||||
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||
|
||||
Android Apps
|
||||
|
||||
https://developers.google.com/fonts/docs/android
|
||||
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||
|
||||
License
|
||||
-------
|
||||
Please read the full license text (OFL.txt) to understand the permissions,
|
||||
restrictions and requirements for usage, redistribution, and modification.
|
||||
|
||||
You can use them in your products & projects – print or digital,
|
||||
commercial or otherwise.
|
||||
|
||||
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||
license for all details.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,65 @@
|
|||
import { For, Show, createSignal } from "solid-js"
|
||||
const [mockElements, setmock] = createSignal([...Array(60).keys()])
|
||||
|
||||
export const LandingHeroAnim = () => {
|
||||
return (
|
||||
<>
|
||||
<div class="relative justify-center items-center hidden lg:flex text-neutral-100">
|
||||
<div class="w-full h-fit min-h-[66vh] relative grid grid-cols-10 grid-rows-6 gap-1" >
|
||||
<For each={mockElements()}>{() =>
|
||||
<div class="w-full h-full relative bg-neutral-800 hover:bg-emerald-600 transition-all duration-[1500ms] hover:duration-100">
|
||||
</div>
|
||||
}</For>
|
||||
|
||||
|
||||
</div>
|
||||
<section id="whoami" class="h-3/4 rounded-tl-3xl rounded-br-3xl rounded-bl-md rounded-tr-md border border-neutral-100 backdrop-blur-xl hover:backdrop-blur-none hover:bg-neutral-800 transition-all z-30 w-3/4 mx-auto absolute flex justify-center items-center flex-col py-5">
|
||||
<div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
|
||||
<div class="w-full flex flex-col items-center gap-3">
|
||||
<div
|
||||
class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
|
||||
>
|
||||
<img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
|
||||
</div>
|
||||
<p class="text-2xl">Das bin ich!</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
|
||||
<p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
|
||||
<p>
|
||||
Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
|
||||
</p>
|
||||
<p>
|
||||
<span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! 🚀
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="whoami" class="text-neutral-100 w-full h-fit min-h-[66vh] justify-center items-center flex-col py-5 max-lg:flex hidden">
|
||||
<div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
|
||||
<div class="w-full flex flex-col items-center gap-3">
|
||||
<div
|
||||
class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
|
||||
>
|
||||
<img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
|
||||
</div>
|
||||
<p class="text-2xl">Das bin ich!</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
|
||||
<p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
|
||||
<p>
|
||||
Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
|
||||
</p>
|
||||
<p>
|
||||
<span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! 🚀
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||
</section>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -9,6 +9,8 @@ const setShowMobileNav = () => {
|
|||
};
|
||||
|
||||
export const Navigation = () => {
|
||||
console.log(mobileNav());
|
||||
|
||||
return (
|
||||
<>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -31,7 +33,7 @@ export const Navigation = () => {
|
|||
<a class="hover:underline transition-all hover:text-zinc-50" href="/products">
|
||||
Produkte
|
||||
</a>
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/mystory/">
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
|
||||
Über Mich
|
||||
</a>
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@ import Footer from '../views/Footer.astro';
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
<body class="bg-neutral-900">
|
||||
<Navigation client:only />
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
<div class="block">
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,10 +6,10 @@ import { Button } from "../components/partials/Button";
|
|||
import Projects from "../views/Projects.astro";
|
||||
import AboutMe from "../views/AboutMe.astro";
|
||||
import Products from "../views/Products.astro";
|
||||
import LandingHero from "../views/LandingHero.astro";
|
||||
import Footer from "../views/Footer.astro";
|
||||
import { DecryptLink } from "../components/partials/DecryptLink";
|
||||
import { ImpressComponent } from "../components/Impress";
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
|
||||
const encryptedMailLink = btoa("mailto:dominik@oceanwave018.de");
|
||||
const encryptedMail = btoa("dominik@oceanwave018.de");
|
||||
|
|
@ -17,18 +17,8 @@ const encryptedPhoneNumberLink = btoa("tel:017664001756");
|
|||
const encryptedPhoneNumber = btoa("+49 176 6400 1756");
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>Dominik - FullStackDev</title>
|
||||
</head>
|
||||
<body class="bg-zinc-900 text-zinc-100">
|
||||
<Navigation client:load />
|
||||
<section class="h-auto py-6 max-w-full w-1/2 flex flex-col justify-center gap-5">
|
||||
<PageLayout>
|
||||
<section class="min-h-screen bg-neutral-100 py-6 max-w-full w-screen flex flex-col justify-center gap-5">
|
||||
<ImpressComponent client:idle phoneNumber={encryptedPhoneNumber} email={encryptedMail} />
|
||||
<Footer />
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</PageLayout>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,15 @@ import { Button } from "../components/partials/Button"
|
|||
import Projects from "../views/Projects.astro"
|
||||
import AboutMe from "../views/AboutMe.astro"
|
||||
import Products from "../views/Products.astro"
|
||||
import LandingHero from "../views/LandingHero.astro"
|
||||
import Footer from "../views/Footer.astro"
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
import { LandingHeroAnim } from "../components/LandingHeroAnim";
|
||||
|
||||
const encryptedMail = btoa('dominik@oceanwave018.de')
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Dominik - FullStackDev</title>
|
||||
|
||||
</head>
|
||||
<body class="bg-zinc-900 text-zinc-100">
|
||||
<Navigation client:load />
|
||||
<LandingHero />
|
||||
<PageLayout>
|
||||
<LandingHeroAnim />
|
||||
<Projects />
|
||||
<AboutMe />
|
||||
<section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
|
||||
|
|
@ -38,6 +29,4 @@ const encryptedMail = btoa('dominik@oceanwave018.de')
|
|||
<Button client:load encryptedMail={encryptedMail} text="E-Mail schreiben"/>
|
||||
</div>
|
||||
</section>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
</PageLayout>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { Navigation } from "../components/Navigation";
|
||||
import { StoryItems } from "../components/StoryItems";
|
||||
import { StoryItemType } from "../components/partials/StoryItem";
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
import Footer from "../views/Footer.astro";
|
||||
|
||||
const storyItems: StoryItemType[] = [
|
||||
|
|
@ -37,9 +38,9 @@ const storyItems: StoryItemType[] = [
|
|||
];
|
||||
---
|
||||
|
||||
<Navigation />
|
||||
<PageLayout>
|
||||
<div class="min-h-screen w-screen p-10 bg-zinc-100">
|
||||
<h1 class="text-4xl font-bold">Meine Geschichte</h1>
|
||||
<StoryItems client:load storyItems={storyItems} />
|
||||
</div>
|
||||
<Footer />
|
||||
</PageLayout>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,68 @@
|
|||
---
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import Footer from "../views/Footer.astro";
|
||||
import PageLayout from '../layouts/PageLayout.astro'
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
---
|
||||
|
||||
<PageLayout>
|
||||
<div class="h-screen w-screen flex flex-col">
|
||||
<div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
|
||||
<div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
|
||||
<div
|
||||
class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<p class="text-2xl font-bold font-mono text-zinc-800 transition">
|
||||
Web-Entwicklung
|
||||
<div class="w-screen flex flex-col">
|
||||
<div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
|
||||
<div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
|
||||
<div
|
||||
class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<p class="text-2xl font-bold font-mono text-zinc-800 transition">Web-Entwicklung</p>
|
||||
<div class="flex flex-col gap-4 max-xl:hidden">
|
||||
<p class="font-mono text-lg break-words">
|
||||
Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
|
||||
Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
|
||||
</p>
|
||||
<p class="font-mono text-lg break-words">
|
||||
Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
|
||||
</p>
|
||||
</div>
|
||||
<p class="xl:hidden font-mono break-words">
|
||||
Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
|
||||
Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
|
||||
</p>
|
||||
<div class="flex flex-col gap-4 max-xl:hidden">
|
||||
<p></p>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<p class="font-mono font-bold text-2xl">Schulungen</p>
|
||||
<p class="font-mono text-lg break-words">
|
||||
Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
|
||||
Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
|
||||
Zusätzlich biete ich gerne IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
|
||||
</p>
|
||||
<p class="font-mono text-lg break-words">
|
||||
Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
|
||||
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<p class="font-mono font-bold text-2xl">Server-Deployment</p>
|
||||
</div>
|
||||
<p class="font-mono">
|
||||
Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
|
||||
dass Anwendungen reibungslos und effizient auf Servern laufen.
|
||||
</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<p class="xl:hidden font-mono break-words">
|
||||
Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
|
||||
Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
|
||||
</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<p class="font-mono font-bold text-2xl">Schulungen</p>
|
||||
<p class="font-mono text-lg break-words">
|
||||
Zusätzlich biete ich tolle IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
|
||||
</p>
|
||||
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<p class="font-mono font-bold text-2xl">Server-Deployment</p>
|
||||
</div>
|
||||
<p class="font-mono">
|
||||
Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
|
||||
dass Anwendungen reibungslos und effizient auf Servern laufen.
|
||||
</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div
|
||||
class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
|
||||
>
|
||||
<div>
|
||||
<p class="font-mono font-bold text-2xl">WICHTIG!</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-mono text-base">
|
||||
Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
|
||||
einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich berate
|
||||
dich dementsprechend.
|
||||
</p>
|
||||
<div
|
||||
class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
|
||||
>
|
||||
<div>
|
||||
<p class="font-mono font-bold text-2xl">WICHTIG!</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-mono text-base">
|
||||
Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
|
||||
einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich
|
||||
berate dich dementsprechend.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
</PageLayout>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
import Footer from "../views/Footer.astro";
|
||||
---
|
||||
|
||||
<Navigation />
|
||||
<div class="h-screen w-screen flex flex-col">
|
||||
<PageLayout>
|
||||
<div class="w-screen flex flex-col">
|
||||
<div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
|
||||
<div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
|
||||
<div
|
||||
|
|
@ -68,5 +69,5 @@ import Footer from "../views/Footer.astro";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
import PageLayout from "../layouts/PageLayout.astro";
|
||||
|
||||
---
|
||||
|
||||
<PageLayout>
|
||||
|
||||
</PageLayout>
|
||||
|
|
@ -3,6 +3,11 @@
|
|||
src: url("/fonts/FiraSans/FiraSans-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: syne;
|
||||
src: url("/fonts/Syne/Syne-VariableFont_wght.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@keyframes pulse-custom {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
|
|
@ -13,5 +18,6 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fira';
|
||||
font-family: 'syne';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<section id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
|
||||
<div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
|
||||
<div class="w-full flex flex-col items-center gap-3">
|
||||
<div
|
||||
class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
|
||||
>
|
||||
<img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
|
||||
</div>
|
||||
<p class="text-2xl">Das bin ich!</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
|
||||
<p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
|
||||
<p>
|
||||
Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
|
||||
</p>
|
||||
<p>
|
||||
<span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! 🚀
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||
</section>
|
||||
|
|
@ -12,7 +12,7 @@ const products: Product[] = [
|
|||
{
|
||||
icon: "/img/terminal.svg",
|
||||
title: "Server-Deployment",
|
||||
text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in ihrem Netzwerk."
|
||||
text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in deinem Netzwerk."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
|
|
@ -31,8 +31,8 @@ const products: Product[] = [
|
|||
products.slice(0, 3).map((product, i) => {
|
||||
return (
|
||||
<div
|
||||
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
|
||||
i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
|
||||
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg shadow-md ${
|
||||
i % 2 === 0 ? "bg-gradient-to-r from-emerald-400 to-emerald-500 text-zinc-900 flex-row" : "bg-gradient-to-l from-neutral-900 to-neutral-800 text-neutral-100 flex-row-reverse"
|
||||
}`}
|
||||
>
|
||||
<img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@ const projects: Project[] = [
|
|||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
text: ""
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "Portfolio",
|
||||
text: "Mein Portfolio"
|
||||
title: "Mein Portfolio",
|
||||
text: ""
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "SolidJS Komponenten-Bibliothek",
|
||||
text: "Fertige Komponenten für SolidJS Projekte"
|
||||
text: "coming soon..."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
|
|
@ -27,24 +27,24 @@ const projects: Project[] = [
|
|||
import { Button } from "../components/partials/Button";
|
||||
---
|
||||
|
||||
<section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
|
||||
<div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
|
||||
<section class="w-screen min-h-[66vh] bg-zinc-50 text-zinc-900">
|
||||
<div class="py-5 w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
|
||||
<p class="text-2xl underline">Meine Projekte</p>
|
||||
<div
|
||||
class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
|
||||
class="max-sm:flex-1 gap-2 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
|
||||
>
|
||||
{
|
||||
projects.slice(0, 4).map((project, i) => {
|
||||
return (
|
||||
<div
|
||||
class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
|
||||
i % 2 === 0 ? "flex-row-reverse bg-emerald-400" : "flex-row bg-zinc-900 text-zinc-100"
|
||||
class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 shadow-md ${
|
||||
i % 2 === 0 ? "flex-row-reverse bg-gradient-to-r from-emerald-400 to-emerald-500" : "flex-row bg-gradient-to-tl from-zinc-900 to-zinc-800 text-zinc-100"
|
||||
} rounded-lg px-2 py-2 gap-5`}
|
||||
>
|
||||
<div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
|
||||
<img class={`w-10 ${i % 2 === 0 ? "" : "invert"}`} src={project.icon} alt={`img of ${project.icon}`} />
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="flex flex-col justify-center flex-[2]">
|
||||
<p class="text-lg sm:text-center">{project.title}</p>
|
||||
<p class="text-sm sm:text-center">{project.text}</p>
|
||||
</div>
|
||||
|
|
@ -59,4 +59,5 @@ import { Button } from "../components/partials/Button";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="rotate-180 max-md:hidden block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#18181b" fill-opacity="1" d="M0,224L60,197.3C120,171,240,117,360,117.3C480,117,600,171,720,170.7C840,171,960,117,1080,122.7C1200,128,1320,192,1380,224L1440,256L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path></svg>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue