[포트폴리오 페이지] 3단계: Projects 섹션 추가

3단계: Projects 섹션 추가

3.1 Projects 섹션 HTML 작성

index.html 파일에서 Projects 섹션에 내용을 추가합니다.

index.html (수정된 부분)

<section id="projects">
    <h2>Projects</h2>
    <div id="project-list">
        <div class="project">
            <h3>Project 1</h3>
            <p>Description of project 1</p>
            <a href="#">View Project</a>
        </div>
        <div class="project">
            <h3>Project 2</h3>
            <p>Description of project 2</p>
            <a href="#">View Project</a>
        </div>
        <div class="project">
            <h3>Project 3</h3>
            <p>Description of project 3</p>
            <a href="#">View Project</a>
        </div>
    </div>
</section>

3.2 Projects 섹션 스타일링

styles.css 파일에서 Projects 섹션에 스타일을 추가합니다.

styles.css (추가된 부분)

#projects {
    background-color: #fff; /* 배경색을 설정합니다. */
    padding: 2em; /* 패딩을 설정합니다. */
    margin-top: 2em; /* 상단 여백을 설정합니다. */
    border-radius: 8px; /* 모서리를 둥글게 만듭니다. */
}

#projects h2 {
    color: #333; /* 제목 색상을 설정합니다. */
}

#project-list {
    display: flex; /* 플렉스 박스로 설정합니다. */
    flex-wrap: wrap; /* 줄바꿈을 허용합니다. */
    gap: 1em; /* 아이템 간의 간격을 설정합니다. */
}

.project {
    background-color: #f4f4f4; /* 배경색을 설정합니다. */
    padding: 1em; /* 패딩을 설정합니다. */
    border-radius: 8px; /* 모서리를 둥글게 만듭니다. */
    flex: 1 1 calc(33.333% - 1em); /* 플렉스 박스의 크기를 설정합니다. */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 그림자를 설정합니다. */
}

.project h3 {
    color: #333; /* 제목 색상을 설정합니다. */
}

.project p {
    color: #666; /* 본문 색상을 설정합니다. */
}

.project a {
    color: #007BFF; /* 링크 색상을 설정합니다. */
    text-decoration: none; /* 링크의 밑줄을 제거합니다. */
    display: inline-block; /* 인라인 블록으로 설정합니다. */
    margin-top: 1em; /* 상단 여백을 설정합니다. */
}

3.3 JavaScript로 Projects 섹션 동적 생성

scripts.js 파일에서 JavaScript를 사용해 Projects 섹션을 동적으로 생성합니다.

scripts.js (수정된 부분)

document.addEventListener("DOMContentLoaded", function() {
    const projects = [
        { title: "Project 1", description: "Description of project 1", link: "#" },
        { title: "Project 2", description: "Description of project 2", link: "#" },
        { title: "Project 3", description: "Description of project 3", link: "#" }
    ];

    const projectList = document.getElementById("project-list");

    projects.forEach(project => {
        const projectDiv = document.createElement("div");
        projectDiv.classList.add("project");

        const projectTitle = document.createElement("h3");
        projectTitle.textContent = project.title;

        const projectDescription = document.createElement("p");
        projectDescription.textContent = project.description;

        const projectLink = document.createElement("a");
        projectLink.href = project.link;
        projectLink.textContent = "View Project";

        projectDiv.appendChild(projectTitle);
        projectDiv.appendChild(projectDescription);
        projectDiv.appendChild(projectLink);

        projectList.appendChild(projectDiv);
    });

    const contactForm = document.getElementById("contact-form");
    contactForm.addEventListener("submit", function(event) {
        event.preventDefault();
        alert("Form submitted!");
    });
});

3.4 커밋과 푸시

변경된 내용을 커밋하고 GitHub에 푸시합니다.

git add index.html styles.css scripts.js
git commit -m "Add Projects section with sample project details"
git push origin main