본문 바로가기
Javascript 프로젝트/01_포트폴리오 페이지(확장)

[포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화

by cogito21_js 2024. 6. 16.
반응형

2. 프로젝트 상세 페이지 추가

이 단계에서는 각 프로젝트에 대한 상세 페이지를 추가하여 방문자가 각 프로젝트의 상세 내용을 확인할 수 있도록 합니다. 상세 페이지를 만들고 링크를 추가하여 이를 구현합니다.

2.1 프로젝트 상세 페이지 HTML 작성

각 프로젝트에 대한 상세 페이지를 추가합니다. 예를 들어 project1.html 파일을 생성합니다.

Git Commit Message

git commit -m "Add detailed project pages"

project1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 1</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Project 1</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="project1.html">Project 1</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Project 1 Overview</h2>
        <p>Details about Project 1...</p> <!-- 프로젝트 1에 대한 상세 설명 -->
        <img src="path_to_image" alt="Project 1 Screenshot"> <!-- 프로젝트 1의 스크린샷 -->
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

2.2 프로젝트 링크 추가

index.html 파일에서 각 프로젝트에 상세 페이지로 연결되는 링크를 추가합니다.

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="project1.html">View Project</a> <!-- 상세 페이지 링크 -->
        </div>
        <div class="project">
            <h3>Project 2</h3>
            <p>Description of project 2</p>
            <a href="project2.html">View Project</a> <!-- 상세 페이지 링크 -->
        </div>
        <div class="project">
            <h3>Project 3</h3>
            <p>Description of project 3</p>
            <a href="project3.html">View Project</a> <!-- 상세 페이지 링크 -->
        </div>
    </div>
</section>

2.3 프로젝트 페이지 추가

각 프로젝트마다 개별적인 HTML 파일을 생성합니다. 여기서는 project2.html과 project3.html을 추가 예시로 보여드립니다.

project2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 2</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Project 2</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="project2.html">Project 2</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Project 2 Overview</h2>
        <p>Details about Project 2...</p> <!-- 프로젝트 2에 대한 상세 설명 -->
        <img src="path_to_image" alt="Project 2 Screenshot"> <!-- 프로젝트 2의 스크린샷 -->
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

project3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 3</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Project 3</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="project3.html">Project 3</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Project 3 Overview</h2>
        <p>Details about Project 3...</p> <!-- 프로젝트 3에 대한 상세 설명 -->
        <img src="path_to_image" alt="Project 3 Screenshot"> <!-- 프로젝트 3의 스크린샷 -->
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

2.4 커밋과 푸시

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

git add index.html project1.html project2.html project3.html
git commit -m "Add detailed project pages"
git push origin main

이렇게 하면 각 프로젝트에 대한 상세 페이지 추가가 완료되었습니다. 이제 방문자들은 각 프로젝트에 대한 더 자세한 정보를 볼 수 있습니다. 다음 단계로 넘어가겠습니다.

3. 애니메이션 추가

3.1 CSS 애니메이션 추가

프로젝트 아이템에 페이드 인 애니메이션을 추가하여 페이지가 더 동적으로 보이게 합니다.

Git Commit Message

git commit -m "Add CSS animations to project items"

코드 (styles.css)

styles.css (애니메이션 추가)

/* 페이드 인 애니메이션 정의 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 프로젝트 아이템에 페이드 인 애니메이션 추가 */
.project {
    animation: fadeIn 1s ease-in-out;
}

3.2 커밋과 푸시

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

git add styles.css
git commit -m "Add CSS animations to project items"
git push origin main

이제 프로젝트 아이템이 부드럽게 나타나는 애니메이션 효과가 추가되었습니다. 다음 단계로 넘어가겠습니다.

4. 다국어 지원

4.1 언어 선택기 추가

언어 선택기를 추가하여 사용자들이 웹사이트의 언어를 변경할 수 있도록 합니다.

Git Commit Message

git commit -m "Add multi-language support"

코드 (index.html)

index.html (언어 선택기 추가)

<header>
    <h1>My Portfolio</h1>
    <nav id="navbar">
        <button id="menu-toggle">☰</button> <!-- 모바일 메뉴 버튼 -->
        <ul id="nav-links">
            <li><a href="#about">About Me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <select id="language-selector">
        <option value="en">English</option>
        <option value="kr">한국어</option>
    </select> <!-- 언어 선택기 추가 -->
</header>

코드 (scripts.js)

scripts.js (다국어 지원 추가)

// 번역 데이터를 정의합니다.
const translations = {
    en: {
        about: "About Me",
        projects: "Projects",
        contact: "Contact",
        // 추가 번역...
    },
    kr: {
        about: "소개",
        projects: "프로젝트",
        contact: "연락처",
        // 추가 번역...
    }
};

// 선택된 언어에 따라 텍스트를 변경합니다.
function setLanguage(language) {
    document.getElementById("about").textContent = translations[language].about;
    document.getElementById("projects").textContent = translations[language].projects;
    document.getElementById("contact").textContent = translations[language].contact;
    // 나머지 번역도 추가...
}

// 언어 선택기에서 언어가 변경될 때 이벤트를 처리합니다.
document.getElementById("language-selector").addEventListener("change", function(event) {
    setLanguage(event.target.value);
});

4.2 커밋과 푸시

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

git add index.html scripts.js
git commit -m "Add multi-language support"
git push origin main

이제 사용자들이 웹사이트의 언어를 변경할 수 있게 되었습니다. 다음 단계로 넘어가겠습니다.

5. 블로그 섹션 추가

5.1 블로그 페이지 HTML 작성

블로그 섹션을 추가하여 블로그 포스트를 보여줍니다.

**Git

Commit Message**

git commit -m "Add blog section with sample posts"

코드 (blog.html)

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Blog</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="blog.html">Blog</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Recent Posts</h2>
        <ul>
            <li><a href="post1.html">Post 1</a></li> <!-- 블로그 포스트 1 링크 -->
            <li><a href="post2.html">Post 2</a></li> <!-- 블로그 포스트 2 링크 -->
            <!-- 추가 포스트... -->
        </ul>
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

5.2 블로그 포스트 페이지 추가

각 블로그 포스트에 대해 개별적인 HTML 파일을 생성합니다. 여기서는 post1.html과 post2.html을 추가 예시로 보여드립니다.

post1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post 1</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Post 1</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="post1.html">Post 1</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Post 1 Title</h2>
        <p>Content of post 1...</p> <!-- 포스트 1의 내용 -->
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

post2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post 2</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>Post 2</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="post2.html">Post 2</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Post 2 Title</h2>
        <p>Content of post 2...</p> <!-- 포스트 2의 내용 -->
    </section>

    <footer>
        <p>&copy; 2023 My Portfolio</p>
    </footer>
</body>
</html>

5.3 커밋과 푸시

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

git add blog.html post1.html post2.html
git commit -m "Add blog section with sample posts"
git push origin main

이렇게 하면 블로그 섹션 추가가 완료되었습니다. 이제 방문자들은 블로그 포스트를 통해 더 많은 내용을 볼 수 있습니다. 다음 단계로 넘어가겠습니다.

6. SEO 최적화

6.1 메타 태그 추가

웹사이트의 SEO를 개선하기 위해 메타 태그와 키워드를 추가합니다.

Git Commit Message

git commit -m "Improve SEO with meta tags and keywords"

코드 (index.html)

index.html (추가된 메타 태그)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="MyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다."> <!-- 사이트 설명 추가 -->
    <meta name="keywords" content="portfolio, web development, HTML, CSS, JavaScript"> <!-- 키워드 추가 -->
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>

6.2 커밋과 푸시

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

git add index.html
git commit -m "Improve SEO with meta tags and keywords"
git push origin main

이렇게 하면 SEO 최적화가 완료되었습니다. 이제 검색 엔진에서 웹사이트가 더 잘 노출될 수 있습니다.

반응형
저작자표시

'Javascript 프로젝트 > 01_포트폴리오 페이지(확장)' 카테고리의 다른 글

[포트폴리오 페이지] 6단계: 반응형 디자인  (0) 2024.06.16
[포트폴리오 페이지] 다음 과정  (0) 2024.06.16
[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선  (0) 2024.06.16
[포트폴리오 페이지] 2단계: About Me 섹션 추가  (0) 2024.06.16
[포트폴리오 페이지] 1단계: 프로젝트 초기 설정  (0) 2024.06.16

관련글

티스토리툴바