LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    
    



    
About
I am responsible, innovative, passionate and committed professional with a get-it-done approach. Experience in designing and implementing sophisticated web applications using Node.JS, Vue.JS and PHP as well as softwares in C++, QT and Computer Vision. Proficient in web design & development technologies, UI/UX standards, infrastructure and Application Life-Cycle management.
Projects
PBR Ray Tracer Oct 2017 - Current
A ray tracer based on physically based rendering
WhiteBoard Jul - Aug, 2017
A simple messaging and sketch streaming web app for brainstorming sessions
Tab Tracker Sept - Oct, 2017
A Vue.js / Express.js web application for keeping track of guitar tabs.
Jnanagni 2017 Jan - Mar, 2017
Official website for Jnanagni 2017 - FET, GKV's Annual Techfest
Skills
Programming Languages
C
C++
HTML
CSS
Javascript
Database
MySQL
Postgres
Frameworks / Libraries
Node.JS
Laravel
Socket.io
Operating System
GNU / Linux
Windows
Android
CSS
body, html { width: 100%; height: 100%; }
body {
    margin: 0 auto; color: #222;
    font-size: 16px;
}

.container {
    padding: 0; 
    margin: auto;
    box-sizing: border-box;
    margin-top: 8em;
}

a > img {
    height: 20px;
    width: 20px;
}

a > i {
    font-size: 20px !important;
}

a {
    margin : 3px;
    text-align: center;
}

.hidden {
    display: none !important;
}

.header {
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    padding: 15px; 
    box-sizing: border-box;
    box-shadow: 0 2px 10px #eee;
    width: 100%;
    background-color: #fff;

    position: fixed;
    top: 0;

    z-index: 1000;
}

.user-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#about_section {
    background-color: #363636;
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 30px;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.about-image {
    width: 400px;
    height: 400px;
    max-width: 90%;
    max-height: 90%;
    background-image: url('https://scontent.fagr1-1.fna.fbcdn.net/v/t1.0-9/22851862_945367312285625_9062510711903916627_n.jpg?oh=db7dba8513135065fd3aef30ecff73da&oe=5AADC563');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    
}
.about-text {
    width: 400px;
    height: 400px;
    flex: 0 1 auto;
    font-size: 25px;
    color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #;
}


.header-title-section {
    display: flex; flex-direction: column;
    justify-content: center; padding: 3%;
}

