theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

feat: add light mode + rewrite in Tailwind CSS (#15)

Browse Source
This commit is contained in:
Divlo
2021-05-08 19:52:04 +02:00
committed by GitHub
parent 26f24329c7
commit c62e66a86a
83 changed files with 5803 additions and 7623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/Portfolio/PortfolioItem.tsx
View File

@ -1,3 +1,4 @@
import { ShadowContainer } from 'components/design/ShadowContainer'
import Image from 'next/image'
export interface PortfolioItemProps {
@ -7,96 +8,34 @@ export interface PortfolioItemProps {
image: string
}
export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
const { title, description, link, image } = props
return (
<>
<div className='col-sm-24 col-md-10 col-xl-7 portfolio-grid'>
<a
className='portfolio-link'
target='_blank'
rel='noopener noreferrer'
href={link}
aria-label={title}
>
<div className='portfolio-figure'>
<Image width={300} height={300} src={image} alt={title} />
</div>
<div className='portfolio-caption'>
<h3 className='portfolio-title important'>{title}</h3>
<p className='portfolio-description'>{description}</p>
</div>
</a>
</div>
<style jsx global>
{`
.portfolio-figure img[alt='${title}'] {
max-height: 300px;
max-width: 300px;
transition: opacity 0.5s ease;
}
.portfolio-grid:hover img[alt='${title}'] {
opacity: 0.05;
}
`}
</style>
<style jsx>
{`
.portfolio-grid {
display: flex;
align-items: center;
position: relative;
flex-direction: column;
word-wrap: break-word;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
}
/* col-md */
@media (min-width: 768px) {
.portfolio-grid {
margin: 0 30px 50px 30px;
}
}
/* col-xl */
@media (min-width: 1200px) {
.portfolio-grid {
margin: 0 20px 50px 20px;
}
}
.portfolio-figure {
display: flex;
justify-content: center;
}
.portfolio-caption {
transition: opacity 0.5s ease;
opacity: 0;
height: 0;
overflow: hidden;
}
.portfolio-description {
font-size: 16px;
}
.portfolio-grid:hover .portfolio-caption {
opacity: 1;
height: auto;
position: absolute;
bottom: 0;
text-align: center;
width: 80%;
}
.portfolio-grid:hover .portfolio-link {
color: var(--text-color);
display: flex;
justify-content: center;
}
`}
</style>
</>
<ShadowContainer className='cursor-pointer relative items-center sm:ml-10'>
<a
className='group inline-flex justify-center'
target='_blank'
rel='noopener noreferrer'
href={link}
aria-label={title}
>
<div className='flex justify-center'>
<Image
className='transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
width={300}
height={300}
src={image}
alt={title}
/>
</div>
<div className='opacity-0 transition-opacity duration-500 h-auto absolute text-center overflow-hidden bottom-0 group-hover:opacity-100'>
<h3 className='text-yellow text-xl font-semibold my-6 dark:text-yellow-dark'>
{title}
</h3>
<p className='my-6'>{description}</p>
</div>
</a>
</ShadowContainer>
)
}

24
components/Portfolio/index.tsx
View File

@ -5,19 +5,19 @@ import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
export const Portfolio: React.FC = () => {
const { t } = useTranslation('home')
const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
returnObjects: true
})
const items: PortfolioItemProps[] = t(
'home:portfolio.items',
{},
{
returnObjects: true
}
)
return (
<>
<div className='container-fluid'>
<div className='row justify-content-center'>
{items.map((item, index) => {
return <PortfolioItem key={index} {...item} />
})}
</div>
</div>
</>
<div className='flex flex-wrap justify-center px-3 w-full'>
{items.map((item, index) => {
return <PortfolioItem key={index} {...item} />
})}
</div>
)
}