개발자 포트폴리오

2022. 12. 14. 21:02

728x90

안녕하세요ㅎㅎ

코딩을 배운지 몇달밖에 안된 초보입니당..

처음으로 만들어본 포트폴리오구요
화려하게 만들고싶은데 뭘 어떻게 해야될지 아직 감이 안와서 ㅠㅠ 생각한걸 표현을 못하겠어요...
지금 배운것들로 최대한 이것저것 다 써가면서 만들어봤습니당..
실력이 좀 더 늘면 다시 만들어봐겠어요.....ㅎㅎ;;;

HTML 코드

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Memo</title>
    <script src="랜딩페이지.js" defer></script>
    <link rel="stylesheet" href="랜딩페이지.css">
    <script src="https://kit.fontawesome.com/3777ee8c9b.js" crossorigin="anonymous"></script>
</head>
    <body>

<!-- 상단 메뉴 -->
       <header>
           <nav class="headA">
               <span><a href="#" class="num1">HOME</a></span>
                <span><a href="#a1" class="num2">ABOUT</a></span>
                <span><a href="#a2" class="num3">SKILL</a></span>
                <span><a href="#a3" class="num4">PROJECTS</a></span>
                <span><a href="#a4" class="num5">CONTACT</a></span>
                <a>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                </a>
            </nav>
        </header>

<!--메인화면-->
        <section class="conA" >
            <div class="container">
                <h1>PORTFOLIO</h1>
                <p>안녕하세요 *** 입니다.</p>
                <p>제 포트폴리오에 오신것을 환영합니다.</p>
            </div>
        </section>
<div id="a1"></div>

<!--소개-->
        <section class="conB">
            <div class="ABOUT">ABOUT</div>
            <div class="container">
                <div class="Img"></div>
                <div class="cover">
                여기에 소개글 작성
                </div>
            </div>
        </section>
<div id="a2"></div>
<!--스킬-->
        <section class="conC">
            <div class="SKILL">SKILL</div>
            <div class="container">
                <div class="text">
                    <h1 class="HTML">HTML</h1>
                    <div class="HTMLImg"></div>
                </div>
                <div class="text">
                    <h1 class="Java">Java</h1>
                    <div class="JavaImg"></div>
                </div>
                <div class="text">
                    <h1 class="Python">Python</h1>
                    <div class="PythonImg"></div>
                </div>
                <div class="text">
                    <h1 class="SQL">SQL</h1>
                    <div class="SQLImg"></div>
                </div>
                <div class="text">
                    <h1 class="CSS">CSS</h1>
                    <div class="CSSImg"></div>
                </div>
                <div class="text">
                    <h1 class="JavaScript">JavaScript</h1>
                    <div class="JavaScriptImg"></div>
                </div>
            </div>
        </section>
<div id="a3"></div>
<!--작업-->
        <section class="conD">
            <div class="PROJECTS">PROJECTS</div>
            <div class="container">
                <div><img src="../Resource/NumberPuzzle.gif" class="Img"></div>
                <div class="Project">
                    <h1>01. NumberPuzzle</h1>
                    <h2>내용</h2>
                    <p>
                        START버튼 클릭 시
                        랜덤 숫자들이 칸에 배치되고
                        그 숫자들을 순서대로 빠르게 찾아보는 간단한 게임입니다.
                    </p>
                    <h2>참여인원</h2>
                    <p>1 명</p>
                    <h2>개발기간</h2>
                    <p>22.10.22 ~ 22.10.23</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>

            <div class="container">
                <div><img src="../Resource/PORTFOLIO.gif" class="Img"></div>
                <div class="Project">
                    <h1>02. PORTFOLIO</h1>
                    <h2>내용</h2>
                    <p>
                        포트폴리오 입니다.
                    </p>
                    <h2>참여인원</h2>
                    <p>1 명</p>
                    <h2>개발기간</h2>
                    <p>22.10.29 ~ 22.10.30</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>
            <div class="container">
                <div><img src="../Resource/1.jpg" class="Img"></div>
                <div class="Project">
                    <h1>03. 준비중</h1>
                    <h2>내용</h2>
                    <p>
                        -
                    </p>
                    <h2>참여인원</h2>
                    <p>-</p>
                    <h2>개발기간</h2>
                    <p>-</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>
        </section>
<!--연락처-->
        <nav class="footA">
            <div class="CONTACT">CONTACT</div>
            <div class="tel">
                <ul>
                    <li><i class="fa-solid fa-envelope"></i> 이메일</li>
                    <li><i class="fa-solid fa-phone"></i> 폰번호</li>
                </ul>
            </div>
        </nav>
        <div class="footD">&copy;2022 본인이름. All rights reserved.</div>
<div id="a4"></div>
    </body>
</html>

300x250

