index.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>Loki's Portfolio</title>
    <link rel="shortcut icon" href="images/loki-icon.png" type="image/png">  
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=NTR&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/1ef668e06f.js" crossorigin="anonymous"></script>

</head>
<body>      
    
    <!-- About Me -->
    <section class="s1">
        <div class="main-container"> <!-- to tidy up all sections -->

            <div class="greeting-wrapper">
                <h1>hey, <span>Loki</span> here<span id="cursor">|</span></h1>
            </div>
            
            <div class="intro-wrapper">
                <div class="nav-wrapper">
                    <div class="title-wrapper">
                        <h2>/ about me</h2>
                    </div>

                    <ul class="web-navigation">
                        <li><a href="#experience">.experience()</a></li>
                        <li><a href="#project">.project()</a></li>
                        <li><a href="#contact">.contact()</a></li>
                    </ul>
                    
                    <!-- display on small devices -->
                    <a href="#" class="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </a>
                </div>
                                    
                <div class="mobile-wrapper">
                    <ul class="mobile-navigation">
                        <li><a href="#experience">.experience()</a></li>
                        <li><a href="#project">.project()</a></li>
                        <li><a href="#contact">.contact()</a></li>
                    </ul>
                </div>

                <div class="left-col">
                    <img id="profile-pic" src="images/loki.jfif" alt="profile-picture">
                    <ul class="social-icon first-icon">
                        <li><a href="#" target="_blank"><i class="fab fa-github fa-lg"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
                    </ul>
                    <a class="say-hello" href="mailto:mynameis@loki.com">Say hello</a>
                </div>

                <div class="right-col">
                    <h3>I am a variant.</h3>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia necessitatibus sapiente consequatur voluptatem reprehenderit corrupti sequi ea quibusdam tempora soluta, architecto ipsam, vero inventore illo repellendus unde.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime id, ab veritatis at magni eius itaque numquam, quas maiores eveniet harum libero adipisci iste. Id blanditiis molestias ut: <a href="#">Download Resume</a></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit officiis:</p>
                    <div class="skills">
                        <ul>
                            <li>NodeJS</li>
                            <li>ExpressJS</li>
                            <li>ReactJS</li>
                            <li>Javascript</li>
                        </ul>
                        <ul>
                            <li>PHP</li>
                            <li>MongoDB</li>
                            <li>MySQL</li>
                            <li>Laravel</li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <!-- Experience -->
    <section class="s2">
        <div class="main-container" id="experience">
            <h2 class="section-tittle">/ experience</h2>
            <div class="experience-wrapper">
                <ul class="selection">
                    <li><a onclick="divVisibility('Div1')">Company 1</a></li>
                    <li><a onclick="divVisibility('Div2')">Company 2</a></li>
                    <li><a onclick="divVisibility('Div3')">Company 3</a></li>
                    <li><a onclick="divVisibility('Div4')">Company 4</a></li>
                </ul>

                <ul class="mobile-selection">
                    <li><a onclick="divVisibility('Div1')">.01</a></li>
                    <li><a onclick="divVisibility('Div2')">.02</a></li>
                    <li><a onclick="divVisibility('Div3')">.03</a></li>
                    <li><a onclick="divVisibility('Div4')">.04</a></li>
                </ul>

                <div class="experience-desc" id="Div1">
                    <h3>Software Engineer @ <span>Company 1</span></h3>
                    <p>JAN 21 - JUN 21</p>
                    <ul>
                        <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi eum repudiandae, voluptatum quam rem magnam quia possimus libero dolor laudantium.</li>
                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae deserunt debitis corporis accusantium quae unde.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas perferendis non suscipit tempora expedita at voluptatibus eum a.</li>
                    </ul>
                </div>
                <div class="experience-desc" id="Div2">
                    <h3>Software Engineer @ <span>Company 2</span></h3>
                    <p>JUL 20 - DEC 20</p>
                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fuga harum ducimus, suscipit omnis odit.</li>
                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, adipisci nostrum! Odit quod tempora harum iure ipsa porro in quae consequuntur ea.</li>
                        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, distinctio laudantium illum rerum quo facilis eligendi.</li>
                    </ul>
                </div>
                <div class="experience-desc" id="Div3">
                    <h3>Software Engineer @ <span>Company 3</span></h3>
                    <p>JAN 20 - JUN 20</p>
                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ducimus rem temporibus nam recusandae. Molestias optio impedit cum, voluptatem reprehenderit voluptates ducimus!</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus nemo fugit nam similique delectus.</li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia obcaecati mollitia, accusamus unde eum debitis aliquid fuga doloremque ab perferendis. </li>
                    </ul>
                </div>
                <div class="experience-desc" id="Div4">
                    <h3>Software Engineer @ <span>Company 4</span></h3>
                    <p>JUL 19 - DEC 19</p>
                    <ul>
                        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum, nam aliquid! Vero placeat blanditiis voluptatum magni consequatur!</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit voluptatum rerum eius dolore quod labore.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia iusto fuga odit obcaecati culpa neque autem quos amet.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects -->
    <section class="s1">
        <div id="project" class="main-container">
            <h2 class="section-tittle">/ projects</h2>

            <div class="projects">
                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div> 
                
                    <div class="project-preview">
                        <h3 class="project-title">Project 1</h3>
                        <p class="project-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus provident quod quia nisi aliquam atque voluptatem suscipit, doloremque consequatur quis.</p>
                        <p class="project-tag">Lorem, ipsum.</p>
                    </div>         
                </div>
    
                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div> 
                    <div class="project-preview">
                        <h3 class="project-title">Project 2</h3>
                        <p class="project-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum qui expedita totam est assumenda esse.</p>
                        <p class="project-tag">Lorem, ipsum dolor.</p>
                    </div>         
                </div>
    
                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div>        
                    <div class="project-preview">
                        <h3 class="project-title">Project 3</h3>
                        <p class="project-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum eius totam, pariatur animi nihil quasi iure quos officia.</p>
                        <p class="project-tag">Lorem.</p>
                    </div>         
                </div>

                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div>        
                    <div class="project-preview">
                        <h3 class="project-title">Project 4</h3>
                        <p class="project-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, sint.</p>
                        <p class="project-tag">Lorem, ipsum.</p>
                    </div>         
                </div>

                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div>        
                    <div class="project-preview">
                        <h3 class="project-title">Project 5</h3>
                        <p class="project-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta ea, voluptatum fugiat libero odit nobis consequuntur laborum inventore vitae.</p>
                        <p class="project-tag">Lorem ipsum dolor sit.</p>
                    </div>         
                </div>

                <div class="project">
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="images/soon.jfif">
                        <div class="external-link">
                            <ul class="link-items">
                                <li><a href="https://loremflickr.com/320/240/dog"><i class="fab fa-github fa-lg" id="git"></i></a></li>
                                <li><a href="https://loremflickr.com/"><i class="fas fa-external-link-alt fa-lg" id="external"></i></a></li>
                            </ul>
                        </div>
                    </div>      
                    <div class="project-preview">
                        <h3 class="project-title">Project 6</h3>
                        <p class="project-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, quasi. Architecto, cumque.</p>
                        <p class="project-tag">Lorem.</p>
                    </div>         
                </div>
            </div>

        </div>
    </section>

    <!-- Contact -->
    <footer class="s2 footer">
        <div class="main-container">
            <div id="contact">
                <h2 class="section-tittle">/ get in touch</h2>
                <p>For business inquiry please send email to <a href="mailto:mynameis@loki.com">mynameis@loki.com</a></p>
                <ul class="social-icon second-icon">
                    <li><a href="https://github.com/" target="_blank"><i class="fab fa-github fa-lg"></i></a></li>
                    <li><a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a></li>
                    <li><a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter fa-lg"></i></a></li>
                </ul>
            </div>
        </div>
    </footer>

    <footer class="s1 footer">
        <div class="footer-wrapper">
            <p>Made with  &#128154 by Amri Mufti</p>
        </div>
    </footer>

        <!-- Menu for Mobile -->
    <div id="myID" class="bottomMenu">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#project">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <script src="script.js"></script>
</body>
</html>