mirror of
https://github.com/theoludwig/theoludwig.git
synced 2025-05-29 22:37:44 +02:00
chore: usage of prettier, eslint and lint-staged instead of ts-standard
This commit is contained in:
@ -17,15 +17,11 @@ export const FormResult: React.FC<FormResultProps> = (props) => {
|
||||
|
||||
if (state === 'loading' || state === 'success') {
|
||||
return (
|
||||
<FormState state={state}>
|
||||
{t(`home:contact.result.${state}`)}
|
||||
</FormState>
|
||||
<FormState state={state}>{t(`home:contact.result.${state}`)}</FormState>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FormState state='error'>
|
||||
{t(`home:contact.result.${state}`)}
|
||||
</FormState>
|
||||
<FormState state='error'>{t(`home:contact.result.${state}`)}</FormState>
|
||||
)
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ export interface FormStateProps extends React.ComponentPropsWithRef<'p'> {
|
||||
children: string
|
||||
}
|
||||
|
||||
export const FormState: React.FC<FormStateProps> = props => {
|
||||
export const FormState: React.FC<FormStateProps> = (props) => {
|
||||
const { state, children, ...rest } = props
|
||||
const { t } = useTranslation()
|
||||
|
||||
@ -15,24 +15,28 @@ export const FormState: React.FC<FormStateProps> = props => {
|
||||
<p className={state} {...rest}>
|
||||
{['error', 'success'].includes(state) && (
|
||||
<b>
|
||||
{state === 'error' ? t('home:contact.error') : t('home:contact.success')}:
|
||||
{state === 'error'
|
||||
? t('home:contact.error')
|
||||
: t('home:contact.success')}
|
||||
:
|
||||
</b>
|
||||
)}{' '}
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.form-result {
|
||||
margin: 30px;
|
||||
}
|
||||
.success {
|
||||
color: #90ee90;
|
||||
}
|
||||
.error {
|
||||
color: #ff7f7f;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.form-result {
|
||||
margin: 30px;
|
||||
}
|
||||
.success {
|
||||
color: #90ee90;
|
||||
}
|
||||
.error {
|
||||
color: #ff7f7f;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -6,7 +6,7 @@ export interface ErrorPageProps {
|
||||
message: string
|
||||
}
|
||||
|
||||
export const ErrorPage: React.FC<ErrorPageProps> = props => {
|
||||
export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
|
||||
const { message, statusCode } = props
|
||||
const { t } = useTranslation()
|
||||
|
||||
@ -19,19 +19,20 @@ export const ErrorPage: React.FC<ErrorPageProps> = props => {
|
||||
{message} <Link href='/'>{t('errors:returnToHomePage')}</Link>
|
||||
</p>
|
||||
|
||||
<style jsx global>{`
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
}
|
||||
#__next {
|
||||
padding-top: 0;
|
||||
}
|
||||
`}
|
||||
<style jsx global>
|
||||
{`
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
}
|
||||
#__next {
|
||||
padding-top: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -7,7 +7,8 @@ export const Footer: React.FC = () => {
|
||||
<>
|
||||
<footer className='Footer text-center'>
|
||||
<p>
|
||||
<span className='important'>Divlo</span> | {t('common:allRightsReserved')}
|
||||
<span className='important'>Divlo</span> |{' '}
|
||||
{t('common:allRightsReserved')}
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
|
@ -7,7 +7,7 @@ interface HeadProps {
|
||||
url?: string
|
||||
}
|
||||
|
||||
export const Head: React.FC<HeadProps> = props => {
|
||||
export const Head: React.FC<HeadProps> = (props) => {
|
||||
const {
|
||||
title = 'Divlo',
|
||||
image = '/images/icons/icon-96x96.png',
|
||||
|
@ -7,7 +7,7 @@ interface InterestItemProps {
|
||||
fontAwesomeIcon: IconDefinition
|
||||
}
|
||||
|
||||
export const InterestItem: React.FC<InterestItemProps> = props => {
|
||||
export const InterestItem: React.FC<InterestItemProps> = (props) => {
|
||||
const { fontAwesomeIcon, title } = props
|
||||
|
||||
return (
|
||||
|
@ -6,9 +6,13 @@ import { InterestsList } from './InterestsList'
|
||||
export const Interests: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
|
||||
returnObjects: true
|
||||
})
|
||||
const paragraphs: InterestParagraphProps[] = t(
|
||||
'home:interests.paragraphs',
|
||||
{},
|
||||
{
|
||||
returnObjects: true
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -7,7 +7,7 @@ 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 (
|
||||
@ -32,15 +32,15 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
|
||||
|
||||
<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;
|
||||
}
|
||||
`}
|
||||
.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>
|
||||
|
@ -5,9 +5,13 @@ 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 (
|
||||
<>
|
||||
|
@ -4,7 +4,7 @@ interface ProfileItemProps {
|
||||
link?: string
|
||||
}
|
||||
|
||||
export const ProfileItem: React.FC<ProfileItemProps> = props => {
|
||||
export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
|
||||
const { title, value, link } = props
|
||||
|
||||
return (
|
||||
|
@ -8,10 +8,7 @@ export const ProfileList: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<ul className='profile-list'>
|
||||
<ProfileItem
|
||||
title={t('home:about.birthDate')}
|
||||
value='31/03/2003'
|
||||
/>
|
||||
<ProfileItem title={t('home:about.birthDate')} value='31/03/2003' />
|
||||
<ProfileItem
|
||||
title={t('home:about.nationality')}
|
||||
value='Alsace, France'
|
||||
|
@ -14,12 +14,13 @@ export const ProfileLogo: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.profile-logo {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.profile-logo {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -6,7 +6,7 @@ interface SocialMediaItemProps {
|
||||
socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
|
||||
}
|
||||
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
|
||||
export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
|
||||
const { link, socialMedia } = props
|
||||
|
||||
return (
|
||||
|
@ -25,16 +25,17 @@ export const SocialMediaList: React.FC = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.social-media-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.social-media-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -6,7 +6,7 @@ export interface SkillProps {
|
||||
skill: keyof typeof skills
|
||||
}
|
||||
|
||||
export const Skill: React.FC<SkillProps> = props => {
|
||||
export const Skill: React.FC<SkillProps> = (props) => {
|
||||
const { skill } = props
|
||||
const skillProperties = skills[skill]
|
||||
|
||||
@ -29,15 +29,16 @@ export const Skill: React.FC<SkillProps> = props => {
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style jsx>{`
|
||||
.skills-link {
|
||||
max-width: 120px;
|
||||
margin: 0px 10px 0 10px;
|
||||
}
|
||||
.skills-text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.skills-link {
|
||||
max-width: 120px;
|
||||
margin: 0px 10px 0 10px;
|
||||
}
|
||||
.skills-text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -5,7 +5,7 @@ export interface SkillsSectionProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const SkillsSection: React.FC<SkillsSectionProps> = props => {
|
||||
export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
|
||||
const { title, children } = props
|
||||
|
||||
return (
|
||||
@ -23,21 +23,22 @@ export const SkillsSection: React.FC<SkillsSectionProps> = props => {
|
||||
</div>
|
||||
</ShadowContainer>
|
||||
|
||||
<style jsx>{`
|
||||
.skills-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.skills-header > h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.skills-body {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-flow: row wrap;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.skills-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.skills-header > h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.skills-body {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-flow: row wrap;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -16,59 +16,60 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.form-group-animation {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-group-animation input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 35px;
|
||||
color: var(--color-text-1);
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.form-group-animation label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.form-group-animation label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.label-content {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-group-animation input:focus + .label .label-content,
|
||||
.form-group-animation input:valid + .label .label-content {
|
||||
transform: translateY(-150%);
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.form-group-animation input:focus + .label::after,
|
||||
.form-group-animation input:valid + .label::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.form-group-animation {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-group-animation input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 35px;
|
||||
color: var(--color-text-1);
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.form-group-animation label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.form-group-animation label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.label-content {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-group-animation input:focus + .label .label-content,
|
||||
.form-group-animation input:valid + .label .label-content {
|
||||
transform: translateY(-150%);
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.form-group-animation input:focus + .label::after,
|
||||
.form-group-animation input:valid + .label::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
export const RevealFade: React.FC = props => {
|
||||
export const RevealFade: React.FC = (props) => {
|
||||
const { children } = props
|
||||
|
||||
const htmlElement = useRef<HTMLDivElement>(null)
|
||||
@ -8,7 +8,7 @@ export const RevealFade: React.FC = props => {
|
||||
useEffect(() => {
|
||||
const observer = new window.IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('reveal-visible')
|
||||
observer.unobserve(entry.target)
|
||||
@ -30,19 +30,20 @@ export const RevealFade: React.FC = props => {
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
.reveal-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transition: all 500ms ease-out 100ms;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
.reveal-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transition: all 500ms ease-out 100ms;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -3,8 +3,8 @@ import { forwardRef } from 'react'
|
||||
type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
|
||||
|
||||
export const SectionHeading = forwardRef<
|
||||
HTMLHeadingElement,
|
||||
SectionHeadingProps
|
||||
HTMLHeadingElement,
|
||||
SectionHeadingProps
|
||||
>((props, ref) => {
|
||||
const { children, ...rest } = props
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
|
||||
|
||||
export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
|
||||
export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
|
||||
return (
|
||||
|
@ -16,22 +16,23 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
<textarea id={name} name={name} ref={ref} {...rest} />
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.form-group {
|
||||
padding-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group textarea {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
margin-top: 8px;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.form-group {
|
||||
padding-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group textarea {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
margin-top: 8px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
@ -3,7 +3,7 @@ interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const Tooltip: React.FC<TooltipProps> = props => {
|
||||
export const Tooltip: React.FC<TooltipProps> = (props) => {
|
||||
const { title, children, ...rest } = props
|
||||
return (
|
||||
<>
|
||||
@ -12,37 +12,38 @@ export const Tooltip: React.FC<TooltipProps> = props => {
|
||||
<span className='title'>{title}</span>
|
||||
</span>
|
||||
|
||||
<style jsx>{`
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
background-color: #222222;
|
||||
padding: 5px 8px;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s ease-in;
|
||||
transform: translate3d(0, -15px, 0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.tooltip ~ .tooltip:hover .title,
|
||||
.tooltip:first-child:hover .title {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all 0.35s ease-out;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
background-color: #222222;
|
||||
padding: 5px 8px;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s ease-in;
|
||||
transform: translate3d(0, -15px, 0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.tooltip ~ .tooltip:hover .title,
|
||||
.tooltip:first-child:hover .title {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all 0.35s ease-out;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
Reference in New Issue
Block a user