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,
epochTitle?: string,
epochDescription?: string
link?: string,
paddingedImage?: boolean
};
@ -16,7 +18,7 @@ type StoryItemProps = {
export const StoryItem = (props: StoryItemProps) => {
return (
<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>
<p class="text-lg font-bold">{props.item.title}</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>}
</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">
{props.item.image && <img class="h-auto w-full opacity-70 object-cover" src={props.item.image} alt="" />}
<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 && <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>
)

5
src/pages/mystory.astro
View File

@ -22,8 +22,9 @@ const storyItems: StoryItemType[] = [
title: "Apprenticeship",
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.",
image: "",
epochTime: "2020 - 2023"
image: "/img/terminal.svg",
epochTime: "2020 - 2023",
paddingedImage: true
}
];
---