무료로 디지털 이력서 및 호스트 구축
41103 단어 webdev
이 튜토리얼에서 우리가 할 일은 내 개인resume을 검토하고 스타일을 지정하여 HTML 파일로 변환하고 무료로 Guthub 페이지에서 호스팅하는 것입니다. 라이브demo here를 참조하십시오.
이력서에 기재해야 할 사항
이력서에 기재해야 하는 내용의 유형과 고용 관리자가 이력서를 검토할 때 어떻게 생각하는지에 대해 자세히 알아보려면 "Developer Resumes — How Managers Actually Read Them "을 읽어 보십시오.
건물을 시작하자
나는 이 튜토리얼의 비디오 버전에서 이 가이드를 사용할 것이며 이 가이드를 읽으면서 해당 비디오here를 시청할 것을 적극 권장합니다.
전체 보기source code
폴더 및 파일 생성
데스크탑에 빈 폴더를 만들고 다음 파일과 폴더를 추가하여 이 프로젝트를 시작하겠습니다.
digital_resume
│ index.html
└───assets
│ │ resume.pdf
│ │
│ │
│ └───images
│ │
│ └─profile_pic.jpg
│
│
└───styles
│
└─style.css
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">👉 [email protected]</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>
지금까지의 스타일링
더 많은 콘텐츠를 추가하기 전에 일부 스타일을 추가하고 여기에서 사용하고 싶은 글꼴 유형을 가져오겠습니다.
@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;
}
다크 모드 추가
우리는 개발자이므로 당연히 다크 모드 옵션을 제공해야 합니다. 토글이나 그와 유사한 것을 추가하지 않고 원하는 경우 기본 설정을 지정할 수 있는 기능만 추가합니다.
이를 위해 동일한
:root에 더 많은 CSS 변수를 설정합니다. 이제 마지막에 -dark를 지정한 다음 라이트 모드 색상을 복제하고 수정하여 -light 확장자를 갖습니다. 테마를 설정하기 위해 css 파일 전체에서 사용자 변수에 밝거나 어두운 변수를 사용하기만 하면 됩니다.: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);
}
기술 스택
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>
#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;
}
작업 이력
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>
.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;
}
프로젝트 및 성과
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>
.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);
}
프로젝트 페이지
작업한 모든 프로젝트에 대해 몇 가지를 말하는 것이 가장 좋습니다. 이를 위해 템플릿을 만들고 각 프로젝트에 대한 더미 텍스트를 채울 것입니다. 하나의 템플릿을 추가하고 필요에 따라 수정할 수 있도록 하겠습니다.
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">← 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>
반응형으로 만들기
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;
}
}
Github 페이지로 호스팅
이 부분을 최대한 간단하게 만들겠다고 말했습니다. 따라서 우리는 모든 개발자에게 친숙해야 하는 플랫폼인 github 외부의 외부 서비스를 사용하지 않을 것입니다.
Git 및 GitHub에 익숙하지 않다면 내가 만든 이 비디오Uploading Files To GitHub 를 확인하는 것이 좋습니다.
Github 페이지
파일이 Github 리포지토리로 푸시되면 github 페이지를 사용하여 정적 웹 사이트를 호스팅할 수 있습니다. 이 프로세스는 쉽습니다.
Note: If you want to host for free you will need to make your repo a public repo
GitHub 계정에서 리포지토리를 선택한 다음
settings --> pages를 클릭한 다음 배포하려는 분기를 선택하고 저장을 클릭합니다.이 작업은 1분 정도 소요될 수 있으므로 새로고침하기 전에 잠시 시간을 두십시오.
안전을 위해 충돌을 피하기 위해 홈 페이지가
index.html로 호출되었는지 확인하십시오.이제 도메인 사용자를 볼 수 있어야 합니다
Custom Domain. 내 모습은 다음과 같습니다divanov11.github.io/Digital-Resume.
Reference
이 문제에 관하여(무료로 디지털 이력서 및 호스트 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dennisivy11/build-a-digital-resume-host-for-free-559텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