CSS 코드

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap');
/* 기본 설정: 페이지 전체 */
body {
    margin: 0;
}
/*-----------------------------------------------------------------*/
/*------------------------      메뉴칸     -------------------------*/
/*-----------------------------------------------------------------*/
.headA {
    width: 400px;
    justify-content: center;
    top: -145px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(235, 246, 255, 0.72);
    position: fixed;
    display: block;
    border-radius: 15px;
    transition-duration: 0.7s;
    cursor : pointer;
    font-family: 'Cinzel', serif;
    z-index: 99;
}
.headA:hover {
    transition-duration: 0.7s;
    top: 190px;
    display: block;
}
.headA > span > a {
    font-weight: 1000;
    font-size: 1.8rem;
    border-radius: 15px;
    transition-duration: 0.5s;
    display: block;
    color: #000000;
}
.headA > span > a:hover{
    text-align: center;
    color: #ffffff;
    cursor : pointer;
    border-radius: 15px;
    box-shadow: 1px 1px 5px 1px black;
    letter-spacing: 1rem;
    background-color: rgb(0, 0, 0);
    transition-duration: 0.5s;
    animation: Line 0.8s infinite;
}
.headA a {
    display: block;
    padding: 15px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}

.headA i{
    animation: flash 3s infinite;

}
.conA > .container{
    left: 100px;
    /*display: flex;*/
}




