florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline: Add group

Browse source
This commit is contained in:
Florian RICHER 2023-06-03 15:56:14 +02:00
parent 5d64b9649b
commit 92a9a931cb
5 changed files with 110 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/App.tsx
View file

@ -4,6 +4,7 @@ import ShortDescription from "./components/ShortDescription";
import Timeline from "./components/timeline/Timeline";
import TimelineElement from "./components/timeline/TimelineElement";
import {PROJECTS} from "./data/Project";
import TimelineCard from './components/timeline/TimelineElementCard';
function App() {
return (
@ -11,7 +12,34 @@ function App() {
<TopComponent></TopComponent>
<ShortDescription></ShortDescription>
<Timeline>
{ PROJECTS.map(p => <TimelineElement project={p} />) }
<TimelineElement category='2019-2020'>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
</TimelineElement>
<TimelineElement category='2019-2020'>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
</TimelineCard>
</TimelineElement>
</Timeline>
</>
)

39
src/components/timeline/Timeline.scss
View file

@ -4,45 +4,6 @@
& > ul {
@apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
& > li {
@apply mb-12 relative flex;
& > details {
@apply w-4/5 md:w-2/5 left-[10%] md:left-0 rounded-xl overflow-hidden relative bg-[#f5f5f5];
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
& > summary {
@apply block select-none cursor-pointer outline-none p-5 mb-0 font-semibold;
transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
&:hover {
@apply bg-[#f8f8f8];
}
}
& > p {
@apply py-5 pl-0 pr-2;
}
&[open] {
& > summary {
@apply mb-5 pb-5;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
// Place point in center line
&:before {
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
}
&:nth-child(even) {
@apply md:justify-end;
}
}
// Draw center line
&:before {
@apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];

51
src/components/timeline/TimelineElement.scss Normal file
View file

@ -0,0 +1,51 @@
.timeline-element {
@apply relative flex flex-col md:flex-row justify-between;
// Place point in center line
&:before {
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
}
&:nth-child(even) {
@apply md:flex-row-reverse;
.timeline-element__category {
@apply md:flex-row-reverse;
}
}
.timeline-element__info, .timeline-element__category {
@apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
}
.timeline-element__category {
@apply top-5 flex md:justify-end mb-12;
}
.timeline-element__info {
& > details {
@apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
& > summary, & > div {
@apply p-5;
}
& > summary {
@apply block select-none cursor-pointer outline-none mb-0 font-semibold;
transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
&:hover {
@apply bg-[#f8f8f8];
}
}
&[open] {
& > summary {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
}
}

20
src/components/timeline/TimelineElement.tsx
View file

@ -1,18 +1,22 @@
import react, {Children} from 'react'
import './TimelineElement.scss'
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineElementProps = {
project: Project
category: string,
children: ReactNode
}
function TimelineElement({ project } : TimelineElementProps) {
function TimelineElement({ category, children } : TimelineElementProps) {
return (
<li>
<details>
<summary>{ project.name }</summary>
<p>{ project.description }</p>
</details>
<li className='timeline-element'>
<div className='timeline-element__category'>
{ category }
</div>
<div className='timeline-element__info'>
{ children }
</div>
</li>
)
}

18
src/components/timeline/TimelineElementCard.tsx Normal file
View file

@ -0,0 +1,18 @@
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineElementCardProps = {
title: string,
children: ReactNode
}
function TimelineCard({ title, children } : TimelineElementCardProps) {
return (
<details>
<summary>{title}</summary>
<div>{children}</div>
</details>
)
}
export default TimelineCard