PortFolio Web Project

171889 ワード
CSS html JavaScript テキストリンク
💡PortFolio Web Project
無条件に模倣したクローン符号化はよくない.HTML、CSS、JSの
基礎体力を積んで行こうと思います.
📍 TIPS
  • に表記する前に、親と子供に名前をつけてから行います(その後は非常に混乱し混乱しています).
  • 容器ラベルを考慮すると、作業
  • CSS起動前にすべての変数を指定して続行:root{~}
    • HTML
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seokho's Portfolio</title>
    <meta name='description' content="Portfolio for world-renowned software engineer Seokho">
    <meta name='author' content="Seokho">
    <link rel="icon" type="image/png"  href="imgs/favicon.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <!-- Navbar -->
    <nav id="navbar">
        <div class="navbar__logo">
            <i class="fab fa-diaspora"></i>
            <a href="#">Seokho</a>
        </div>
        <ul class="navbar__menu">
            <li class="navbar__menu__item active">Home</li>
            <li class="navbar__menu__item">About</li>
            <li class="navbar__menu__item">Skills</li>
            <li class="navbar__menu__item">My work</li>
            <li class="navbar__menu__item">Testimonials</li>
            <li class="navbar__menu__item">Contact</li>
        </ul>

    <!-- Toggle button -->
        <button class="navbar__toggle-btn">
            <i class="fas fa-bars"></i>
        </button>
    </nav>
    <!-- Home -->
    <section id="home">
        <img src="imgs/My_Picture.jpeg" 
        alt="Seokho's profile photo" 
        class="home__avatar">
        <h1 class="home__title">Hello, <br />I'm Dream Coder</h1>
        <h2 class="home__description">디자인 감성을 지닌 Front-end Developer</h2>
        <button class="home__contact">Contact Me</button>
    </section>
    
    <!-- About me -->
    <section id="about" class="section section__container">
        <h1>About me</h1>
        <p>
            브랜드의 감성과 컨셉을 담은 감성과 사용자를 위한 효율적인 구성을 표현하는 개발자 '이석호' 입니다
        </p>
        <div class="about__majors">
            <div class="major">
                <div class="major__icon">
                    <i class="fab fa-html5"></i>
                </div>
                <h2 class="major__title">HTML</h2>
                <div class="major__description">HTML5, 빠른 마크업, <br />시멘틱 태그, 접근성</div>
            </div>
            <div class="major">
                <div class="major__icon">
                    <i class="fab fa-css3"></i>
                </div>
                <h2 class="major__title">CSS</h2>
                <div class="major__description">기본, FlexBox, Grid</div>
            </div>
            <div class="major">
                <div class="major__icon">
                    <i class="fab fa-js-square"></i>
                </div>
                <h2 class="major__title">Javascript</h2>
                <div class="major__description">es6 문법, DOM APIs, <br>Web APIs</div>
            </div>
        </div>
        <div class="about__job">
            <div class="job">
                <img src="imgs/jobs/THE_HYUNDAI.png" alt="hyundai department" class="job__logo">
                <div class="job__description">
                    <p class="job_name">Currently working at Hyundai department as VMD Designer</p>
                <p class="job_period">2018 ~ 2021</p>
                </div>
            </div>
            <div class="job">
                <img src="imgs/jobs/THE_HYUNDAI.png" alt="hyundai department" class="job__logo">
                <div class="job__description">
                    <p class="job_name">Currently working at Hyundai department as VMD Designer</p>
                <p class="job_period">2018 ~ 2021</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills -->
    <section id="Skills" class="section">
        <div class="section__container">
            <h1>Skills</h1>
            <h2>Skills & Attributes</h2>
            <p>
                Experience with all phases of the software life-cycle. passion for learning new technologies. Capable of working within a team environment and independently. Ability to plan and time schedule, work under strict time pressure and adapt quickly when needed.
            </p>
            <div class="skillset">
                <div class="skillset__left">
                    <h3 class="skillset__title">Skills</h3>
                    <div class="skill">
                        <div class="skill__description">
                            <span>HTML</span>
                            <span>99%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 99%;"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <div class="skill__description">
                            <span>CSS</span>
                            <span>90%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <div class="skill__description">
                            <span>Javascript</span>
                            <span>90%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <div class="skill__description">
                            <span>Typescript</span>
                            <span>80%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 80%;"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <div class="skill__description">
                            <span>React</span>
                            <span>88%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 88%;"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <div class="skill__description">
                            <span>Nodejs</span>
                            <span>77%</span>
                        </div>
                        <div class="skill_bar">
                            <div class="skill__value" style="width: 77%;"></div>
                        </div>
                    </div>
                </div>
                <div class="skillset__right">
                    <div class="tools">
                        <h3 class="skillset__title">Tools</h3>
                        <ul class="tools_list">
                            <li><span>Visual Studio Code</span></li>
                            <li><span>IntelliJ</span></li>
                            <li><span>Android Studio Code</span></li>
                            <li><span>IOS development tools</span></li>
                            <li><span>Sketch app</span></li>
                        </ul>
                    </div>
                    <div class="etc">
                        <h3 class="skillset__title">Etc</h3>
                        <ul class="etc__list">
                            <li><span>Git</span></li>
                            <li><span>Scrum master</span></li>
                            <li><span>Math</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Work -->
    <section id="work" class="section">
        <div class="section__container">
        <h1>My work</h1>
        <h3>Projects</h3>
        <div class="work__categories">
            <button class="category__btn active">
                All<span class="category__cout">8</span>
            </button>
            <button class="category__btn">
                Front-end<span class="category__cout">3</span>
            </button>
            <button class="category__btn">
                Back-end<span class="category__cout">3</span>
            </button>
            <button class="category__btn">
                Mobile<span class="category__cout">2</span>
            </button>
        </div>
        <div class="work__projects">
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project1</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project1.png" alt="Project1">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project2</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project2.png" alt="Project2">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project3</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project3.png" alt="Project3">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project4</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project4.png" alt="Project4">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project5</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project5.png" alt="Project5">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project6</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project6.png" alt="Project6">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project7</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project7.png" alt="Project7">
            </a>
            <a href="https://github.com/Seokho0120/Portfolio.git" class="project" target="blank">
                <div class="project__description">
                    <h3>Project8</h3>
                    <span>Clone coding with HTML and CSS</span>
                </div>
                <img class="project__img" src="imgs/projects/project8.png" alt="Project8">
            </a>
        </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section id="testimonials" class="section">
        <div class="section__container">
        <h1>Testimonials</h1>
        <h3>See what they say about me</h3>
        <div class="testimonials">
            <div class="testimonial">
                <img src="imgs/testimonial/People.jpeg" alt="People" class="stestimonial__avatar">
                <div class="testimonial__speech-bubbls">
                    <p>
                        이 친구는 문제 상황의 해결능력이 좋고 언변이 뛰어납니다. 어떠한 문제가 생기면 곧바로 처리하려는 집중력과 태도로 빠른 시간안에 효율적인 처리가 가능합니다. 또한, 언변이 좋아 팀원간의 협동을 주도적으로 이끌며 최대한의 아웃핏을 이끌어 냅니다. 그리고 새로운 지식을 적극적으로 배우고 사용해보며 자신의 실력을 올리는데 시간을 아끼지 않는 열정을 갖추고 있습니다.
                    </p>
                    <p class="name"><a href="">Seokho</a> / Hyundai Department</p>
                </div>
            </div>
            <div class="testimonial">
                <div class="testimonial__speech-bubbls">
                    <p>
                        이 친구는 문제 상황의 해결능력이 좋고 언변이 뛰어납니다. 어떠한 문제가 생기면 곧바로 처리하려는 집중력과 태도로 빠른 시간안에 효율적인 처리가 가능합니다. 또한, 언변이 좋아 팀원간의 협동을 주도적으로 이끌며 최대한의 아웃핏을 이끌어 냅니다. 그리고 새로운 지식을 적극적으로 배우고 사용해보며 자신의 실력을 올리는데 시간을 아끼지 않는 열정을 갖추고 있습니다.
                    </p>
                    <p class="name"><a href="">Seokho</a> / Hyundai Department</p>
                </div>
                <img src="imgs/testimonial/People.jpeg" alt="People" class="stestimonial__avatar">
            </div>
        </div>
        </div>
        
    </section>

    <!-- Contact -->
    <section id="contact" class="section">
        <h1 class="contact__title">Let's talk</h1>
        <h2 class="contact__email">[email protected]</h2>
        <div class="contact__links">
            <a href="https://github.com/Seokho0120/Portfolio.git" target="_black">
                <i class="fab fa-github"></i>
            </a>
            <a href="#" target="_black">
                <i class="fab fa-linkedin"></i>
            </a>
        </div>
        <p class="contact__rights">
            2021 Dream Coding Seokho - All rights
        </p>
    </section>
