ajklshdf
This commit is contained in:
parent
763ed4bdcd
commit
02df507630
|
|
@ -0,0 +1,53 @@
|
||||||
|
<svg width="1288" height="728" viewBox="0 0 1288 728" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_302_2)" filter="url(#filter0_d_302_2)">
|
||||||
|
<path d="M4 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M1284 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M564 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M404 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M244 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M84 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M724 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M884 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M1044 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M1204 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M644 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M964 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M324 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M164 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M484 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M804 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M1124 0V720" stroke="#10B981"/>
|
||||||
|
<path d="M1284 0L4.00005 0" stroke="#10B981"/>
|
||||||
|
<path d="M1284 720L4.00005 720" stroke="#10B981"/>
|
||||||
|
<path d="M1284 360L4.00005 360" stroke="#10B981"/>
|
||||||
|
<path d="M1284 315L4.00005 315" stroke="#10B981"/>
|
||||||
|
<path d="M1284 180L4.00005 180" stroke="#10B981"/>
|
||||||
|
<path d="M1284 90L4.00005 90" stroke="#10B981"/>
|
||||||
|
<path d="M1284 135L4.00005 135" stroke="#10B981"/>
|
||||||
|
<path d="M1284 270L4.00005 270" stroke="#10B981"/>
|
||||||
|
<path d="M1284 225L4.00005 225" stroke="#10B981"/>
|
||||||
|
<path d="M1284 450L4.00005 450" stroke="#10B981"/>
|
||||||
|
<path d="M1284 405L4.00005 405" stroke="#10B981"/>
|
||||||
|
<path d="M1284 630L4.00005 630" stroke="#10B981"/>
|
||||||
|
<path d="M1284 675L4.00005 675" stroke="#10B981"/>
|
||||||
|
<path d="M1284 585L4.00005 585" stroke="#10B981"/>
|
||||||
|
<path d="M1284 495L4.00005 495" stroke="#10B981"/>
|
||||||
|
<path d="M1284 45L4.00005 45" stroke="#10B981"/>
|
||||||
|
<path d="M1284 540L4.00005 540" stroke="#10B981"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_302_2" x="0" y="0" width="1288" height="728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_302_2"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_302_2" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<clipPath id="clip0_302_2">
|
||||||
|
<rect width="1280" height="720" fill="white" transform="translate(4)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 45 KiB |
|
|
@ -1,11 +1,11 @@
|
||||||
import { For, Show, createSignal } from "solid-js"
|
import { For, Show, createSignal } from "solid-js"
|
||||||
const [mockElements, setmock] = createSignal([...Array(60).keys()])
|
const [mockElements, setmock] = createSignal([...Array(120).keys()])
|
||||||
|
|
||||||
export const LandingHeroAnim = () => {
|
export const LandingHeroAnim = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="relative justify-center items-center hidden lg:flex text-neutral-100">
|
<div class="relative justify-center h-[80vh] 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" >
|
<div class="w-full h-full relative grid grid-cols-[repeat(15,minmax(0,1fr))] grid-rows-8 gap-1" >
|
||||||
<For each={mockElements()}>{() =>
|
<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 class="w-full h-full relative bg-neutral-800 hover:bg-emerald-600 transition-all duration-[1500ms] hover:duration-100">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -13,24 +13,26 @@ export const LandingHeroAnim = () => {
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</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">
|
<section id="whoami" class="h-3/4 w-5/6 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 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-auto px-2 h-full flex-1 flex md:grid grid-cols-2 grid-rows-1 flex-row justify-center items-center">
|
||||||
<div class="w-full flex flex-col items-center gap-3">
|
<div class="h-full flex flex-col items-center justify-center gap-3">
|
||||||
<div
|
<div
|
||||||
class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
|
class="flex justify-center items-center h-3/4 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
|
||||||
>
|
>
|
||||||
<img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
|
<img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-2xl">Das bin ich!</p>
|
<p class="text-2xl">Das bin ich!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
|
<div class="w-full h-auto relative flex justify-center flex-col overflow-hidden">
|
||||||
<p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
|
<div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full slide-left">
|
||||||
<p>
|
<p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
|
||||||
Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
|
<p class="text-2xl">
|
||||||
</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>
|
||||||
</p>
|
<span class="text-emerald-300 text-2xl">Toll</span> das du da bist, endecke gerne meinen Kosmos! 🚀
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Fira;
|
font-family: Fira;
|
||||||
src: url("/fonts/FiraSans/FiraSans-Regular.ttf") format("truetype");
|
src: url("/fonts/FiraSans/FiraSans-Regular.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
@ -9,15 +9,34 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse-custom {
|
@keyframes pulse-custom {
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
0%,
|
||||||
}
|
100% {
|
||||||
50% {
|
opacity: 1;
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-left-anim {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'syne';
|
font-family: 'syne';
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-left {
|
||||||
|
animation: slide-left-anim 1s cubic-bezier(0.165, 0.84, 0.44, 1) .7s forwards;
|
||||||
|
transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
@ -28,7 +28,7 @@ import { Button } from "../components/partials/Button";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="w-screen min-h-[66vh] bg-zinc-50 text-zinc-900">
|
<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">
|
<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>
|
<p class="text-2xl underline">Meine Projekte</p>
|
||||||
<div
|
<div
|
||||||
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"
|
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"
|
||||||
|
|
@ -38,7 +38,9 @@ import { Button } from "../components/partials/Button";
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 shadow-md ${
|
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"
|
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`}
|
} rounded-lg px-2 py-2 gap-5`}
|
||||||
>
|
>
|
||||||
<div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
|
<div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
|
||||||
|
|
@ -59,5 +61,11 @@ import { Button } from "../components/partials/Button";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
<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>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue