Я пытаюсь создать сайт-портфолио, используя gatsby js, и в настоящее время у меня возникают проблемы с созданием карточек проекта с использованием графиков графиков и изображений Гэтсби. Я не уверен, что это просто мой css или мой js.
В основном у меня есть страница проектов, которая получает данные из локального файла JSON и затем передает данные в компонент карты который затем отображается на странице проектов. У меня есть сетка css для контейнера карт, но проблема в том, что компонент карт, похоже, не распознает сетку, а просто выплескивается или просто спускается / пересекает страницу. Вроде сложно объяснить. Все еще учусь ага. Я просто хочу, чтобы 3 карты сверху, а затем 3 снизу.
https://github.com/verv0022/portfolio
они, кажется, занимают все пространство сетки, хотя я имеют ширину?
Страница проекта
const Projects = () => {
const data = useStaticQuery(graphql`
query ProjectsQuery {
allProjectsJson {
edges {
node {
id
name
description
url
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
`)
const projects = data.allProjectsJson.edges
console.log(projects)
return (
<section className="projects">
<main className="projects-content">
<ScrollAnimation
className="projects-title"
animateOnce={true}
animateIn="slideInLeft"
animatePreScroll={false}
initiallyVisible={false}
>
<h2>Here are some of my projects...</h2>
</ScrollAnimation>
<section className="project-preview-container">
<div className="project-preview-item-container">
{projects.map(({ node: project }) => {
return (
<ProjectPreviewItem
key={project.id}
name={project.name}
description={project.description}
imageData={project.image.childImageSharp.fluid}
url={project.url}
/>
)
})}
</div>
</section>
</main>
</section>
)
}
export default Projects
Компонент карты
import React from "react"
import Image from "gatsby-image"
import "./Projects.css"
const ProjectPreviewItem = ({ name, imageData, description, url }) => {
return (
<div className="project-item">
<div className="image-container">
<Image fluid={imageData} alt={name} className="project-img"></Image>
</div>
<div className="project-item-details">
<h2 className="project-url">
<a href={url}>{name}</a>
</h2>
<p className="project-description">{description}</p>
</div>
</div>
)
}
export default ProjectPreviewItem
CSS
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.projects {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
display: grid;
height: 100vh;
}
.projects-content {
grid-area: 2 / 2 / 6 / 6;
}
.projects-title {
font-size: 26px;
}
.project-preview-container {
grid-area: 3 / 2 / 6 / 6;
margin-top: 6rem;
background-color: lightgray;
}
/* .project-preview-item-container {
} */
.projects-title {
width: 40rem;
}
.project-item {
display: flex;
flex-direction: column;
justify-content: center;
border: black solid 2px;
padding: 1rem;
margin: 1rem;
width: 250px;
height: auto;
}
.project-item-details {
margin-top: 20px;
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}