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

even more

This commit is contained in:
zktsn0w 2023-10-10 20:33:01 +02:00
parent 5acd03f641
commit 4016409a66
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/terminal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#27272a" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-terminal " ><path d="M2,4.8l7.2,7.2-7.2,7.2m6.74,0h13.26"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

8
src/components/partials/StoryItem.tsx
View File

@ -5,6 +5,8 @@ export type StoryItemType = {
epochTime?: string, epochTime?: string,
epochTitle?: string, epochTitle?: string,
epochDescription?: string epochDescription?: string
link?: string,
paddingedImage?: boolean
}; };
@ -16,7 +18,7 @@ type StoryItemProps = {
export const StoryItem = (props: StoryItemProps) => { export const StoryItem = (props: StoryItemProps) => {
return ( return (
<div class="p-6 group inline-block w-full relative"> <div class="p-6 group inline-block w-full relative">
<div class="h-44 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md p-3"> <div class="h-full flex-1 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md py-3 px-6">
<div> <div>
<p class="text-lg font-bold">{props.item.title}</p> <p class="text-lg font-bold">{props.item.title}</p>
<p class="w-1/2">{props.item.description}</p> <p class="w-1/2">{props.item.description}</p>
@ -24,8 +26,8 @@ export const StoryItem = (props: StoryItemProps) => {
{props.item.epochTime && <p class="font-mono text-zinc-500 font-bold">{props.item.epochTime}</p>} {props.item.epochTime && <p class="font-mono text-zinc-500 font-bold">{props.item.epochTime}</p>}
</div> </div>
<div class="shadow-md delay-75 group-hover:scale-105 transition-all overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 w-3/12 h-2/3 absolute"> <div class="shadow-md delay-75 group-hover:scale-105 transition-all items-center overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 md:w-32 xl:w-36 w-20 aspect-square absolute">
{props.item.image && <img class="h-auto w-full opacity-70 object-cover" src={props.item.image} alt="" />} {props.item.image && <a class={`h-full w-full ${props.item.paddingedImage && 'p-6'}`} href={props.item.link && ''}><img class="h-auto w-full object-cover" src={props.item.image} alt="" /></a>}
</div> </div>
</div> </div>
) )

5
src/pages/mystory.astro
View File

@ -22,8 +22,9 @@ const storyItems: StoryItemType[] = [
title: "Apprenticeship", title: "Apprenticeship",
description: description:
"During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.", "During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.",
image: "", image: "/img/terminal.svg",
epochTime: "2020 - 2023" epochTime: "2020 - 2023",
paddingedImage: true
} }
]; ];
--- ---