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

[포트폴리오 페이지] 1단계: 프로젝트 초기 설정

by cogito21_js 2024. 6. 16.
반응형

1단계: 프로젝트 초기 설정

1.1 프로젝트 디렉토리 생성

로컬 환경에서 프로젝트 디렉토리를 생성합니다.

mkdir MyPortfolio
cd MyPortfolio

1.2 Git 초기화

생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.

git init

1.3 기본 파일 생성

프로젝트의 기본 파일을 생성합니다.

touch index.html styles.css scripts.js README.md LICENSE

1.4 README.md 작성

README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다.

 

# MyPortfolio

MyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고 있으며, 깔끔한 디자인과 인터랙티브한 요소들이 특징입니다.

## 프로젝트 설명

이 포트폴리오 웹사이트는 다음과 같은 기능들을 포함하고 있습니다:
- 나의 경력과 자기소개를 포함한 'About Me' 섹션
- 완료한 프로젝트들을 소개하는 'Projects' 섹션
- 연락처 정보를 제공하는 'Contact' 섹션

## 설치 방법

이 프로젝트를 로컬 환경에서 실행하려면, 다음 단계를 따라주세요:

1. 이 저장소를 클론합니다.
   ```bash
   git clone https://github.com/yourusername/MyPortfolio.git
   ```
2. 프로젝트 디렉토리로 이동합니다.
   ```bash
   cd MyPortfolio
   ```
3. 웹 브라우저에서 `index.html` 파일을 엽니다.

## 사용 방법

웹사이트를 열고 각 섹션을 탐색하여 나의 정보를 확인할 수 있습니다. 'Contact' 섹션을 통해 연락할 수 있습니다.

## 기여 방법

1. 이 저장소를 포크합니다.
2. 새로운 브랜치를 생성합니다.
   ```bash
   git checkout -b feature/새로운기능
   ```
3. 변경 사항을 커밋합니다.
   ```bash
   git commit -m 'Add 새로운 기능'
   ```
4. 브랜치에 푸시합니다.
   ```bash
   git push origin feature/새로운기능
   ```
5. 풀 리퀘스트를 생성합니다.

## 라이센스

이 프로젝트는 MIT 라이센스를 따릅니다. 자세한 내용은 LICENSE 파일을 참고하세요.

 

1.5 기본 HTML 파일 작성

index.html 파일에 기본 구조를 추가합니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css"> <!-- 스타일 시트를 연결합니다. -->
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="about">
        <h2>About Me</h2>
        <p>Write something about yourself here.</p>
    </section>

    <section id="projects">
        <h2>Projects</h2>
        <div id="project-list"></div>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <form id="contact-form">
            <input type="text" id="name" placeholder="Your Name" required>
            <input type="email" id="email" placeholder="Your Email" required>
            <textarea id="message" placeholder="Your Message" required></textarea>
            <button type="submit">Send</button>
        </form>
    </section>

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

    <script src="scripts.js"></script> <!-- 스크립트 파일을 연결합니다. -->
</body>
</html>

1.6 기본 CSS 파일 작성

styles.css 파일에 기본 스타일링을 추가합니다.

styles.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1em;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 2em;
    margin: 2em 0;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
}

1.7 기본 JavaScript 파일 작성

scripts.js 파일에 기본 스크립트를 추가합니다.

scripts.js

// DOMContentLoaded 이벤트가 발생하면 실행됩니다.
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!"); // 폼 제출 시 알림을 표시합니다.
    });
});

1.8 첫 커밋

모든 파일을 추가하고 첫 커밋을 합니다.

git add .
git commit -m "Initial project setup with HTML, CSS, and JavaScript files"

1.9 GitHub에 푸시

GitHub에 푸시합니다. 먼저 로컬 저장소를 GitHub 원격 저장소와 연결합니다.

git remote add origin https://github.com/yourusername/MyPortfolio.git
git branch -M main
git push -u origin main
반응형
저작자표시

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

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

관련글

티스토리툴바