Dominik
/
kurwafolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more

This commit is contained in:
Dominik Strangas 2023-08-09 18:39:40 +02:00
parent 05c2d86938
commit 874ec2bc2f
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/partials/Button.astro Normal file
View File

@ -0,0 +1,4 @@
---
let link: string
let action: ()=>{}
---

18
src/pages/index.astro
View File

@ -38,15 +38,15 @@ const projects: Project[] = [
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"
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 items-center text-center">
<p>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">
<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
@ -57,17 +57,17 @@ const projects: Project[] = [
</p>
</div>
</div>
<img class="animate-bounce h-7" src="/img/arrowDown.svg" alt="" />
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
</div>
<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">
<p class="text-2xl underline">Meine Projekte</p>
<div class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:grid-rows-1 py-5 gap-6 flex flex-col rounded-2xl border-zinc-900 border-dashed w-5/6 overflow-hidden px-3">
<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 w-5/6 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/6 flex justify-between sm:py-3 ${i % 2 === 0 ? 'flex-row-reverse bg-emerald-200' : 'flex-row bg-zinc-900 text-zinc-100'} rounded-lg px-2 py-1 gap-5` }>
<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-200' : 'flex-row bg-zinc-900 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">
@ -77,9 +77,9 @@ const projects: Project[] = [
</div>
)
})}
<div class={`col-span-2 border-2 border-zinc-900 bg-emerald-500 px-2 py-1 rounded-lg flex` }>
<p class="m-auto">Mehr</p>
</div>
<a href="/projects" class={`col-span-2 text-center justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-200 px-2 py-1 rounded-lg flex` }>
Mehr
</a>
</div>
</div>
</section>