Personal Portfolio

In this example below you will see how to do a Personal Portfolio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rynsam, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rynsam ©
  • HTML
  • CSS
  • JavaScript
    <div class="background">
            <div class="welcome">Welcome to my personal portfolio</div>
        </div>
        <div class="header-bar">
            <div class="header">
                <span>Rynsam Portfolio</span>
                <label for="show-menu" class="show-menu">Menu</label>
                <input type="checkbox" id="show-menu">
                <ul id="tabs-menu">
                    <li><a href="#about">About Me</a></li>
                    <li><a href="#portfolio">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="con">
            <div id="about"></div>
            <div id="portfolio" class="thumbnail-row">
                <h1>Projects</h1>
                <div class="thumbnail" style="background: url(http://mypropertydiary.my/sam/Equalizer.jpg) no-repeat scroll center;background-size: cover;"></div>
                <div class="thumbnail" style="background: url(http://mypropertydiary.my/sam/pcb_design.jpg) no-repeat scroll center;background-size: cover;"></div>
                <div class="thumbnail" style="background: url(http://mypropertydiary.my/sam/Project1.jpg) no-repeat scroll center;background-size: cover;"></div>
                <div class="thumbnail" style="background: url(http://mypropertydiary.my/sam/Project2.jpg) no-repeat scroll center;background-size: cover;"></div>
            </div>
            <div id="contact">
                <div class="social-dec">
                    <h2>Let's get in touch!</h2>
                    <br>
                    Want to discuss your ideas for a project or just want to say hi? I'd love to connect with you.
                    <br> 
                    Thank for come to visit my page.
                </div>
                <div class="social-icons">
                    <a href="https://www.linkedin.com/in/rynsam-70289615a/">
                        <div style="background: url(http://www.kwangwellness.com/wp-content/uploads/2016/08/linkedin-300x261.png) no-repeat scroll center;background-size: cover;"></div>
                    </a>
                    <a href="https://www.linkedin.com/in/rynsam-70289615a/">
                        <div style="background: url(http://intershapes.com/wp-content/uploads/2016/03/facebook-logo-300x300.png) no-repeat scroll center;background-size: cover;"></div>
                    </a>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>Created by Rynsam.</span>
        </div>

/*Downloaded from https://www.codeseek.co/rynsam/personal-portfolio-gepBEX */
    body {margin: 0; padding: 0;}
            .header-bar{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1;
            }
            .header {
                background-color: black;
                color: white;
                padding: 20px 10px;
                font-size: 25px;
            }
            
            .header label {
                float: right;
                display: none;
            }

            .header > #tabs-menu {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            #show-menu {
                display: none;
            }

            input[type=checkbox]:checked ~ #tabs-menu{
                display: block;
            }

            #tabs-menu {
                float: right;
            }

            #tabs-menu > li {
                display: inline-block;
                margin: 0 10px;
            }

            #tabs-menu a {
                color: white;
                text-decoration: none;
            }

            .background {
                height: 26em;
                z-index: -1;
                text-align: center;
                position: fixed;
                top: 68px;
                left: 0;
                right: 0;
            }

            .welcome {
                color: black;
                padding-top: 1em;
                font-size: 50px;
                text-shadow: yellow 1px 2px 1px
            }

            .con {
                position: relative;
                margin: 30em 0 0 0;
            }

            .con > div {
                min-height: 20em;
            }

            #about {
                width: 100%;
                background-color: #722872;
            }

            .thumbnail-row {
                /*background: url(http://potatotech.my/img/webdesign2.jpg) no-repeat scroll center;background-size: cover;*/
                text-align: center;
                background-color: #d0c7cc;
                padding: 10em 0;
            }

            .thumbnail {
                width: 220px;
                height: 140px;
                display: inline-block;
                transition: 0.50s;
                margin: 10px;
            }
            .thumbnail:hover {
                padding: 20px;
                margin: -10px;
            }

            #contact {
                text-align: center;
                font-size: 25px;
                background-color: #f0f7fa;
                padding: 2em 0;
            }

            #contact > div {

            }

            .footer{
                background-color: black;
                color: white;
                padding: 20px 10px;
                font-size: 25px;
                text-align: center;
            }

            .social-dec {
                padding: 3em 0;
            }

            .social-icons div {
                display: inline-block;
                width: 80px;
                height: 80px;
            }

            .social-icons a {
                text-decoration: none;
            }

            .social-icons img {
                width: 100%;
            }

            @media screen and (max-width : 600px){
                #tabs-menu {
                    display: none;
                    position: absolute;
                    right: 0;
                    top: 68px;
                    background-color: black;
                    width: 10em;
                }

                #tabs-menu > li {
                    display: block;
                    padding: 10px;
                    border-bottom: 1px white solid;
                }
                
                .header label {
                    display: block;
                }
            }


/*Downloaded from https://www.codeseek.co/rynsam/personal-portfolio-gepBEX */
    

Comments