hero page modification
This commit is contained in:
gurusabarish
@@ -42,6 +42,7 @@ params:
|
||||
|
||||
theme:
|
||||
disableThemeToggle: false
|
||||
# defaultTheme: "light" # dark
|
||||
|
||||
# font:
|
||||
# fontSize: 1.5rem # default: 1rem
|
||||
@@ -84,9 +85,10 @@ params:
|
||||
hero:
|
||||
enable: true
|
||||
intro: "Hi, my name is"
|
||||
title: "Hugo Profile."
|
||||
subtitle: "I build things for the web."
|
||||
title: "Isabella."
|
||||
subtitle: "I build things for the web"
|
||||
content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
|
||||
image: /images/hero.svg
|
||||
button:
|
||||
enable: true
|
||||
name: "Resume"
|
||||
@@ -310,3 +312,5 @@ params:
|
||||
twitter: https://twitter.com
|
||||
instagram: https://instagram.com
|
||||
facebook: https://facebook.com
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 145 145" style="enable-background:new 0 0 145 145;" xml:space="preserve">
|
||||
<g id="women_1">
|
||||
<rect style="fill:#60B0C9;" width="145" height="145"/>
|
||||
<g>
|
||||
<ellipse style="fill:#5A3017;" cx="86.95" cy="81.002" rx="16.518" ry="18.002"/>
|
||||
<path style="fill:#F1C9A5;" d="M109.374,115.396c-4.964-9.397-36.874-15.293-36.874-15.293s-31.911,5.896-36.875,15.293
|
||||
C31.958,128.434,28.888,145,28.888,145H72.5h43.611C116.112,145,114.04,127.237,109.374,115.396z"/>
|
||||
<path style="fill:#E4B692;" d="M72.501,100.103c0,0,31.91,5.896,36.874,15.293c4.665,11.842,6.737,29.604,6.737,29.604H72.501
|
||||
V100.103z"/>
|
||||
<rect x="63.813" y="81.002" style="fill:#F1C9A5;" width="17.374" height="29.077"/>
|
||||
<rect x="72.501" y="81.002" style="fill:#E4B692;" width="8.686" height="29.077"/>
|
||||
<path style="opacity:0.1;fill:#DDAC8C;enable-background:new ;" d="M63.813,94.475c1.563,4.485,7.868,7.057,12.499,7.057
|
||||
c1.676,0,3.306-0.28,4.875-0.795V81.002H63.813V94.475z"/>
|
||||
<path style="fill:#F1C9A5;" d="M94.837,62.652c0-18.161-10.001-28.489-22.337-28.489c-12.337,0-22.338,10.328-22.338,28.489
|
||||
c0,18.162,10.001,32.888,22.338,32.888S94.837,80.814,94.837,62.652z"/>
|
||||
<path style="fill:#E4B692;" d="M91.438,75.245c-4.049-0.451-6.783-5.088-6.098-10.353c0.678-5.269,4.513-9.179,8.563-8.733
|
||||
c4.047,0.449,6.777,5.084,6.094,10.353C99.318,71.781,95.487,75.689,91.438,75.245z"/>
|
||||
<path style="fill:#F1C9A5;" d="M45.161,66.513c-0.684-5.269,2.047-9.903,6.092-10.353c4.053-0.446,7.888,3.464,8.567,8.733
|
||||
c0.683,5.265-2.053,9.901-6.1,10.353C49.671,75.689,45.84,71.781,45.161,66.513z"/>
|
||||
<path style="fill:#E4B692;" d="M94.837,62.652c0-18.161-10.001-28.489-22.337-28.489V95.54
|
||||
C84.837,95.54,94.837,80.814,94.837,62.652z"/>
|
||||
<path style="fill:#9E1F63;" d="M109.374,115.396c-1.665-3.154-6.369-5.909-11.878-8.184c-2.77,11.233-12.908,19.566-24.996,19.566
|
||||
c-12.089,0-22.227-8.333-24.997-19.566c-5.509,2.274-10.212,5.029-11.878,8.184C31.958,128.434,28.888,145,28.888,145H72.5h43.611
|
||||
C116.112,145,114.04,127.237,109.374,115.396z"/>
|
||||
<path style="fill:#5A3017;" d="M102.039,65.792c0,0-12.06,6.029-20.501-10.855c-5.628,0.805-22.513-2.411-25.729-10.451
|
||||
c-2.813,12.06-10.753,14.435-4.824,26.531c4.37,8.916,3.618,24.523,3.618,24.523S36.334,78.865,38.994,56.126
|
||||
c2.994-25.604,9.178-32.544,17.619-30.133c6.835-8.844,27.738-7.638,36.181,3.217c8.441,10.854,6.064,15.653,9.245,20.1
|
||||
C108.134,57.831,102.039,65.792,102.039,65.792z"/>
|
||||
<polyline style="fill:none;stroke:#9E1F63;stroke-width:1.0637;stroke-miterlimit:10;" points="47.503,107.212 90.388,119.538
|
||||
101.22,112.105 97.497,107.212 48.921,119.538 56.013,125.224 97.852,116.218 79.946,127.707 48.212,112.991 "/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -3,7 +3,14 @@
|
||||
<div class="container bg-transparent">
|
||||
<h3 class="text-center bg-transparent">{{ .Site.Params.about.title }}</h3>
|
||||
<div class="bg-transparent row justify-content-center px-3 py-5">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6 content">
|
||||
{{ if .Site.Params.about.image }}
|
||||
<div class="col-sm-12 col-md-8 col-lg-4 mb-5 mb-sm-0 mb-md-5 mb-lg-0 d-none d-sm-none d-md-block">
|
||||
<div class="image d-flex px-5">
|
||||
<img src="{{ .Site.Params.about.image }}" class="img-thumbnail mx-auto rounded-circle" alt="">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="col-sm-12 col-md-12 col-lg-8 content">
|
||||
{{ .Site.Params.about.content | markdownify }}
|
||||
|
||||
{{ if .Site.Params.about.skills.enable }}
|
||||
@@ -15,13 +22,6 @@
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if .Site.Params.about.image }}
|
||||
<div class="col-sm-12 col-md-8 col-lg-4 mt-5 mt-sm-0 mt-md-5 mt-lg-0">
|
||||
<div class="image d-flex px-5">
|
||||
<img src="{{ .Site.Params.about.image }}" class="img-thumbnail mx-auto rounded-circle" alt="">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,32 +1,43 @@
|
||||
{{ if .Site.Params.hero.enable | default false }}
|
||||
<section id="hero" class="py-5">
|
||||
<div class="container px-3 px-sm-5 px-md-5 px-lg-5">
|
||||
<div id="primary-font">
|
||||
<span class="subtitle">
|
||||
{{ .Site.Params.hero.intro }}
|
||||
</span>
|
||||
<h2>
|
||||
{{ .Site.Params.hero.title }}
|
||||
</h2>
|
||||
<h3>
|
||||
{{ .Site.Params.hero.subtitle }}
|
||||
</h3>
|
||||
<p class="hero-content">
|
||||
{{ .Site.Params.hero.content | markdownify }}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-auto h-100">
|
||||
{{ if .Site.Params.hero.button.enable }}
|
||||
<a href="{{ .Site.Params.hero.button.url }}" class="btn">
|
||||
{{ .Site.Params.hero.button.name }}
|
||||
</a>
|
||||
{{ end }}
|
||||
<div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-8" id="primary-font">
|
||||
<span class="subtitle">
|
||||
{{ .Site.Params.hero.intro }}
|
||||
</span>
|
||||
<h2>
|
||||
{{ .Site.Params.hero.title }}
|
||||
</h2>
|
||||
<h3>
|
||||
{{ .Site.Params.hero.subtitle }}
|
||||
</h3>
|
||||
<p class="hero-content">
|
||||
{{ .Site.Params.hero.content | markdownify }}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-auto h-100">
|
||||
{{ if .Site.Params.hero.button.enable }}
|
||||
<a href="{{ .Site.Params.hero.button.url }}" class="btn">
|
||||
{{ .Site.Params.hero.button.name }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col-auto px-0 h-100">
|
||||
{{- partial "sections/hero/social.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto px-0 h-100">
|
||||
{{- partial "sections/hero/social.html" . -}}
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-lg-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-12 col-md-9 pt-5 image px-5 px-md-5 px-lg-0 text-center">
|
||||
<img src="{{ .Site.Params.hero.image }}"
|
||||
class="img-thumbnail mx-auto"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-bottom-svg d-md-block d-lg-block d-none">
|
||||
|
||||
+17
-8
@@ -19,12 +19,6 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media all and (min-width:768px) and (max-width: 992px) {
|
||||
#hero {
|
||||
min-height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
#hero .hero-bottom-svg {
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
@@ -43,17 +37,32 @@
|
||||
}
|
||||
|
||||
#hero h3 {
|
||||
font-size: clamp(40px, 8vw, 80px);
|
||||
font-size: clamp(40px, 8vw, 60px);
|
||||
/* color: var(--primary-color) !important; */
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#hero p {
|
||||
margin: 20px 0px 0px;
|
||||
max-width: 540px;
|
||||
max-width: 640px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#hero .image img {
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: box-shadow 0.3s;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border: 2px solid var(--secondary-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#hero .image img:hover {
|
||||
box-shadow: 0 0 11px rgb(15 80 100 / 20%);
|
||||
filter: contrast(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#hero a.btn.social-icon {
|
||||
color: var(--primary-color) !important;
|
||||
line-height: 0%;
|
||||
|
||||
Reference in New Issue
Block a user