juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: change portfolio image height (#190)

Browse source 
Co-authored-by: hoolek77 <szymon.kin@gmail.com>
This commit is contained in:
angbur 2023-01-31 14:38:40 +01:00 committed by GitHub
parent 6fb26101b0
commit 544ad70d87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/types/sections/portfolio-section.types.ts
View file

@ -11,9 +11,9 @@ export interface Project {
*
* **Ratio**: 1:1
*
* **Display size**: 120x120px
* **Display size**: 56x56px
*/
image: Photo;
image?: Photo;
/**
* Date range when you were working on the project.

35
src/web/sections/portfolio/project.astro
View file

@ -18,24 +18,29 @@ const alt = `${name} project thumbnail`;
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-4">
<div class="flex gap-6">
<Photo
src={image}
alt={alt}
width={200}
height={200}
class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
/>
<div class="flex w-full flex-col gap-4">
<div class="flex justify-between">
<div>
<Typography variant="item-title">{name}</Typography>
<Timestamp dates={dates} />
</div>
<div class="flex gap-2">
{links.map((link) => <LinkButton {...link} />)}
<div class="flex gap-4">
{
image && (
<Photo
src={image}
alt={alt}
width={108}
height={108}
class="hidden h-14 w-14 flex-shrink-0 rounded-lg object-cover sm:block"
/>
)
}
<div class="flex w-full justify-between">
<div>
<Typography variant="item-title">{name}</Typography>
<Timestamp dates={dates} />
</div>
<div class="flex gap-2">
{links.map((link) => <LinkButton {...link} />)}
</div>
</div>
</div>
<Photo class="rounded-lg object-cover max-w-[120px] sm:hidden" src={image} alt={alt} />
<div class="inline-grid w-full xl:grid-cols-[auto_auto]">
{details.map((detail) => <LabelledValue {...detail} />)}
</div>