Merge pull request 'dev' (#34) from dev into feature/responsive
Reviewed-on: Giovanni-Josserand/Portfolio#34
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 368 KiB After Width: | Height: | Size: 367 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 765 KiB |
|
After Width: | Height: | Size: 837 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 3.7 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
@@ -49,6 +49,7 @@
|
|||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 4%;
|
padding: 0 4%;
|
||||||
|
gap: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-details-content {
|
.project-details-content {
|
||||||
@@ -172,7 +173,10 @@ aside ul li a:hover {
|
|||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-details-image {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
@@ -180,3 +184,4 @@ aside ul li a:hover {
|
|||||||
top: 7em;
|
top: 7em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -91,7 +91,9 @@ function ProjectDetails({project}) {
|
|||||||
>
|
>
|
||||||
{project.long_description}
|
{project.long_description}
|
||||||
</ReactMarkdown>
|
</ReactMarkdown>
|
||||||
|
{[...Array(project.nb_image)].map((_, i) => (
|
||||||
|
<img src={`/assets/images/projects/${project.image_name}/${project.image_name}_${i+1}.png`} alt={project.image_name} className="project-details-image"/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
<aside>
|
<aside>
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||