Git Page로 나만의 포트폴리오 사이트 만들기

728x90

이번 포트폴리오 공모전을 통해 학생들에게 특강을 진행하게 되어서 여기도 조금 작성하려고 한다.

Step1. Github 저장소 만들기

Github란? 개발자 플랫폼. 저장소 호스팅 서비스

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

1. 회원가입하기(가입시 owner 이름 기억하기!)

2. 마이페이지 가서 레포지토리 생성

repository name을 owner이름.github.io로 설정!

public 설정, readme file check 후 생성하기!
(read me 파일은 물건의 설명서 같은거여서 이 저장소가 어떤 저장소인지 홈 화면에서 설명하는 역할을 한다. 없어도 되긴하지만 일단 넣기!)

Step2. 웹페이지 코드 만들기

웹사이트 코딩의 3대장. HTML,CSS,JAVASCRIPT

https://goldenowl.asia/blog/difference-between-html-css-and-javascript

HTML: 웹사이트가 표시되는 방법을 규정하는 언어. 뼈대.
CSS: HTML 문서의 스타일링을 담당.
Javascript: 웹사이트를 움직일 수 있는 여러 기능을 담당.

코드 파일 준비하기

HTML(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="./styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
    <header>
        <div class="profile">
            <img src="profile.jpg" alt="Your Photo" class="profile-pic">
            <h1>Your Name</h1>
            <p class="tagline">한줄소개 작성</p>
        </div>
    </header>
    <nav>
        <ul class="nav-links">
            <li><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section id="about" class="section">
            <h2>About Me</h2>
            <p>
                이곳에 간단한 자기소개를 작성하세요!!
            </p>
        </section>
        <section id="skills" class="section">
            <h2>Skills</h2>
            <ul class="skills-list">
                <li>HTML5, CSS3, JavaScript</li>
                <li>React.js, Node.js</li>
                <li>Data Analysis (Python, SQL)</li>
                <li>Problem-Solving & Critical Thinking</li>
                <li>Team Collaboration & Leadership</li>
            </ul>
        </section>
        <section id="experience" class="section">
            <h2>Experience</h2>
            <div class="experience-item">
                <h3>Software Engineer</h3>
                <p><em>XYZ Company</em> | Jan 2022 - Present</p>
                <p>Developed scalable web applications and optimized system performance by 30%.</p>
            </div>
            <div class="experience-item">
                <h3>Intern</h3>
                <p><em>ABC Solutions</em> | Jun 2021 - Dec 2021</p>
                <p>Assisted in automating workflows, saving 15 hours weekly for the team.</p>
            </div>
        </section>
        <section id="projects" class="section">
            <h2>Projects</h2>
            <div class="project-item">
                <h3>Portfolio Website</h3>
                <p>A responsive and animated personal website built with HTML, CSS, and JavaScript.</p>
                <a href="https://github.com/your-username/portfolio" target="_blank">View Project</a>
            </div>
            <div class="project-item">
                <h3>Data Visualization Dashboard</h3>
                <p>Interactive dashboard for real-time data analytics using Python and D3.js.</p>
                <a href="https://github.com/your-username/data-dashboard" target="_blank">View Project</a>
            </div>
        </section>
        <section id="contact" class="section">
            <h2>Contact</h2>
            <p><strong>Email:</strong> your-email@example.com</p>
            <p><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/your-profile" target="_blank">Your Profile</a></p>
            <p><strong>GitHub:</strong> <a href="https://github.com/your-username" target="_blank">github.com/your-username</a></p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Your Name. All Rights Reserved.</p>
    </footer>
    <script src="./script.js"></script>
</body>
</html>

CSS(styles.css)

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f4f4f4;
}

/* Header Section */
header {
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: white;
    text-align: center;
    padding: 3rem 1rem;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    margin-bottom: 1rem;
}