</body>
</html>
    CSS
    /* Global */
:root {
    /* Color */
    --color-white: #ffffff;
    --color-light-white: #eeeeee;
    --color-dark-white: #bdbdbd;
    --color-pink: #fe918d;
    --color-dark-pink: #ff6863;
    --color-dark-grey: #4d4d4d;
    --color-grey: #616161;
    --color-light-grey: #7c7979;
    --color-blue: #73aace;
    --color-yellow: #fff7d1;
    --color-orange: #feb546;
    --color-black: #000000;

  /* Font size */
    --font-large: 48px;
    --font-medium: 28px;
    --font-regular: 18px;
    --font-small: 16px;
    --font-micro: 14px;

  /* Font weight */
    --weight-bold: 700;
    --weight-semi-bold: 600;
    --weight-regular: 400;

  /* Size */
    --size-border-radius: 4px;

  /* Animation */
    --animation-duration: 300ms


}

/* Universal tags */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    cursor: default;
}

a {
    text-decoration: none;
    color: white;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
}

button {
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

/* Typography */
h1 {
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color: var(--color-black);
    margin: 16px 0px;
}

h2 {
    font-size: var(--font-medium);
    font-weight: var(--weight-semi-bold);
    color: var(--color-black);
    margin: 8px 0px;
}

h3 {
    font-size: var(--font-regular);
    font-weight: var(--weight-regular);
    color: var(--color-black);
    margin: 8px 0px;
}

p {
    font-size: var(--font-regular);
    font-weight: var(--weight-regular);
    color: var(--color-black);
    margin: 4px 0px;
}

/* Navbar */
#navbar {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-pink);
    align-items: center;
    color: var(--color-white);
    padding: 16px;
}