.header-title {
    font-family: "Source Sans Pro";
    text-transform: uppercase;
    font-size: 2.5em;
    letter-spacing: 0.2em;
    display: flex;
    justify-content: center;
    flex: 1;
}
.header-subtitle {
    font-family: "Source Sans Pro";
    font-size: 70%; color: #999;
    padding: 3px; padding-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Navbar */
.navbar {
    /* border-top: 1px solid #f9f9f9; */
    display: flex;
}
.nav-items{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:  wrap;
    margin: auto;
}
.nav-item{
    margin: 5px;
    padding: 5px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed';
    letter-spacing: 1px;
    border-radius: 3px;
}
.nav-item:hover {
    background-color: #eee;
}

.info-section {
    display: flex; flex-direction: column;
    margin: 0;
    padding: 20px 0;
    min-height: 100vh;
    flex: 1;
}
.info-row {
    display: flex; flex-direction: column;
}

.info-left {
    flex: 4; padding: 20px;
    border-bottom: 2px solid #ececec;
}
.info-right {
    flex: 8; margin: 20px;
}

.cat-header {
    padding: 6px 0; box-sizing: border-box;
    font-size: 1.2em;
}
.cat-indicator {
    color: #3A8CE4;
}
.cat-title {
    font-family: "Source Sans Pro";
    text-transform: uppercase;
    letter-spacing: 5px;
    vertical-align: text-bottom;
    padding-left: 10px;
}
.cat-def-body, .cat-skill-body {
    padding: 10px 5px 10px 30px;
}

/* Contact style */
.cat-contact-body {}
.contact-item {
    display: flex; padding: 10px 0;
}
.contact-logo {
    color: #3A8CE4;
}
.contact-info {
    padding-left: 18px;
}

/* Lists */
.cat-list-body {
    padding: 10px 0;
}
.cat-list-body ul {
    padding-left: 18px; margin: 0;
    list-style-type: circle;
}
.cat-list-body li {
    padding: 10px 0; padding-left: 0.9em;
}

/* Links */
a { text-decoration: none; color: #3A8CE4; }
.link-title {
    font-size: 1.1em; font-weight: 600;
    color: #222;
}
.link-src {}

/* Education */
.edu-header {}
.edu-alma, .project-title, .skill-title {
    text-transform: uppercase;
    font-weight: 600; letter-spacing: 0.15em;
}
.edu-duration, .project-duration, .ach-duration {
    color: #bbb;
    font-style: italic;
}
.edu-class-data {
    clear: right; margin-top: 5px;
}
.edu-std {
    letter-spacing: 0.1em; color: #666;
}
.edu-score {
    margin-left: 20px; padding: 2px 8px;
    background-color: #3A8CE4; color: #fff;
    border-radius: 20px;
}

.cat-def-body, .cat-list-body,
.cat-contact-body, .cat-skill-body {
    font-family: "Source Sans Pro";
    font-size: 0.9em;
}

/* Project */
.project-header {}
.project-title {}
.project-duration {}
.project-link {
    text-align: center;
}
.project-link a i {
    font-size: 50px !important;
}
.project-desc {
    margin-top: 8px; color: #444;
    padding: 4px 0 4px 16px;
    border-left: 2px solid beige;
    font-style: italic;
}

/* Skills */
.force-inline { display: inline-block !important; }
.cat-skill-type {
    min-width: 13.5em;
    font-family: 'Roboto Condensed';
    padding: 10px 10px 5px 50px; color: #888;
    font-size: 0.8em; letter-spacing: 0.1em;
    text-transform: uppercase; position: relative;
}
.cat-skill-type:before {
    content: '\25c6';
    margin-top: -0.10em; position: absolute;
    margin-left: -1.5em; color: #3A8CE4;
}
.cat-skill-body {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0 5px 40px;
}
.cat-skill-body-gen {
    display: inline-block;
}
.skill {
    margin: 10px 0; padding: 0 10px;
    box-sizing: border-box;
}
.skill-gen {
    display: inline; padding: 3px 10px;
    margin: 0 5px; background-color: #222;
    border-radius: 3px; color: #fff;
    font-family: "Source Sans Pro";
}
.skill-gen:first-child { margin-left: 30px; }
.skill-title, .skill-gen { font-size: 0.8em; }
.skill-progress-track {
    height: 10px; min-width: 150px;
    background-color: #eee; margin-top: 6px;
    border-radius: 6px;
}
.skill-progress {
    height: 100%; background-color: #3A8CE4;
    border-radius:  6px;
}

.skill-image {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 6em;
    color: #444;
}
.skill-image img {
    max-height: 100%;
}


.pad-bottom-extra { padding-bottom: 20px; }


/* Project section */

.project-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Source Sans Pro";
    flex: 1;
}

.pr-left, .pr-right {
    width: 2em;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ddd;
    display: none;
}
.pr-caro {
    display: flex;
    overflow: hidden;
    flex: 1;
    height: 550px;
    flex-wrap:  wrap;
    justify-content: center;
    align-items: center;
}

.project-box {
    height: 200px;
    width: 300px;
    border: 1px solid #eee;
    border-radius: 3px;
    margin: 10px;
    padding: 10px;
    box-shadow: 2px 2px 10px #eee;
    transition: transform 0.5s ease-in;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-box:hover {
    box-shadow: 2px 2px 20px #ddd;
}

.project-header {
    font-family: 'Roboto Condensed';
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eee;
}


/* Profile */

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

.profile-links a {
    height: 40px;
    width: 40px;
    /* border: 1px solid; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-links a:hover {
    background-color: #f5f5f5;

}

/* Seperator */
.sep {
    display: flex;
    color: #ddd;
    font-size: 2em;
    justify-content: center;
    margin: 10px 0;
}
.sep_line {
    border-bottom:  3px solid #f3f3f3;
    flex:  1 0 auto;
    transform: translateY(-.5em);
}
.sep_code {
    align-self: center;
    margin: 0 10px;
}

/* Footer */

.footer {
    width: 100%;
    background-color: #eee;
    color: #444;
}


/* Side Menu */

JS
window.addEventListener("load", () => {
            let desc = document.getElementsByClassName("ach-title");
            for (let i = 0; i < desc.length; i++) {
                desc[i].innerHTML = desc[i].innerText;
            };

            // Extra padding for last skill item
            let skillItems = document.querySelectorAll(".footer > .cat-skill-item");
            if (skillItems) {
                skillItems[skillItems.length-1].classList.add("pad-bottom-extra");
            }
        }, false);
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv