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

42
components/Skills/Skill.tsx
View File

@ -6,39 +6,21 @@ 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]
return (
<>
<a
href={skillProperties.link}
className='skills-link'
target='_blank'
rel='noopener noreferrer'
>
<div className='skills-content text-center'>
<Image
width={60}
height={60}
alt={skill}
src={skillProperties.image}
/>
<p className='skills-text'>{skill}</p>
</div>
</a>
<style jsx>{`
.skills-link {
max-width: 120px;
margin: 0px 10px 0 10px;
}
.skills-text {
margin-top: 5px;
}
`}
</style>
</>
<a
href={skillProperties.link}
className='mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark'
target='_blank'
rel='noopener noreferrer'
>
<div className='text-center'>
<Image width={60} height={60} alt={skill} src={skillProperties.image} />
<p className='mt-1'>{skill}</p>
</div>
</a>
)
}

41
components/Skills/SkillsSection.tsx
View File

@ -5,40 +5,23 @@ 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 (
<>
<ShadowContainer>
<div className='container-fluid'>
<div className='row row-padding'>
<div className='col-24'>
<div className='skills-header'>
<h3 className='important'>{title}</h3>
</div>
<div className='skills-body'>{children}</div>
<ShadowContainer>
<div className='w-full px-4 mx-auto'>
<div className='flex flex-wrap px-4 py-6'>
<div className='flex-1'>
<div className='mb-8 border-b border-gray-600 dark:border-opacity-10 dark:border-white'>
<h3 className='text-yellow font-semibold text-xl my-3 dark:text-yellow-dark'>
{title}
</h3>
</div>
<div className='flex justify-around flex-wrap'>{children}</div>
</div>
</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>
</>
</div>
</ShadowContainer>
)
}