.navbar__menu {
    display: flex;
} 

.navbar__logo {
    font-size: var(--font-medium);
    font-weight: var(--weight-semi-bold);
}

.navbar__menu__item {
    padding: 8px 12px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: var(--size-border-radius);
}

.navbar__menu__item.active {
    border: 1px solid var(--color-white);
}

.navbar__menu__item:hover {
    background-color: var(--color-dark-pink);
}

.navbar__toggle-btn {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 24px;
    color: var(--color-white);
    display: none;
}

/* Home */
#home {
    background: url('imgs/homebackground.png') center/cover no-repeat;
    padding: 40px;
    text-align: center;
}

.home__avatar {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
}

.home__title,
.home__description {
    color: var(--color-white);
}

.home__contact {
    color: var(--color-white);
    font-size: var(--font-regular);
    font-weight: var(--weight-bold);
    margin: 24px;
    padding: 8px 12px;
    border: 2px solid var(--color-white);
    border-radius: var(--size-border-radius);
}

/* Section common */
.section {
    padding: 50px;
    text-align: center;
    margin: auto;
}

.section__container {
    max-width: 1200px;
    margin: auto;
}

/* About */
.about__majors {
    display: flex;
    justify-content: space-between;
    margin: 80px 0;
}

.major__icon {
    width: 170px;
    height: 170px;
    font-size: 70px;
    line-height: 170px;
    margin: auto;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    margin-bottom: 16px;
}

.major__icon i {
    transition: all var(--animation-duration) ease;
}

.major__icon:hover i {
    color: var(--color-pink);
    transform: rotate(-30deg) scale(1.1);
}

.major__title,
.major__description {
    color: var(--color-dark-grey);
}

.major__description {
    font-size: var(--font-small);
}

.job {
    display: flex;
    align-items: center;
}

.job__description {
    margin: 0 16px;
    text-align: left;
}

.job_name,
.job_period {
    color: var(--color-light-grey);
}

.job_name {
    font-size: var(--font-small);
}

