프로젝트 관리

 

 

 

data.js

0.00MB

index.css

0.01MB

 

 

 

 

 

App.css 삭제하고  

App.jsx 안의 내용 비우기

 

 

https://www.figma.com/file/XtVr3JRCGWyZESYxd9EhZK/Contentful?node-id=2%3A8&mode=dev

Figma

이와 같이 만들 예정

 

 

 

Hero.jsx와 Projects.jsx 만듬

 

 

 

 

 

    <section className="hero">
      <div className="hero-center">
        <div className="hero-title">
          <h1>React Projects</h1>
          <p>
            Single-origin coffee deep v sus small batch. Gorpcore vape
            lumbersexual normcore four dollar toast drinking vinegar. Twee 90's
            taiyaki small batch bitters, bespoke jianbing leggings marxism
            keytar pabst adaptogen mixtape tumblr stumptown. DSA twee iceland
            tacos swag tote bag. Solarpunk man bun fingerstache retro pinterest.
          </p>
        </div>
        <div className="img-container">
          <img src={heroImg} alt="woman and the browser" className="img" />
        </div>
      </div>
    </section>

 

 

 

https://undraw.co/illustrations

Illustrations | unDraw

 

를 통해서 프로젝트에 어울리는 이미지를 찾는다.

 

svg파일을 넣음

 

 

 

 

 

 

 

		<section className='projects'>
			<div className='title'>
				<h2>projects</h2>
				<div className='title-underline'></div>
			</div>
			<div className='projects-center'>
				<a href='./assets/birthday.png' target='_blank' rel='noreferrer' className='project'>
					<img src={p1} alt='birthday buddy' className='img' />
					<h5>birthday buddy</h5>
				</a>
				<a href='./assets/birthday.png' target='_blank' rel='noreferrer' className='project'>
					<img src={p1} alt='birthday buddy' className='img' />
					<h5>birthday buddy</h5>
				</a>
				<a href='./assets/birthday.png' target='_blank' rel='noreferrer' className='project'>
					<img src={p1} alt='birthday buddy' className='img' />
					<h5>birthday buddy</h5>
				</a>
				<a href='./assets/birthday.png' target='_blank' rel='noreferrer' className='project'>
					<img src={p1} alt='birthday buddy' className='img' />
					<h5>birthday buddy</h5>
				</a>
			</div>
		</section>

 

 

 

map을 사용해서 data의 모든 내용들을 불러온다. 

import React from "react";
import { projects } from "./data";


const Projects = () => {
  return (
    <section className="projects">
      <div className="title">
        <h2>projects</h2>
        <div className="title-underline"></div>
      </div>
      <div className="projects-center">
        {projects.map((project) => (
          <a
            href={project.url}
            target="_blank"
            rel="noreferrer"
            className="project"
          >
            <img src={project.image} alt="birthday buddy" className="img" />
            <h5>{project.title}</h5>
          </a>
        ))}
      </div>
    </section>
  );
};

export default Projects;