shockrah/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ Simple timeline for jobs

Browse Source 
! Some styling is in order but overall its not bad
This commit is contained in:
shockrah 2021-11-02 21:02:10 -07:00
parent 97387e89cc
commit ddd3c3e844
2 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
themes/resume/layouts/index.html
View File

@ -33,18 +33,36 @@
<div class="container">
{{ with .Site.GetPage "/projects" }}
<h1 class="section-header">{{.Title}}</h1>
<h1 class="section-header" id="projects">{{.Title}}</h1>
<div class="section">
{{ range .Pages }}
<div class="card">
<a href="{{.Params.Link}}"><h1 class="card-title title-link">{{.Title}}</h1></a>
<h6 class="card-subtitle mb-2 text-muted">{{.Params.Slogan}}</h6>
<a href="{{.Params.Link}}"><img src="{{.Params.Img}}" class="card-img"></a>
<a href="{{.Params.Link}}" class="card-img"><img src="{{.Params.Img}}" class="card-img"></a>
<div class="card-body"> {{.Content}} </div>
</div>
{{ end }}
</div>
{{ end }}
{{ with .Site.GetPage "/experience"}}
<h1 class="section-header" id="experience">{{.Title}}</h1>
<div class="section">
<ul class="timeline">
{{ range .Pages }}
<li>
<a>
<strong class="bigger">{{.Title}}</strong>
<em class="text-muted">@</em>
<a class="bigger">{{.Params.Company}}</a>
</a>
<p class="float-right">{{.Params.When}}</p>
<p>{{.Content}}</p>
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
</body>
</html>

40
themes/resume/static/css/style.css
View File

@ -12,6 +12,9 @@ html {
scroll-behavior: smooth;
}
.container {
max-width: 75%;
}
.banner-container {
position: relative;
text-align: center;
@ -116,6 +119,8 @@ html {
.section-header {
color: #EAA221;
font-weight: bold;
padding-top: 1em;
}
.section {
display: flex;
@ -139,7 +144,38 @@ a:hover { color: #EAA221; }
border:none;
}
@media screen and (max-width: 600px) {
.headline {
ul.timeline {
list-style-type: none;
position: relative;
padding-top: 1emy Wy W;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
.bigger {
font-size: 1.5rem;
}