+ Responsive imge
* Fade in for background * Better headline placement + Navbar ready for sections
This commit is contained in:
shockrah
parent
48042d828a
commit
23dac27963
@ -1,4 +1,5 @@
|
|||||||
baseURL = "https://shockrah.gitlab.io"
|
baseURL = "https://shockrah.gitlab.io"
|
||||||
|
title = "Hi I'm Shockrah"
|
||||||
|
|
||||||
languageCode = "en-us"
|
languageCode = "en-us"
|
||||||
theme = "resume"
|
theme = "resume"
|
||||||
@ -8,7 +9,7 @@ unsafe= true
|
|||||||
|
|
||||||
[params]
|
[params]
|
||||||
name = "Alejandro"
|
name = "Alejandro"
|
||||||
description = "A summary of my past and present works"
|
description = "I make candy and code"
|
||||||
title = "My personal portfolio"
|
title = "My personal portfolio"
|
||||||
|
|
||||||
author = "Alejandro Santillana"
|
author = "Alejandro Santillana"
|
||||||
|
|||||||
BIN
static/images/favicon.png
(Stored with Git LFS)
Normal file
BIN
static/images/favicon.png
(Stored with Git LFS)
Normal file
Binary file not shown.
@ -2,23 +2,31 @@
|
|||||||
<html lang="en-us">
|
<html lang="en-us">
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
<body>
|
<body>
|
||||||
<div class="banner-container">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<img src="/images/banner.jpg" style="max-width: 100%;">
|
<a class="navbar-brand"><img src="/images/favicon.png" width="30", height="30" class="d-inline-block align-top" alt="">
|
||||||
<div class="headline">Hi I'm Alex</div>
|
<strong>Why not look through my:</strong>
|
||||||
<a class="btn btn-default btn-lg banner-button" href="#content">
|
</a>
|
||||||
<i class="fa fa-arrow-circle-down"></i>
|
<button class="navbar-toggler" type="button" data-toggle="collapse">
|
||||||
</a>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
{{ range .Pages }}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#{{trim .RelPermalink "/"}}">
|
||||||
|
{{.Title}} or
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="content" class="content-container sections">
|
</nav>
|
||||||
<!-- Range the cards first -->
|
<div class="banner-container">
|
||||||
{{ range .Pages }}
|
<div class="fade-in-image">
|
||||||
<div class="card">
|
<img class="img-fluid" src="/images/banner.jpg">
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title">{{.Title}}</h2>
|
|
||||||
<div class="card-text">{{.Content}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="headline">{{.Site.Title}}</h1>
|
||||||
|
<h2 class="headline" style="bottom: 3%">{{.Site.Params.Description}}</h2>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
|
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
|
||||||
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||||||
|
<link rel="shortcut icon" type="image/png" href="{{ .Site.BaseURL }}/images/favicon.png">
|
||||||
<meta property="og:title" content="{{ .Site.Title }}">
|
<meta property="og:title" content="{{ .Site.Title }}">
|
||||||
<meta property="og:description" content="{{ .Site.Params.description }}">
|
<meta property="og:description" content="{{ .Site.Params.description }}">
|
||||||
<meta property="og:site_name" content="{{ .Site.Params.name }}">
|
<meta property="og:site_name" content="{{ .Site.Params.name }}">
|
||||||
|
|||||||
@ -18,11 +18,44 @@ html {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fade-in-image {
|
||||||
|
animation: fadeIn 3s;
|
||||||
|
-webkit-animation: fadeIn 5s;
|
||||||
|
-moz-animation: fadeIn 5s;
|
||||||
|
-o-animation: fadeIn 5s;
|
||||||
|
-ms-animation: fadeIn 5s;
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {opacity:0;}
|
||||||
|
100% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeIn {
|
||||||
|
0% {opacity:0;}
|
||||||
|
100% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% {opacity:0;}
|
||||||
|
100% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeIn {
|
||||||
|
0% {opacity:0;}
|
||||||
|
100% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes fadeIn {
|
||||||
|
0% {opacity:0;}
|
||||||
|
100% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.headline {
|
.headline {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
top: 4rem;
|
bottom: 10%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
@ -40,48 +73,3 @@ html {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sections {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
margin: 1em;
|
|
||||||
max-width: 800px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.card-title {
|
|
||||||
font-size: 5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #4dc09f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
.card-body {
|
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
/* Ripped from my blog */
|
|
||||||
.embed {
|
|
||||||
padding-left: 1em;
|
|
||||||
line-height: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #191818;
|
|
||||||
padding-right: 0.75em;
|
|
||||||
padding-bottom: 0.5em;
|
|
||||||
min-width: 300px;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
border-left: 8px solid;
|
|
||||||
}
|
|
||||||
.embed-img {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #dcdcdc;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user