A Digital Resume

#webdev #beginners

If you have a resume in hand, let's make it fly over the web.

A resume is a brief summary of personal and professional experiences, skills, and education history. Its main purpose is to show off your best self to potential. And you should carefully prepare your resume.

Let start building

I've started this project by creating a folder with index.html, style.css and script.js

index.html is the root file for your project. All the styling part is seperated into style.css and the script.js file handles the events.

Repo ⚡
Live ⚡

HTML Setup
Let's get some boiler plate HTML setup and build out everything up.

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://st3.depositphotos.com/27847728/36434/v/950/depositphotos_364349646-stock-illustration-initial-letter-logo-design-vector.jpg?forcejpeg=true">
    <script src="script.js"></script>
    <title>Jagadeesh Koyya</title>
</head>
<body>

    <!-- Button -->
    <input type="checkbox" id="checkbox" onclick="myFunction()">

    <div id="container">

        <section id="wrapper--hero" class="section--page">
            <div>
                <h1 id="username">Jagadeesh Koyya</h1>
                <p id="bio">Software developer, programmer in c and c++. Enthusiastic in full stack development. Blogger in dev, hashnode.</p>
                <p id="email">👉 jagadeesh10th@gmail.com</p>
            </div>
        </section>

        <section class="section--page">
            <div id="social--links">
                <a href="https://dev.to/jagadeeshkj" target="_blank">Dev</a>
                <a href="https://twitter.com/jagadeesh_kj" target="_blank">Twitter</a>
                <a href="https://www.linkedin.com/in/jagadeesh-kj/" target="_blank">Linkedin</a>
                <a href="https://github.com/JagadeeshKJ" target="_blank">GitHub</a>
                <a href="./assets/Jagadeesh Koyya.pdf" target="_blank">Download Resume</a>
            </div>
        </section>

        <section class="section--page">
            <h2>Skills & Qualifications</h2>
            <ul id="qualifications--list">
                <li>✔️ HackerRank with 20205 Hackos in C & C++
                </li>
                <li>✔️ Selected as Campus Ambassador of E-Cell, IIT Bombay (2021-22)</li>
                <li>✔️ Experienced content writer on Dev community, Hashnode </li>
                <li>✔️ CEFR B2 Upper Intermediate 499 EnglishScore</li>
            </ul>
        </section>

        <section class="section--page">
            <h2>Tech Stack</h2>

            <div id="wrapper--techstack--items">
                <div class="card--techstack">
                    <span>Python, Javascript, Node JS</span>
                </div>

                <div class="card--techstack">
                    <span>Django, FastAPI</span>
                </div>

                <div class="card--techstack">
                    <span>React, Next JS</span>
                </div>

                <div class="card--techstack">
                    <span>MangoDB, MySQL</span>
                </div>

            </div>
        </section>

        <section id = "work-history-wrapper class="section--page">
            <h2>Work History</h2>

            <div class="line-break"></div>
            <div class="card--work-history">
                <strong>🚧 Software Developer, Blog writter at Dev.io</strong>
                <p>01/2021 - Present</p>
                <p>Worked on building useful tools for real-time problem solving. Learning trending tech and teaching people via blog writing is helpful and enjoyable.</p>
                <ul>
                    <li>Produced educational blog content which resulted in 300k+ views on Dev</li>
                    <li>Produced SE campaigns and content to gain market share for related keywords.</li>
                </ul>
            </div>
            <div class="line-break"></div>

            <div class="card--work-history">
                <strong>🚧 Campus Ambassador of E-Cell, IIT Bombay</strong>
                <p>05/2021 - Present</p>
                <p>Interacted with people of different mindsets and from various cultural backgrounds.</p>
                <ul>
                    <li>Made regular contributions to the CA program (work from home)</li>
                    <li>Incentives, real-time learning, entrepreneurship and more </li>
                </ul>
            </div>
            <div class="line-break"></div>
        </section>

        <!-- Projects -->
        <section class="section--page">
            <h2>Projects & Accomplishments</h2>

            <div class="card--project">
                <a href="project1.html"><span>🏆 </span>QR Code Generator - For Any Website
                </a>
            </div>

            <div class="card--project">
                <a href="project5.html"><span>🏆 </span>Password Generator - Authentic
                </a>
            </div>

            <div class="card--project">
                <a href="project2.html" ><span>🏆 </span>Whatsapp Anonymous Messanger</a>
            </div>

            <div class="card--project">
                <a href="project3.html" ><span>🏆 </span>Starbucks Clone - An art of cool work</a>
            </div>

            <div class="card--project">
                <a href="project4.html"><span>🏆 </span>Restaurant Website - A Working Prototype</a>
            </div>

        </section>

    </div>

</body>
</html>

I've included sections for Skills, Tech Stack, Work History and Projects and wrapped all of 'em in a container.

A boiler plate for a project page would be like:

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Jagadeesh Koyya</title>
</head>
<body>
    <div id="container">
        <a href="index.html">&#x2190; Go Back</a>
        <h1>Built a tool to generate QR Code for handling business websites</h1>

        <ul>
            <li><a href="https://qr-code-generator-eight.vercel.app/" target="_blank">Live Demo</a></li>
            <li><a href="https://github.com/JagadeeshKJ/QR-Code-Generator" target="_blank">Source code</a></li>
        </ul>
        <p>Why remember long websites when you can just click-scan-hit in one go. That's where the cool work of this tool is projected. This tool generates a QR Code for the entered website and it can be saved to access the website 24x7.</p>

        <ul>
            <li>QR Codes are portable and comes in handy.</li>
            <li>Build using qrcode.js, a library of JS.</li>
            <li>QR Code comes in any size and takes little storage.</li>
        </ul>
    </div>