.tagline {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

/* Navigation */
nav {
    background: #333;
}

.nav-links {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 1rem 0;
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #6a11cb;
}

/* Sections */
.section {
    max-width: 800px;
    margin: 2rem auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

h2 {
    margin-bottom: 1rem;
    color: #2575fc;
}

.skills-list, .experience-item, .project-item {
    margin: 1rem 0;
    padding: 0.5rem 0;
}

.skills-list li {
    margin-bottom: 0.5rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: white;
    margin-top: 2rem;
}

/* Animations */
.profile-pic {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

JavaScript(script.js)

// 네비게이션의 스크롤에 스무스함을 더하기
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetSection = document.getElementById(targetId);

        window.scrollTo({
            top: targetSection.offsetTop - 50,
            behavior: 'smooth'
        });
    });
});

// 웹사이트 입장시 콘솔 메세지지
console.log("Welcome to my portfolio website! 🚀");

2. 파일을 깃허브 저장소(레포지토리)에 올려봅시다!

원래는 git bash나 터미널을 통해 파일을 올리는게 정석이지만, 그것까지 설정하려면 시간이 오래 걸리기에 웹사이트 내에서 바로 올려보도록 하겠습니다!

저장소 Add file > Upload files

git hub는 버전관리에 정말 뛰어난 플랫폼인데, 버전 관리를 잘하기 위해선 변화 하나하나를 잘 기록 해줘야합니다.

commit changes에는 지금 내가 어떤 행동을 하고 있는지, 그에따라서 이 프로그램(저장소)가 어떤 변화가 있는지 간단한 설명을 작성하면 됩니다.

Actions > pages build and deployment가 다 될때까지 기다리기

노란색으로 로딩이 되다가, 초록색 체크가 된다면 배포가 됐다는 말이다.

배포가 됐으면, 주소창에 (ownername.github.io)를 치면은 내가 만든 웹사이트를 어디서든지 들어갈 수 있다!!

CSS 파일 업로드 후 배포 기다렸다가 사이트 다시 들어가보기
Js 파일 업로드 후 배포 기다렸다가 사이트 다시 들어가보기

Step3. 사이트 내용을 나만의 이야기로 바꾸자.

코딩을 어느 정도 할 줄 안다면, 코드 에디터에서 바꾸는게 가장 쉽고 빠르다.

하지만, 사이트에서도 충분히 수정이 가능하다.

index.html 파일을 수정하면 내용을 수정할 수 있다.

Edit this file을 눌러 수정 후 꼭 Commit change 저장!
Actions > 배포가 될 때까지 기다리다가 사이트에서 변경내용 확인

열정맨 이주형

Work Experience 2020.06-2021.06 (1년) 활동계획팀 팀원 Freshman Guide 새내기 관리 학생단체 주요 업무 - FG 홍보 시나리오 작성 및 감독 - 2021년도 새내기 팀빌딩 오리엔테이션 진행 - 새내기 커뮤니티 LC06, 37

jubroooo.github.io

728x90

저작자표시 비영리 변경금지

'활동' 카테고리의 다른 글

[학부연구생] 전자수송층 doping을 통한 QLED 효율 향상수송층 doping을 통한 QLED 효율 향상 (0)	2024.11.12
기록으로써 완성되는 기억 (4)	2024.11.09
맑고 향기롭게 장학후기(자기소개서, 면접, 장학증서 증명식) (0)	2024.06.28
2024학년도 하이트진로 장학생 선발 안내(요식업주 대학생 자녀)( ~ 6/26(수)) (0)	2024.06.25
피로그래밍 20기 회고록(웹개발 연합동아리, 사이드 프로젝트) (1)	2024.02.26

맑은 눈의 공대생

Git Page로 나만의 포트폴리오 사이트 만들기

Step1. Github 저장소 만들기

Step2. 웹페이지 코드 만들기

Step3. 사이트 내용을 나만의 이야기로 바꾸자.

'활동' 카테고리의 다른 글

티스토리툴바

Git Page로 나만의 포트폴리오 사이트 만들기

Step1. Github 저장소 만들기

Step2. 웹페이지 코드 만들기

Step3. 사이트 내용을 나만의 이야기로 바꾸자.

'활동' 카테고리의 다른 글

관련글

티스토리툴바