.job_period {
    font-size: var(--font-micro);
}

.job img {
    width: 80px;
    height: 30px;
}

/* Skill */
#Skills {
    background-color: var(--color-yellow);
}

.skillset {
    display: flex;
    background-color: var(--color-light-grey);
    color: var(--color-light-white);
    margin: 20px 0;
}

.skillset__title {
    color: var(--color-white);
}

.skillset__left {
    flex-basis:  60%;
    background-color: var(--color-dark-grey);
    padding: 20px 40px;
}

.skill {
    margin-bottom: 32px;
}

.skill__description {
    display: flex;
    justify-content: space-between;
}

.skill_bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-grey);
}

.skill__value {
    height: 3px;
    background-color: var(--color-orange);
}

.skillset__right {
    flex-basis: 40%;
}

.tools {
    background-color: var(--color-grey);
}

.tools, .etc {
    padding: 20px;
}

/* Work */
.work__categories {
    margin: 40px;
}

.category__btn {
    border: 1px solid var(--color-dark-white);
    border-radius: var(--size-border-radius);
    font-size: var(--font-regular);
    padding: 8px 48px;
}

.category__btn.active,
.category__btn:hover {
    background-color: var(--color-pink);
    color: var(--color-white);
}

.category__btn.active .category__cout,
.category__btn:hover .category__cout {
    opacity: 1;
    top: 0;
}

.category__cout {
    background-color: var(--color-orange);
    border-radius: 50%;
    color: var(--color-white);
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    position: relative;
    top: -20px;
    left: 4px;
    opacity: 0;
    transition: all var(--animation-duration) ease-in;
}

.work__projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.project {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 250px;
    margin: 2px;
    background-color: var(--color-light-white);
}

.project__img {
    max-width: 100%;
    max-height: 100%;
}

.project__description {
    position: absolute;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--animation-duration) ease-in;
}

.project:hover .project__description {
    opacity: 0.8;
    transform: translateY(0px);
}

.project__description h3 {
    color: var(--color-white);
}

.project__description h3:after {
    content: '';
    display: block;
    position: relative;
    left: 50%;
    width: 25px;
    height: 2px;
    margin-left: -12px;
    margin-top: 8px;
    background-color: var(--color-dark-white);
}

/* Testimonial */
#testimonials {
    background-color: var(--color-light-white);
}

.testimonials {
    margin: 40px;
}

.testimonial {
    display: flex;
    margin: 32px 0;
}

.stestimonial__avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.stestimonial__avatar:nth-child(odd) {
    margin-right: 40px;
}

.stestimonial__avatar:nth-child(even) {
    margin-left: 40px;
}

.testimonial__speech-bubbls {
    padding: 18px;
    background-color: var(--color-white);
    border-radius: var(--size-border-radius);
}

.testimonial__speech-bubbls p {
    color: var(--color-light-grey);
}

.testimonial__speech-bubbls a {
    color: var(--color-pink);
}

/* Contact */
#contact {
    background-color: var(--color-pink);
}

.contact__title,
.contact__email,
.contact__rights {
    color: var(--color-white);
}

.contact__title {
    margin: 32px 0;
}

.contact__links {
    font-size: var(--font-large);
    margin: 24px 0;
}

.contact__links i:hover {
    transform: scale(1.1);
    color: var(--color-yellow);
    transition: all var(--animation-duration) ease-in;
}

/* For below 768px screen width */
@media screen and (max-width: 768px) {
.navbar__toggle-btn {
    display: block;
    }
    #navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar__menu {
        flex-direction: column;
        text-align: center;
        width: 100%;
        display: none;
    }

    .about__majors {
        flex-direction: column;
    }

    .major {
        margin-bottom: 38px;
    }

    .skillset {
        flex-direction: column;
    }

    .project {
        flex-grow: 1;
    }

    .stestimonial__avatar {
        width: 80px;
        height: 80px;
    }
}
    🍀 の最後の部分
    今Javacsriptでダイナミックな楽しみを増やして品質を高めていますまだまだ足りませんが、ゆっくりと理解できる楽しみがあり、楽しかったです.😃
    PHPの知覚ハッシュ
    TIL 76|JS Closure(2)使用と注意事項