</body>
</html>

Styling what we have so far

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root{
    --mainTextColor-light:#000;
    --secondaryTextColor-light:rgb(51 51 51);
    --mainLinkColor-light:#0da2b8;
    --mainBorderColor-light:rgb(218, 218, 218);
    --mainBgColor-light:rgb(249, 250,251);

    --mainTextColor-dark:#fff;
    --secondaryTextColor-dark:#adb0b1;
    --mainLinkColor-dark:rgb(30, 190,214);
    --mainBorderColor-dark:#2b3031;
    --mainBgColor-dark:#131415;

    --mainTextColor:var(--mainTextColor-light);
    --secondaryTextColor:var(--secondaryTextColor-light);
    --mainLinkColor:var(--mainLinkColor-light);
    --mainBorderColor:var(--mainBorderColor-light);
    --mainBgColor:var(--mainBgColor-light);
}

*{
    font-family: 'Readex Pro';
    line-height: 1.5em;
    box-sizing: border-box;
    color: var(--mainTextColor);
}

body{
    background-color: var(--mainBgColor);
}

p, span, li{
    color: var(--secondaryTextColor);
    font-size: 1em;
}

a{
    text-decoration: none;
    color: var(--mainLinkColor);
    font-size: 500;
}

li{
    line-height: 1.9em;
}

#container{
    max-width: 700px;
    margin: 0 auto;
}

.section--page{
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Wrapper-Hero */
#wrapper--hero{
    display: flex;
    align-items: center;
    gap: 4em;
}

#username{
    font-size: 3em;
    line-height: 1em;
}

#bio, a{
    font-weight: 300;
}

/* #pic{
    border-radius: 50%;
    width: 200px;
    height: 150px;
    object-fit: cover;
} */

#email{
    color: var(--mainTextColor);
}

/* Social Media Links */
#social--links{
    display: flex;
    column-gap: 1em;
    justify-content: space-between;
    flex-wrap: wrap;
}

#social--links a{
    font-size: 0.9em;
    color: var(--secondaryTextColor);
    transition: 0.3s;
}

#social--links a:hover{
    color: var(--mainLinkColor);
}

#qualifications--list{
    list-style: none;
}

/* Tech Stack */
#wrapper--techstack--items{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    font-size: 0.9em;
}

.card--techstack{
    border: 1px solid var(--mainBorderColor);
    border-radius: 5px;
    padding: 0.5em 1em;
}

/* Work History */
.card--work-history{
    margin: 3em 0;
    padding-left: 2em;
    border-left: 1px solid var(--mainBorderColor);
}

.line-break{
    background-color: var(--mainBorderColor);
    height: 1px;
}

/* Projects */
.card--project{
    padding: 1em 0;
    border-top: 1px solid var(--mainBorderColor);
}

.card--project a{
    color: var(--mainTextColor);
    transition: .3s;
}

.card--project a:hover{
    color: var(--mainLinkColor);
}

@media(max-width: 600px){
    #wrapper--hero{
        flex-direction: column;
        gap: 1em;
    }

    .section--page{
        padding: 1em 0;
    }

    .card--work-history{
        border-left: none;
        padding-left: 0;
    }

    #qualifications--list{
        padding: 0;
    }
}


/* Dark Mode */
.dark-mode {
    background-color: var(--mainBgColor-dark);
}

/* Styling the checkbox input */
#checkbox{
    position: absolute;
    top: 20px;
    right: 20px;
    appearance: none;
    -webkit-appearance : none;
    -moz-appearance : none;
    -o-appearance : none;
    width: 60px;
    height: 30px;
    background: black;
    border-radius: 22px;
    cursor: pointer;
    outline: none;
}
/* styling the circle inside the checkbox input */
#checkbox::before{
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background-color:white;
    border-radius: 35px;
    top: 2px;
    left: 2px;
    cursor: pointer;
    transition: .3s linear;
}
/* moving the checkbox circle when it's toggled by the user */
#checkbox:checked::before{
    left: 35px;
}
/* changing the color of the checkbox when it's toggled */
#checkbox:checked{
    background: rgb(12, 177, 81);
}

#checkbox:checked ~ #container{
    --mainTextColor:var(--mainTextColor-dark);
    --secondaryTextColor:var(--secondaryTextColor-dark);
    --mainLinkColor:var(--mainLinkColor-dark);
    --mainBorderColor:var(--mainBorderColor-dark);
    --mainBgColor:var(--mainBgColor-dark);
}

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
 }

That's pretty much up to it. I've provided the links to live deployment and the GitHub repo where you can access the source code.🔝

This project is entirely based on a tutorial I've recently come across in @traversymedia. They do really make some awesome content. @dennisivy11 is such a nice guy with skills. 🙌🏻

An extension which I've added in my project is the dark mode feature. You can switch to light/dark mode in just one click and it's cool I guess.

DEV Community

A Digital Resume

Let start building

Top comments (0)

Read next

Logging and Monitoring in Node.js: Best Practices

Website Design Examples for Inspiration on Websitevice

40 open-source gems to become the ultimate developer🔥 🚀

Introducing the Flashcards Game with LLM Assistant