/*-----------------------------------------------------------------*/
/*------------------------      메인       -------------------------*/
/*-----------------------------------------------------------------*/
.conA {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../Resource/2-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    min-width: 450px;
    color: #FFF;
}
.conA > .container {
    width: 100%;
    height: 600px;
    text-align: center;
    justify-content: center;
    display: inline-block;
    box-shadow: 10px 10px 20px black;
    text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
    background-color: rgba(206, 206, 206, 0.84);
    animation: Line 2s infinite;

}
.conA > .container > h1 {
    color: #20273b;
    font-size: 10rem;
    margin-bottom: -1px;
    font-family: 'Cinzel', serif;

}
.conA > .container > p{
    margin-bottom: -50px;
    color: #20273b;
    font-size: 2.5rem;
    font-weight: 1000;
    font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------      소개       -------------------------*/
/*-----------------------------------------------------------------*/
.conB {
    background-color: #dbe3e7;
    border-top: 5px solid #99b5b9;
}
.conB > .ABOUT {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.conB > .container {
    padding: 10%;
    display: flex;
    justify-content: center;
}

.conB > .container > .Img {
    position: relative;
    width: 600px;
    height: 400px;
    margin-right: 5%;
    display: inline-block;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    background-image: url(../Resource/1.jpg);
}

.conB > .container > .cover{
    width: 500px;
    display: inline-block;
    font-size: 25px;
    font-family: 'Hahmlet', serif;
}


/*-----------------------------------------------------------------*/
/*------------------------      기술       -------------------------*/
/*-----------------------------------------------------------------*/
.conC {
    background-color: #bcc6cb;
}
.conC > .SKILL {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}
.conC > .container{
    padding: 15%;
    justify-content: center;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}
.conC > .container > .text > div{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 15rem;
    height: 15rem;
    border: 0.3rem solid #dbe3e7;
    transition-duration: 0.3s;
    opacity: 0.5;
}
.conC > .container > .text > div:hover{
    transition-duration: 0.5s;
    animation: Line 2s infinite;
    opacity: 1;
}

.conC > .container > div > h1{
    color: #bbc4ca;
    text-align: center;
    font-size: 1.7rem;
    width: 15.5rem;
    height: 2rem;
    border-radius: 5px;
    background-color: #4b5e6e;
    font-family: 'Cinzel', serif;
}
.conC > .container > .text > div > p {
    font-family: 'Hahmlet', serif;
}


.conC > .container > div > .HTMLImg{
    background-image: url(../Resource/HTML.png);
}
.conC > .container > div > .JavaImg{
    background-image: url(../Resource/Java.png);
}
.conC > .container > div > .PythonImg{
    background-image: url(../Resource/Python.png);
}
.conC > .container > div > .SQLImg{
    background-image: url(../Resource/MySQL.png);
}
.conC > .container > div > .CSSImg{
    background-image: url(../Resource/CSS.png);
}
.conC > .container > div > .JavaScriptImg{
    background-image: url(../Resource/JavaScript.png);
}



/*-----------------------------------------------------------------*/
/*------------------------      작업       -------------------------*/
/*-----------------------------------------------------------------*/
.conD {
    background-color: #d9e1e6;
}
.conD > .PROJECTS {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.conD > .container{
    padding: 10%;
    display: flex;
    justify-content: center;
    gap: 10rem;
}
.conD > .container > .Project {
    position: relative;
    width: 35rem;
    display: grid;
    font-family: 'Hahmlet', serif;
    grid-template-columns: repeat(1, 1fr);
    overflow: hidden;
}
.conD > .container > div > .Img {
    box-shadow: 3px 3px 20px black;
    position: relative;
    width: 40rem;
    height: 30rem;
    display: inline-block;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
}
.conD > .container > .Project > div {
    height: 35px;
    padding-top: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    background-color: rgba(32, 39, 60, 0.59);
    transition-duration: 0.5s;
}
.conD > .container > .Project > div:hover {
    background-color: #20273b;
    transition-duration: 0.5s;
    cursor: pointer;
}

.conD > .container > .Project > h1 {
    display: block;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 3rem;
}
.conD > .container > .Project > h2 {
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 0;
}
.conD > .container > .Project > p{
    display: block;
    margin-top: 0;
}

.conD > .container > .Project > .Link > a {
    letter-spacing: 0.5rem;
    font-weight: 1000;
    font-size: 1.5rem;
    color: #d7dfe5;
    font-family: 'Cinzel', serif;
    text-decoration: none;

}

/*-----------------------------------------------------------------*/
/*------------------------      연락       -------------------------*/
/*-----------------------------------------------------------------*/
.footA {
    background-color: #20273b;
}
.footA > .CONTACT {
    color: white;
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid #ffffff;
    text-align: center;
    font-family: 'Cinzel', serif;
}
.footA > .tel {
    display: flex;
    justify-content: center;
    padding: 7%;
}

.footA > .tel > ul {
    justify-content: center;
    list-style: none;
}
.footA > .tel > ul > li {
    color: white;
    font-weight: 1000;
    font-size: 1.7rem;
    font-family: 'Cinzel', serif;
}
.footD {
    color: white;
    font-size: 0.8rem;
    text-align: center;
    background-color: #20273c;
    padding-bottom: 3%;
}











@media (max-width: 767px){
    .conA > .container > h1 {
        font-size: 4rem;
        padding-top: 30%;
    }

    .conA > .container > p{
        font-size: 1.5rem;
        margin-bottom: 0px;

    }
    .conB > .container > .Img {
        width: 300px;
        height: 200px;
    }

    .conB > .container > .cover{
        font-size: 1rem ;
    }
    .conC > .container > .text > div{
        width: 7rem;
        height: 7rem;
    }

    .conC > .container > div > h1{
        font-size: 1.5rem;
        width: 7rem;
        height: 1.7rem;
    }
    .conC > .container{
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(3, 1fr);
    }
    .conD > .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .conD > .container > div > .Img {
        width: 25rem;
        height: 18rem;
    }
    .conD > .container > .Project > div:hover {
        background-color: #20273b;
        transition-duration: 0.5s;
        cursor: pointer;
    }
    .conD > .container > .Project > h1 {
        font-size: 1.5rem;
    }
    .conD > .container > .Project > h2 {
        font-size: 1rem;
    }
    .conD > .container > .Project > p{
        font-size: 0.8rem;
    }
    .conD > .container > .Project > .Link > a {
        font-size: 1rem;
    }
    .footA > .tel > ul > li {
        font-size: 1.3rem;
    }
}

































/*-----------------------------------------------------------------*/
/*------------------------      애니메이션     ----------------------*/
/*-----------------------------------------------------------------*/
@keyframes Line {
    from{
        border: 0.3rem solid rgb(153, 181, 185);
    }
    70%{
        border: 0.3rem solid rgb(76, 95, 110);
    }
    30%{
        border: 0.3rem solid rgb(153, 181, 185);
    }
    to{
        border: 0.3rem solid rgb(188, 198, 203);
    }
}
@keyframes flash {
    from{
        color: black;
    }
    50%{
        color: white;
    }
    to{
        color: #000000;
    }
}

포트폴리오 설명
1. 배치는 홈 > 소개 > 기술 > 작업 > 연락 순으로 배치 해봤구요
2. 또 위에 숨겨진 메뉴버튼을 만들어서 마우스 이동시 튀어나오게 만들었고, 메뉴 클릭 시 그 위치로 이동(링크로 해서 약간 어색..자연스럽게 이동하는걸 아직 몰라서..)합니다ㅎㅎ
3. 모바일 반응형으로 만들어 보긴 했는데 .. 어색..
4. 작업 한것들을 gif로 추가해서 프로젝트 목록에 배치

질문과 지적 환영합니다!!~!~!~!
혹시나 필요하신거 있시면 댓글남겨주세용~

728x90

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

'코딩일지 > WEB' 카테고리의 다른 글

container 태그 (0)	2022.12.18
br 태그 (0)	2022.12.18
b 태그 (0)	2022.12.18
a 태그 (0)	2022.12.18
간단한 숫자게임 만들기.. (1)	2022.12.14

[ 여기블로그 ]

개발자 포트폴리오

'코딩일지 > WEB' 카테고리의 다른 글

+ Recent posts

티스토리툴바