mirror of
https://github.com/theoludwig/theoludwig.git
synced 2025-05-29 22:37:44 +02:00
feat: add light mode + rewrite in Tailwind CSS (#15)
This commit is contained in:
Divlo
GitHub
@ -2,27 +2,11 @@ import Translation from 'next-translate/Trans'
|
||||
|
||||
export const ProfileDescriptionBottom: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<p className='profile-description-bottom'>
|
||||
<Translation
|
||||
i18nKey='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>
|
||||
</>
|
||||
<p className='block mt-8 mb-0 font-normal text-base text-gray dark:text-gray-dark'>
|
||||
<Translation
|
||||
i18nKey='home:about.descriptionBottom'
|
||||
components={[<br key='break' />]}
|
||||
/>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,11 +5,14 @@ export const ProfileInfo: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='profile-info'>
|
||||
<h1 className='profile-title'>
|
||||
{t('home:about.IAm')} <strong className='important'>Divlo</strong>
|
||||
<div className='pb-2 mb-6 border-b-2 font-headline border-gray-600 dark:border-gray-400'>
|
||||
<h1 className='text-4xl mb-2'>
|
||||
{t('home:about.IAm')}{' '}
|
||||
<strong className='font-semibold text-yellow dark:text-yellow-dark'>
|
||||
Divlo
|
||||
</strong>
|
||||
</h1>
|
||||
<h2 className='profile-description'>{t('home:about.description')}</h2>
|
||||
<h2 className='text-base mb-3'>{t('home:about.description')}</h2>
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
|
||||
@ -4,16 +4,18 @@ interface ProfileItemProps {
|
||||
link?: string
|
||||
}
|
||||
|
||||
export const ProfileItem: React.FC<ProfileItemProps> = props => {
|
||||
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'>
|
||||
<strong className='profile-list__item-title text-black dark:text-white'>
|
||||
{title}
|
||||
</strong>
|
||||
<span className='profile-list__item-info text-gray dark:text-gray-dark'>
|
||||
{link != null ? (
|
||||
<a className='profile-list__link' href={link}>
|
||||
<a className='text-gray dark:text-gray-dark' href={link}>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
@ -39,7 +41,6 @@ export const ProfileItem: React.FC<ProfileItemProps> = props => {
|
||||
display: block;
|
||||
width: 120px;
|
||||
float: left;
|
||||
color: #d4d4d5;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
@ -51,10 +52,6 @@ export const ProfileItem: React.FC<ProfileItemProps> = props => {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #84898e;
|
||||
}
|
||||
.profile-list__link {
|
||||
color: #84898e;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
@ -6,32 +6,14 @@ 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>
|
||||
</>
|
||||
<ul className='m-0 p-0 list-none'>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,25 +2,13 @@ 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>
|
||||
</>
|
||||
<div className='px-2 py-6'>
|
||||
<Image
|
||||
width={370}
|
||||
height={370}
|
||||
src='/images/divlo_logo.png'
|
||||
alt='Divlo'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from './Icon'
|
||||
|
||||
export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Email</title>
|
||||
<path d='M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0112 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 01-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0012 5.93 6.076 6.076 0 005.93 12 6.076 6.076 0 0012 18.07a6.02 6.02 0 004.3-1.792 3.9 3.9 0 003.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12' />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from './Icon'
|
||||
|
||||
export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>GitHub</title>
|
||||
<path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
14
components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
Normal file
14
components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
const { children, ...rest } = props
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 24 24'
|
||||
className='dark:text-white text-black w-8 h-8 fill-current'
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from './Icon'
|
||||
|
||||
export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Twitch</title>
|
||||
<path d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z' />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from './Icon'
|
||||
|
||||
export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>Twitter</title>
|
||||
<path d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z' />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Icon } from './Icon'
|
||||
|
||||
export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
||||
return (
|
||||
<Icon {...props}>
|
||||
<title>YouTube</title>
|
||||
<path d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
|
||||
</Icon>
|
||||
)
|
||||
}
|
||||
@ -1,50 +1,22 @@
|
||||
import { Tooltip } from 'components/design/Tooltip'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface SocialMediaItemProps {
|
||||
link: string
|
||||
socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
|
||||
ariaLabel: string
|
||||
}
|
||||
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
|
||||
const { link, socialMedia } = props
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
|
||||
const { link, ariaLabel, children } = 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>
|
||||
</>
|
||||
<li className='inline-block mx-4 my-1'>
|
||||
<a
|
||||
href={link}
|
||||
aria-label={ariaLabel}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='relative inline-block bg-transparent'
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,41 +1,31 @@
|
||||
import { SocialMediaItem } from './SocialMediaItem'
|
||||
import { TwitterIcon } from './SocialMediaIcons/TwitterIcon'
|
||||
import { GitHubIcon } from './SocialMediaIcons/GitHubIcon'
|
||||
import { YouTubeIcon } from './SocialMediaIcons/YouTubeIcon'
|
||||
import { TwitchIcon } from './SocialMediaIcons/TwitchIcon'
|
||||
import { EmailIcon } from './SocialMediaIcons/EmailIcon'
|
||||
|
||||
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>
|
||||
</>
|
||||
<ul className='social-media-list m-0 p-0 list-none text-center mt-2 px-0 py-4'>
|
||||
<SocialMediaItem link='https://twitter.com/Divlo_FR' ariaLabel='Twitter'>
|
||||
<TwitterIcon />
|
||||
</SocialMediaItem>
|
||||
<SocialMediaItem link='https://github.com/Divlo' ariaLabel='GitHub'>
|
||||
<GitHubIcon />
|
||||
</SocialMediaItem>
|
||||
<SocialMediaItem
|
||||
link='https://www.youtube.com/c/Divlo'
|
||||
ariaLabel='YouTube'
|
||||
>
|
||||
<YouTubeIcon />
|
||||
</SocialMediaItem>
|
||||
<SocialMediaItem link='https://www.twitch.tv/divlo' ariaLabel='Twitch'>
|
||||
<TwitchIcon />
|
||||
</SocialMediaItem>
|
||||
<SocialMediaItem link='mailto:contact@divlo.fr' ariaLabel='Email'>
|
||||
<EmailIcon />
|
||||
</SocialMediaItem>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,29 +5,13 @@ 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 className='flex flex-col justify-center items-center px-10 pt-2 pb-6 md:pt-10 xl:pt-0 md:flex-row'>
|
||||
<ProfileLogo />
|
||||
<div className='col-sm-24 col-md-14'>
|
||||
<ProfileInfo />
|
||||
<ProfileList />
|
||||
<ProfileDescriptionBottom />
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.profile {
|
||||
padding: 40px 50px 15px 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.profile {
|
||||
padding: 40px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user