Logo

菜单

发布于 2026-01-06 3 阅读
0

免费创建并托管电子简历

免费创建并托管电子简历

让我们把你的简历转换成可以与全世界分享的电子简历！

在本教程中，我们将修改我的个人简历，并将其转换为带有样式的 HTML 文件，然后免费托管在 GitHub Pages 上。点击此处查看在线演示。

简历上应该包含哪些内容

如果您想了解更多关于简历中应该包含哪些内容以及招聘经理在审阅简历时的想法，请阅读“开发人员简历——经理们实际是如何阅读它们的”。

让我们开始建造吧

我将在本教程的视频版本中使用本指南，强烈建议您在阅读本指南的同时观看该视频。

查看完整源代码

创建文件夹和文件

我将首先在桌面上创建一个空白文件夹，然后添加以下文件和文件夹：

digital_resume
│   index.html    
└───assets
│   │   resume.pdf
│   │   
│   │
│   └───images
│       │ 
│       └─profile_pic.jpg
│       
│   
└───styles
    │  
    └─style.css
Enter fullscreen mode Exit fullscreen mode

HTML 设置

让我们先设置一些 HTML 模板，然后把所有内容都搭建起来，直到资格列表。确保所有链接都正确。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dennis Ivy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./styles/main.css">
    </head>
    <body>
        <div id="container--main">

            <section id="wrapper--hero" class="section--page">
                <img id="profile-pic" src="./assets/images/profile_pic.JPG">

                <div>
                    <h1 id="user-name">Dennis Ivanov</h1>
                    <p id="bio">Software developer, developer advocate at <a href="https://www.agora.io/en/" target="_blank">Agora</a>, Udemy <a href="https://www.udemy.com/user/dennis-ivanov-5/" target="_blank">instructor</a>, <a href="https://www.youtube.com/c/dennisivy" target="_blank">YouTuber</a> with 166k+ subs and contributor at <a href="https://youtu.be/PtQiiknWUcI?t=6" target="_blank">Traversy Media</a>.</p>
                    <p id="email">👉 dennis@dennisivy.com</p>
                </div>  
            </section>

            <section class="section--page">

                <div id="socials--list">
                    <a href="https://youtube.com/c/dennisivy" target="_blank">Youtube</a>
                    <a href="https://twitter.com/dennisivy11" target="_blank">Twitter</a>
                    <a href="https://www.linkedin.com/in/dennis-ivanov/" target="_blank">Linkedin</a>
                    <a href="https://github.com/divanov11" target="_blank">Github</a>
                    <a href="./assets/resume.pdf" target="_blank">Download Resume</a>
                </div>
            </section>

            <section class="section--page">
                <h2>Skills & Qualifications</h2>
                <ul id="qualifications--list">
                    <li>✔️ 7 Years experience with front & backend development</li>
                    <li>✔️ Extensive knowledge in API & Database Design.</li>
                    <li>✔️ Experienced content creator on YouTube & community leader </li>
                    <li>✔️ 7 Years experience with running Adwords campaigns & SEO</li>
                </ul>
            </section>  
        </div>

    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

对我们目前拥有的风格进行调整

在添加更多内容之前，让我们先添加一些样式，并导入我想在这里使用的字体类型：

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

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

*{
    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-weight: 500;
}

li{
    line-height: 1.9em;
}

#container--main{
    max-width: 700px;
    margin: 0 auto;
    padding: 1em;
}

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

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

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

#user-name{
    font-size: 48px;
    line-height: 1em;
}

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

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

#socials--list{
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
    flex-wrap: wrap;
}

#socials--list a{
    font-weight: 300;
    color: var(--secondaryTextColor);
    font-size: 0.9em;
    transition: 0.3s;
}

#socials--list a:hover{
    font-weight: 100;
    color: var(--mainLinkColor);
    font-size: 0.9em;
}

#qualifications--list{
    list-style: none;
}
Enter fullscreen mode Exit fullscreen mode

添加深色模式

我们是开发者，所以当然需要提供深色模式选项。我们不会添加任何切换功能，只是让您可以根据需要设置偏好。

为此，我们只需在同一个 CSS 文件中设置一些变量，只是这次我们会在末尾:root指定它们，然后复制并修改浅色模式颜色，使其带有扩展名。为了设置主题，我们只需在整个 CSS 文件中使用浅色或深色变量即可。-dark-light

: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-dark);
    --secondaryTextColor:var(--secondaryTextColor-dark);
    --mainLinkColor:var(--mainLinkColor-dark);
    --mainBorderColor:var(--mainBorderColor-dark);
    --mainBgColor:var(--mainBgColor-dark);

}
Enter fullscreen mode Exit fullscreen mode

技术栈

只需在下方Skills & qualifications添加以下 HTML 和 CSS代码即可

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

    <div id="wrapper--techstack__items">
        <div class="card--techstack"><span>Python, JavaScript, NodeJS</span></div>
        <div class="card--techstack"><span>Django, Express, Flask, FastAPI</span></div>
        <div class="card--techstack"><span>React, Next JS</span></div>
        <div class="card--techstack"><span>Postgres, MongoDB, MySQL</span></div>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode 
#qualifications--list{
    list-style: none;
}

#wrapper--techstack__items{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-size: 0.9em;
}

