mirror of
https://github.com/theoludwig/theoludwig.git
synced 2025-05-29 22:37:44 +02:00
feat: add divlo.fr
This commit is contained in:
divlo
31
components/Profile/ProfileDescriptionBottom.tsx
Normal file
31
components/Profile/ProfileDescriptionBottom.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import Translation from 'next-translate/Trans'
|
||||
|
||||
export const ProfileDescriptionBottom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className='profile-description-bottom'>
|
||||
<Translation
|
||||
i18nKey={t('home:about.descriptionBottom')}
|
||||
components={[<br key='break' />]}
|
||||
/>
|
||||
</p>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile-description-bottom {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #b2bac2;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
41
components/Profile/ProfileInfo.tsx
Normal file
41
components/Profile/ProfileInfo.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
|
||||
export const ProfileInfo: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='profile-info'>
|
||||
<h1 className='profile-title'>
|
||||
{t('home:about.IAm')} <strong className='important'>Divlo</strong>
|
||||
</h1>
|
||||
<h2 className='profile-description'>{t('home:about.description')}</h2>
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile-info {
|
||||
padding-bottom: 25px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
.profile-title {
|
||||
font-size: 36px;
|
||||
line-height: 1.1;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile-title > strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.profile-description {
|
||||
font-size: 17.4px;
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
79
components/Profile/ProfileList/ProfileItem.tsx
Normal file
79
components/Profile/ProfileList/ProfileItem.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
interface ProfileItemProps {
|
||||
title: string
|
||||
value: string
|
||||
link?: string
|
||||
}
|
||||
|
||||
export const ProfileItem: React.FC<ProfileItemProps> = props => {
|
||||
const { title, value, link } = props
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className='profile-list__item'>
|
||||
<strong className='profile-list__item-title'>{title}</strong>
|
||||
<span className='profile-list__item-info'>
|
||||
{link != null ? (
|
||||
<a className='profile-list__link' href={link}>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile-list__item {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.profile-list__item::after,
|
||||
.profile-list__item::before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
.profile-list__item::after {
|
||||
clear: both;
|
||||
}
|
||||
.profile-list__item-title {
|
||||
display: block;
|
||||
width: 120px;
|
||||
float: left;
|
||||
color: #d4d4d5;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.profile-list__item-info {
|
||||
display: block;
|
||||
margin-left: 125px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #84898e;
|
||||
}
|
||||
.profile-list__link {
|
||||
color: #84898e;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.profile-list__item-title {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.profile-list__item-info {
|
||||
margin-left: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.profile-list__item-info,
|
||||
.profile-list__item-title {
|
||||
width: 100%;
|
||||
float: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
37
components/Profile/ProfileList/index.tsx
Normal file
37
components/Profile/ProfileList/index.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
|
||||
import { ProfileItem } from './ProfileItem'
|
||||
|
||||
export const ProfileList: React.FC = () => {
|
||||
const { t } = useTranslation('home')
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className='profile-list'>
|
||||
<ProfileItem
|
||||
title={t('home:about.birthDate')}
|
||||
value='31/03/2003'
|
||||
/>
|
||||
<ProfileItem
|
||||
title={t('home:about.nationality')}
|
||||
value='Alsace, France'
|
||||
/>
|
||||
<ProfileItem
|
||||
title='Email'
|
||||
value='contact@divlo.fr'
|
||||
link='mailto:contact@divlo.fr'
|
||||
/>
|
||||
</ul>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
26
components/Profile/ProfileLogo.tsx
Normal file
26
components/Profile/ProfileLogo.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import Image from 'next/image'
|
||||
|
||||
export const ProfileLogo: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='col-sm-24 col-md-10'>
|
||||
<div className='profile-logo'>
|
||||
<Image
|
||||
width={800}
|
||||
height={800}
|
||||
src='/images/divlo_logo.png'
|
||||
alt='Divlo'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.profile-logo {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
50
components/Profile/SocialMediaList/SocialMediaItem.tsx
Normal file
50
components/Profile/SocialMediaList/SocialMediaItem.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Tooltip } from 'components/design/Tooltip'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface SocialMediaItemProps {
|
||||
link: string
|
||||
socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
|
||||
}
|
||||
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
|
||||
const { link, socialMedia } = props
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className='social-media-list__item'>
|
||||
<a
|
||||
href={link}
|
||||
aria-label={socialMedia}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='social-media-list__link'
|
||||
>
|
||||
<Tooltip title={socialMedia}>
|
||||
<Image
|
||||
width={45}
|
||||
height={45}
|
||||
alt={socialMedia}
|
||||
src={`/images/web/${socialMedia}.png`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.social-media-list__item {
|
||||
display: inline-block;
|
||||
margin: 5px 15px;
|
||||
}
|
||||
.social-media-list__link {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
41
components/Profile/SocialMediaList/index.tsx
Normal file
41
components/Profile/SocialMediaList/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { SocialMediaItem } from './SocialMediaItem'
|
||||
|
||||
export const SocialMediaList: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='row justify-content-center'>
|
||||
<ul className='social-media-list'>
|
||||
<SocialMediaItem
|
||||
socialMedia='Twitter'
|
||||
link='https://twitter.com/Divlo_FR'
|
||||
/>
|
||||
<SocialMediaItem
|
||||
socialMedia='GitHub'
|
||||
link='https://github.com/Divlo'
|
||||
/>
|
||||
<SocialMediaItem
|
||||
socialMedia='YouTube'
|
||||
link='https://www.youtube.com/c/Divlo'
|
||||
/>
|
||||
<SocialMediaItem
|
||||
socialMedia='Twitch'
|
||||
link='https://www.twitch.tv/divlo'
|
||||
/>
|
||||
<SocialMediaItem socialMedia='Email' link='mailto:contact@divlo.fr' />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.social-media-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
33
components/Profile/index.tsx
Normal file
33
components/Profile/index.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { ProfileDescriptionBottom } from './ProfileDescriptionBottom'
|
||||
import { ProfileInfo } from './ProfileInfo'
|
||||
import { ProfileList } from './ProfileList'
|
||||
import { ProfileLogo } from './ProfileLogo'
|
||||
|
||||
export const Profile: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='row profile'>
|
||||
<ProfileLogo />
|
||||
<div className='col-sm-24 col-md-14'>
|
||||
<ProfileInfo />
|
||||
<ProfileList />
|
||||
<ProfileDescriptionBottom />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile {
|
||||
padding: 40px 50px 15px 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.profile {
|
||||
padding: 40px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user