2
\$\begingroup\$

I've just bought myself a domain and recently created a rough draft of a portfolio website.

A few of my friends have looked over the general design of it and given me some positive feedback so I thought I'd see if anyone here would have some feedback about the actual code.

It's quite a handful of code, so I'm not expecting anyone to actually look into the nitty-gritty parts of it - but rather give me a rough idea of what would need to be modified in general.

A short disclaimer though: I know the page isn't FULLY responsive and I'm working on getting it to work on mobile phones (I'm using bootstrap3 and struggling with the -xs-* column stacking).

First off, here is the git repo if you feel like looking at more than just the HTML.

And finally here is the website: http://portfolio.kimput.com.

Here is the html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="resources/css/indexStyles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">




</head>
<body data-spy="scroll" data-target="#navbar" data-offset="50"> 

    <div class="container-fluid">
         <div class="row fixed-header">
            <div class="col-md-8 col-md-offset-2">
                <header id="banner">
                    <div class="row">
                        <div class="col-md-2">
                             <a href="#top"> 
                            <img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg"> </a>
                        </div>
                        <div class="col-md-10">
                            <nav id="navbar" class="navbar collapse navbar-collapse">
                                <div class="navbar-header">

                                    <button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle"> 
                                        <span class="icon-bar"> </span>
                                        <span class="icon-bar"> </span>
                                        <span class="icon-bar"> </span>
                                    </button>
                                </div>
                                <div class="collapse navbar-collapse" id="navBar-target">
                                    <ul class="nav navbar-nav navbar-right">
                                        <li class="active">
                                            <a href="#top" > About </a>
                                        </li>
                                        <li>
                                            <a href="#portfolio" > Portfolio </a>
                                        </li>
                                        <li class>
                                            <a href="#contact" > Contact </a>
                                        </li>
                                    </ul>
                                    </div>
                                </nav> 
                            </div> 
                        </header>
                    </div> 
        </div> 
                <main>

                    <header id="top">
                        <div class="bottom-buffer top-buffer">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="text-right lead">
                                        My name is Joakim Bajoul Kakaei, I'm a Software Engineer, born in Sweden.
                                        As the owner of Kimput.com, I hope to bring a new way of bridging the gap between a simple, intuitive
                                        user experience and flexible design. The name <strong> Kimput </strong> is a play on the word input
                                        and the end of my name, I also lived in Seoul where I was a stone-throw from another famous Kim.
                                    </p>
                                    <hr class="star-bright"/>
                                    <span class="skills lead">
                                        Software Engineer - Web Developer - Security Hobbyist
                                    </span>
                                </div>
                                <div class="col-md-3 col-offset-md-1">
                                    <img src="http://res.cloudinary.com/todai/image/upload/c_crop,h_800,w_800/v1469712578/12976795_10208023281372738_6826518550098825642_o_mgir5b.jpg"  class="img-circle img-responsive">
                                </div>
                            </div>
                            <div class="row"> </div>
                        </div>
                    </header>
                    <section id="portfolio"> 


                        <div class="bottom-buffer">
                            <div class="row">

                                <div class="col-md-12">
                                    <h2> Portfolio </h2>
                                    <hr class="star-dark" />
                                    <div class="center">
                                        <div class="carousel">
                                            <div class="item a">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face">

                                                            <img src="http://res.cloudinary.com/todai/image/upload/v1469638032/WS-background_aurcyw.png"/>
                                                        </div>
                                                        <div class="back face center">
                                                            <p> <strong> Title:</strong> Junior .NET developer</p>
                                                            <p> <strong> Responsibilities: </strong> Taking ownership, developing, maintaing and testing of software. </p> 
                                                            <p> <strong> Languages:</strong> ASP.NET, MSSQL, VB.NET, C# .NET. </p>
                                                            <p> <strong> Frameworks:</strong> Telerik, DNN </p>
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span class="fa fa-github fa-2x"> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item b">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face">
                                                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png" />
                                                        </div>
                                                        <div class="back face center">
                                                            <p> <strong> Title:</strong> Developer, project manager </p>
                                                            <p> <strong> Responsibilities:</strong> Requirements gathering and assigning priorities. Development and testing of software. Planning. </p>
                                                            <p> <strong> Languages:</strong> C/C++ </p> 
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item c">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face"> 
                                                            <div id="player"></div>
                                                        </div>
                                                        <div class="back face center">
                                                            <p> <strong> Title:</strong> Developer</p>
                                                            <p> <strong> Responsibilities:</strong> Developing various modules to handle image-processing, sensor-data, overtaking and intersection-handling. </p>
                                                            <p> <strong> Languages:</strong> C/C++ </p>
                                                            <p> <strong> Frameworks:</strong> OpenDaVinci </p>
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item d">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face">
                                                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg" />
                                                        </div>
                                                        <div class="back face center">
                                                            <p>A distributed software built in Erlang, using a MSSQL instance and a C# Web Api end-point.</p>
                                                            <p>I was in charge with working on the Android and web front-end.</p>
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item e">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face">
                                                            <img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg" />
                                                        </div>
                                                        <div class="back face center">
                                                            <p>A distributed software built in Erlang, using a MSSQL instance and a C# Web Api end-point.</p>
                                                            <p>I was in charge with working on the Android and web front-end.</p>
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item f">
                                                <div id="f1_container">
                                                    <div id="f1_card" class="shadow">
                                                        <div class="front face">
                                                            <img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png" />
                                                        </div>
                                                        <div class="back face center">
                                                            <p><strong> Title:</strong> Front-end developer, project manager.</p>
                                                            <p><strong> Responsibilities:</strong> To develop and test our Android front-end to display our datastructures, display charts and compare the stock's progress.</p> 
                                                            <p><strong> Languages:</strong> Java, Java for Android, Ecplipse.</p>
                                                            <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div> 
                        </div>  
                        <div class="row">
                            <p class="text-center lead"><span class="underline-black"><strong> Hover over cards to show more </strong></span></p>
                        </div>
                        <div class="closer-top bottom-buffer">
                            <div class="row text-center">
                                <span class="prev">Prev</span>
                                <span class="next">Next</span>
                            </div>  
                        </div> 
                    </section>
                    <section id="skills">  
                        <div class="container-fluid bottom-buffer"> 
                            <div class="row">
                                <div class="col-md-12">
                                    <h2> My Skills </h2>
                                    <hr class="star-dark" />
                                    <p class="text-center skills-text"> Programming Languages - Design Skills - Theoretical knowledge </p>
                                    <div id="slider" class="grabbable"> 
                                        <ul>
                                            <div class="element">
                                                <li class="list-element"><canvas id="programming"> </canvas></li>
                                            </div>
                                            <div class="element">
                                                <li class="list-element"><canvas id="design"> </canvas></li> 
                                            </div>
                                            <div class="element">
                                                <li class="list-element"> <canvas id="theory"> </canvas> </li>
                                            </div>
                                        </ul> 
                                    </div>
                                    <p class="text-center lead"> <span class="underline-black"><strong> Drag to show more </strong></span></p>
                                </div>
                            </div>
                        </div>   
                    </section>
                    <section id="contact"> 
                            <div class="row"> 
                                <div class="col-md-12">
                                    <h2> Find out more </h2>
                                    <hr class="star-dark"/>
                                    <div class="col-md-6">
                                    <form id="contactForm" role="form" class="go-bottom text-left">
                                        <div>
                                            <input id="name" name="name" type="text" required>
                                            <label for="name">Name</label>
                                        </div>
                                        <div>
                                            <input id="email" name="email" type="text" required>
                                            <label for="email"> E-mail </label> 
                                        </div>
                                        <div>
                                            <input id="phone" name="phone" type="text" required>
                                            <label for="phone"> Phone number </label> 
                                        </div>
                                        <div>
                                            <textarea name="message" cols="40" rows="5" required></textarea>
                                            <label for="message"> Message </label>
                                        </div>
                                        <div class="top-buffer">
                                            <button type="submit" class="form-button">
                                             <span class="lead"> Send </span><i class="fa fa-envelope fa-2x"></i> 
                                            </button>
                                        </div>
                                    </form> 
                                    </div>
                                    <div class="col-md-4 col-md-offset-1 text-left form-right top-buffer">
                                    <p class="lead text-left"> Drop me a line if you want to get in contact, whether   
                                                               you want to know more about me or simply to
                                                               share a fika in London. </p>
                                    <p class="lead text-left"> I'll get back to you ASAP. </p>
                                    <p class="lead text-left"> No spam please, <br>
                                                               Inget spam är du snäll, <br>
                                                               スパムを送らないでください!

                                    </div>
                                </div>
                            </div> 
                    </section>
                </main>
                <div class="row">  
                <div id="bottom-banner"> 
                <div class="col-md-3 col-md-offset-2 top-buffer">
                        <p class="banner-text-l text-center"> <span><strong> ABOUT THIS PAGE </strong> </span> </p> 
                        <p class="text-center banner-text top-buffer"> <span> <strong> Made with <i class="fa fa-coffee"></i>, <i class="fa fa-music"></i> and an extensive amount of <i class="fa fa-search"></i> </strong> </span> </p>
                        <p class="text-center banner-text"> <span> <strong> by <a href="https://www.facebook.com/joakim.kakaei"> Joakim Bajoul Kakaei </a> </strong> </span> </p>  
                </div> 
                <div class="col-md-7 top-buffer">
                <p class="text-center banner-text-l"><strong> KIMPUT </strong></p>
                <p class="text-center banner-text-l"><strong> AROUND THE WEB </strong> </p>
                <ul class="list-inline text-center"> 
                <li><span class="social-media">
                    <a href="https://www.linkedin.com/in/joakim-bajoul-kakaei-b6996a6a?trk=nav_responsive_tab_profile">
                        <i class="fa fa-linkedin fa-2x"> </i> 
                    </a>
                </span></li>
                <li><span class="social-media">
                    <a href="https://github.com/Todai88">
                        <i class="fa fa-github fa-2x"> </i> 
                    </a>
                </span></li>
                <li><span class="social-media">
                    <a href="https://twitter.com/KimputCodes">
                        <i class="fa fa-twitter fa-2x"> </i>
                    </a>
                </span></li> 
                </div> 
                </div>
                </div>
            </div> 
            <script   src="resources/scripts/jquery-3.1.0.js"></script>
            <script   src="resources/scripts/jquery-ui.js"></script> 
            <script   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
            <script   src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
            <script   src="resources/scripts/carousel.js"> </script>
            <script   src="resources/scripts/charts.js"> </script>
            <script   src="resources/scripts/smooth-scroll.js"> </script>
            <script   src="resources/scripts/snippets.js"> </script>
        </header>
    </div>
</div>
</div>
</body>
</html>
\$\endgroup\$
  • \$\begingroup\$ Have a look at the technique in this article, it will make your CSS much more readable. Aside that, at a glance, this looks overly nested, though it would require a deeper look to figure out what is and isn't necessary (sorry don't have time atm) \$\endgroup\$ – Jonah Aug 12 '16 at 18:53
  • \$\begingroup\$ Sorry, but I don't think you you added the link...? \$\endgroup\$ – Todai Aug 12 '16 at 19:30
  • \$\begingroup\$ Sorry bout that: maintainablecss.com/chapters/semantics \$\endgroup\$ – Jonah Aug 12 '16 at 19:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.