.card--techstack{
    border: 1px solid var(--mainBorderColor);
    border-radius: 5px;
    padding: 0.5em 1em;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

工作经历

在本部分下方添加以下Tech Stack部分。

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

    <div class="line-break"></div>
    <div class="card--work-history">
        <strong>🚧 DEVELOPER ADVOCATE | AGORA.IO</strong>
        <p>11/2021 - Present</p>
        <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
        <ul>
            <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
            <li>Produced educational video content which resulted in 300k+ views on youtube</li>
            <li>Produced SEO campaigns and content to gain market share for related keywords.</li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 INSTRUCTOR | YOUTUBE, UDEMY, TEACHABLE</strong>
        <p>11/2019 - Present</p>
        <p>Produced content showcasing new tech, tutorials & interviews with top developers.</p>
        <ul>
            <li>166,000+ Youtube Subscribers</li>
            <li>30,000 course copies sold</li>
            <li>12+ Million views on Youtube</li>
            <li>Made regular contributions to Traversy Medias youtube channel (1.9m Subscribers)</li>
            <li>Tutorial videos included projects such as social networks, Ecommerce, real time video, stripe & paypal integrations and more </li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 SENIOR DEVELOPER | FOI LABS</strong>
        <p>10/2017 - 10/2019</p>
        <p>Designed and developed a laboratory management system. My system
            provided an interface for lab technicians and customers to view and
            track data from samples tested in the lab.</p>
        <ul>
            <li>Designed prototype & pitched original idea for new lab management system (LIMS)</li>
            <li>Built entire code base and brought version 1 of LIMS system to market as a solo developer</li>
            <li>Onboarded and trained customers (Webinars & Conferences)</li>
            <li>Managed a small team of developers in expansion of LIMS system</li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 DIGITAL MARKETER | UNIFIVE DIGITAL</strong>
        <p>2014 - 2017</p>
        <p>Started a digital agency building websites and marketing for
            local businesses. Mostly Wordpress sites with small modifications to
            themes.</p>
        <ul>
            <li>Organized SEO & SEM campaigns on a local and global scale.</li>
            <li>Saved a customer $110k a year by reducing Adwords CPC cost with optimization</li>
            <li>70 + websites built with my small team of developers and freelancers</li>
        </ul>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode 
.card--work-history{
    border-left: 1px solid var(--mainBorderColor);
    margin-top: 3em;
    margin-bottom: 3em;
    padding-left: 2em;
}

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

项目与成就

Work History请在下方添加以下代码

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

    <div class="card--project">
        <a href="project1.html"><span>🏆 </span>Built a Laboratory management system for forensics lab</a>
    </div>

    <div class="card--project">
        <a href="project1.html" ><span>🏆 </span>Documentation website - Lead team to re-build docs for agora.io</a>
    </div>

    <div class="card--project">
        <a href="project1.html" ><span>🏆 </span>Ecommerce platform using paypal and stripe API for payment integration</a>
    </div>

    <div class="card--project">
        <a href="project1.html"><span>🏆 </span>Social Network - open source project</a>
    </div>

</section>
Enter fullscreen mode Exit fullscreen mode 
.card--project{
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid var(--mainBorderColor);
}

.card--project a{
    color: var(--mainTextColor);

    transition: 0.3s;
}

.card--project a:hover{
    color: rgb(30, 190,214);

}
Enter fullscreen mode Exit fullscreen mode

项目页面

最好对你参与过的每个项目都做一些简要介绍。为此，我们将创建一个模板，并为每个项目填写一些示例文本。我会提供一份模板，你可以根据需要进行修改。

在与您的文件相同的目录下index.html创建一个project1.html文件，并添加以下代码。如果您完全按照我的代码执行最后一步，您应该已经链接到此页面了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dennis Ivy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./styles/main.css">
    </head>
    <body>
        <div id="container--main">
            <a href="index.html">&#x2190; Go Back</a>
            <h1>Built a Laboratory management system for forensics lab</h1>

            <ul>
                <li><a href="#">Live Demo</a></li>
                <li><a href="#">Source code</a></li>
            </ul>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>

            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look</p>

            <ul>
                <li>Contrary to popular belief, Lorem Ipsum is not simply random text</li>
                <li>making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</li>
                <li>45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem"</li>
            </ul>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

使其响应式

现在都2022年了，你的网站最好是响应式的。

将此添加到您的 CSS 文件底部

@media(max-width:600px){

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

    #wrapper--hero{
        gap: 1em;
        flex-direction: column;
    }

    #profile-pic{
        width: 200px;
        height: 200px;
    }


    .card--work-history{
        border-left: none;
        padding-left: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

使用 GitHub Pages 进行托管

我说过我会尽量简化这部分。所以我们不会使用GitHub以外的任何外部服务，GitHub是每个开发者都应该熟悉的平台。

如果您不熟悉 Git 和 GitHub，我建议您观看我制作的关于向 GitHub 上传文件的视频。

GitHub Pages

文件推送到 GitHub 仓库后，您可以使用 GitHub Pages 来托管您的静态网站，这个过程很简单。

注意：如果您想免费托管，则需要将您的仓库设置为公共仓库。

在您的 GitHub 帐户中，选择您的存储库，然后单击settings--> pages，然后选择要部署的分支，然后单击保存。

这可能需要一分钟时间，请稍等片刻再刷新页面。

为了安全起见，请确保您的主页已正确调用，index.html以避免冲突。

现在你应该能看到你的域用户了Custom Domain。我的看起来像这样：divanov11.github.io/Digital-Resume

GitHub Pages

文章来源：https://dev.to/dennisivy11/build-a-digital-resume-host-for-free-559
我第一次完成了 Hacktober...
如何在 React 中将数据从一个...