Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/xaviablaza/hugo-lodi-theme.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorXavi Ablaza <xlablaza@gmail.com>2017-10-16 10:14:32 +0300
committerXavi Ablaza <xlablaza@gmail.com>2017-10-16 10:14:32 +0300
commit2b72067c1839218fb6689e38c269edf7f8146f9e (patch)
tree61ff8ade962294ff4efef17f5a64808431740039
parent84906e95766533a9aeabde2d30b70b8b4de4a473 (diff)
Wiring params in partials to config.toml and cleaning up CSS
Diffstat
-rw-r--r--layouts/index.html4
-rw-r--r--layouts/partials/case_studies.html37
-rw-r--r--layouts/partials/footer.html27
-rw-r--r--layouts/partials/header.html14
-rw-r--r--layouts/partials/hero.html119
-rw-r--r--layouts/partials/nav.html10
-rw-r--r--layouts/partials/process.html183
-rw-r--r--layouts/partials/scripts.html18
-rw-r--r--static/css/final.css239
-rw-r--r--static/img/avatar.jpg (renamed from static/img/dp.jpg)bin196877 -> 196877 bytes
10 files changed, 513 insertions, 138 deletions
diff --git a/layouts/index.html b/layouts/index.html
index cf94345..7501a30 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html lang ="{{ .Site.LanguageCode }}">
<head>
{{ partial "header.html" . }}
</head>
@@ -22,7 +22,7 @@
{{ end }}
{{ if .Site.Params.footer.enable }}
- {{ partial "footer.html" }}
+ {{ partial "footer.html" . }}
{{ end }}
</div>
diff --git a/layouts/partials/case_studies.html b/layouts/partials/case_studies.html
index e69de29..7a98525 100644
--- a/layouts/partials/case_studies.html
+++ b/layouts/partials/case_studies.html
@@ -0,0 +1,37 @@
+<section data-scroll-index="2">
+ <div class="case-studies">
+ <div class="header">
+ <h1 class="title">Case Studies</h1>
+ <h2 class="subtitle">Selected Works</h2>
+ </div>
+ <div class="case-studies-wrapper">
+ <div class="case-study-item">
+ <a href="http://alexiscollado.com/cope.html"><img src="{{ .Site.BaseURL }}img/cope.jpg" alt=""></a>
+ <h4>Cope iOS App</h4>
+ <h5>MOBILE APP DESIGN</h5>
+ <p>Cope is a mobile app that allows mental health help seekers
+ track their symptoms and medication. I helped them create a minimum
+ viable product for testing.</p>
+ <a href="http://alexiscollado.com/cope.html" class="read-more">Read Me</a>
+ </div>
+ <div class="case-study-item">
+ <a href="http://alexiscollado.com/360pro.html"><img src="{{ .Site.BaseURL }}img/360.jpg" alt=""></a>
+ <h4>360 Pro Tracker</h4>
+ <h5>WEB APP DESIGN</h5>
+ <p>The 360 Pro Tracker is a performance tracking system for
+ the 360 Pro gym. It tracks an athlete’s statistics and calculates his or
+ her pro score.</p>
+ <a href="http://alexiscollado.com/360pro.html" class="read-more">Read Me</a>
+ </div>
+ <div class="case-study-item">
+ <a href="http://alexiscollado.com/tedx.html"><img src="{{ .Site.BaseURL }}img/tedx.jpg" alt=""></a>
+ <h4>TEDxADMU Website</h4>
+ <h5>WEB DESIGN</h5>
+ <p>The TEDxADMU website was a project for the Ateneo Junior
+ Marketing Association. It's a project where I helped them reach a 66.8%
+ conversion rate from scratch.</p>
+ <a href="http://alexiscollado.com/tedx.html" class="read-more">Read Me</a>
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 03698fe..e980a67 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,6 +1,7 @@
<footer>
<div class="icons">
- <a href="mailto:lex.collado@gmail.com">
+ {{ if isset .Site.Params "email" }}
+ <a href="mailto:{{ .Site.Params.Email }}">
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>ui-16px-1_email-84</title>
@@ -17,7 +18,9 @@
</g>
</svg>
</a>
- <a href="https://facebook.com/lex.collado" target="blank">
+ {{ end }}
+ {{ if isset .Site.Params "facebook" }}
+ <a href="https://facebook.com/{{ .Site.Params.Facebook }}" target="blank">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-facebook</title>
@@ -34,7 +37,9 @@
</g>
</svg>
</a>
- <a href="https://twitter.com/alexiscollado" target="blank">
+ {{ end }}
+ {{ if isset .Site.Params "twitter" }}
+ <a href="https://twitter.com/{{ .Site.Params.Twitter }}" target="blank">
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-twitter</title>
@@ -51,7 +56,9 @@
</g>
</svg>
</a>
- <a href="https://dribbble.com/alexiscollado" target="blank">
+ {{ end }}
+ {{ if isset .Site.Params "dribbble" }}
+ <a href="https://dribbble.com/{{ .Site.Params.Dribbble }}" target="blank">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-dribbble</title>
@@ -68,7 +75,9 @@
</g>
</svg>
</a>
- <a href="https://www.linkedin.com/in/alexander-hans-collado-jr-9444146a" target="blank">
+ {{ end }}
+ {{ if isset .Site.Params "linkedin" }}
+ <a href="{{ .Site.Params.LinkedIn }}" target="blank">
<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-linkedin</title>
@@ -85,11 +94,13 @@
</g>
</svg>
</a>
- <a href="https://medium.com/@ahvccollado" target="blank">
+ {{ end }}
+ {{ if isset .Site.Params "medium" }}
+ <a href="https://medium.com/@{{ .Site.Params.Medium }}" target="blank">
<img src="img/medium.png" style="width: 16px;" alt="">
</a>
+ {{ end }}
</div>
- <a href="#" style="color: #574cdd
- ; text-decoration: underline;" data-scroll-goto="0">Back to top</a>
+ <a href="#" style="color: #574cdd; text-decoration: underline;" data-scroll-goto="0">Back to top</a>
</footer> \ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2e26506..593787c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -5,16 +5,16 @@
<meta name="theme-color" content="#574CDD">
<!-- desc -->
-<meta name="description" content="Portfolio of Alexis Collado, UX Designer">
-<meta property="og:description" content="Portfolio of Alexis Collado, UX Designer">
-<meta name="twitter:description" content="Portfolio of Alexis Collado, UX Designer">
+<meta name="description" content="Portfolio of {{ .Site.Params.my_name }}, {{ .Site.Params.job_position }}">
+<meta property="og:description" content="Portfolio of {{ .Site.Params.my_name }}, {{ .Site.Params.job_position }}">
+<meta name="twitter:description" content="Portfolio of {{ .Site.Params.my_name }}, {{ .Site.Params.job_position }}">
<!-- image -->
-<meta property="og:image" content="portfolio.jpg">
-<meta name="twitter:image" content="portfolio.jpg">
+<meta property="og:image" content="{{ .Site.BaseURL }}img/portfolio.jpg">
+<meta name="twitter:image" content="{{ .Site.BaseURL }}img/portfolio.jpg">
-<link rel="icon" href="img/favicon.png" type="image/x-icon">
-<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
+<link rel="icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/css.css" >
<link rel="stylesheet" href="css/final.css">
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index e69de29..c6acabb 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -0,0 +1,119 @@
+<section style="padding-top: 120px;" id="scroll-element" data-scroll-index="0">
+ <div class="hero">
+ <div class="hero-left">
+ <img src="{{ .Site.BaseURL }}img/{{ .Site.Params.Hero.Avatar }}" style="max-width: 50%; border-radius: 50%; ">
+ <h2 class="subtitle">{{ .Site.Params.Hero.subtitle }}</h2>
+ <div class="icons">
+ {{ if isset .Site.Params "email" }}
+ <a href="mailto:{{ .Site.Params.Email }}">
+ <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>ui-16px-1_email-84</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-94.000000, -336.000000)" id="Group" fill="#505050">
+ <g transform="translate(94.000000, 335.000000)">
+ <g id="ui-16px-1_email-84" transform="translate(0.000000, 1.000000)">
+ <path d="M15,0 L1,0 C0.448,0 0,0.447 0,1 L0,13 C0,13.553 0.448,14 1,14 L15,14 C15.552,14 16,13.553 16,13 L16,1 C16,0.447 15.552,0 15,0 Z M14,12 L2,12 L2,5.723 L7.504,8.868 C7.812,9.044 8.189,9.044 8.496,8.868 L14,5.723 L14,12 Z M14,3.42 L8,6.849 L2,3.42 L2,2 L14,2 L14,3.42 Z" id="Shape"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </a>
+ {{ end }}
+ {{ if isset .Site.Params "facebook" }}
+ <a href="https://facebook.com/{{ .Site.Params.Facebook }}" target="blank">
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>social-16px_logo-facebook</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-131.000000, -335.000000)" id="Group" fill="#505050">
+ <g transform="translate(94.000000, 335.000000)">
+ <g id="social-16px_logo-facebook" transform="translate(37.000000, 0.000000)">
+ <path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L8,16 L8,11 L6,11 L6,8 L8,8 L8,6 C8,3.9 9.2,3 11,3 L13,3 L13,6 L12,6 C11.4,6 11,6.4 11,7 L11,8 L13.6,8 L13,11 L11,11 L11,16 L15.3,16 C15.7,16 16,15.7 16,15.3 L16,0.7 C16,0.3 15.7,0 15.3,0 Z" id="White_2_"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </a>
+ {{ end }}
+ {{ if isset .Site.Params "twitter" }}
+ <a href="https://twitter.com/a{{ .Site.Params.Twitter }}" target="blank">
+ <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>social-16px_logo-twitter</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-169.000000, -336.000000)" id="Group" fill="#505050">
+ <g transform="translate(94.000000, 335.000000)">
+ <g id="social-16px_logo-twitter" transform="translate(75.000000, 1.000000)">
+ <path d="M16,2 C15.4,2.3 14.8,2.4 14.1,2.5 C14.8,2.1 15.3,1.5 15.5,0.7 C14.9,1.1 14.2,1.3 13.4,1.5 C12.8,0.9 11.9,0.5 11,0.5 C9.3,0.5 7.8,2 7.8,3.8 C7.8,4.1 7.8,4.3 7.9,4.5 C5.2,4.4 2.7,3.1 1.1,1.1 C0.8,1.6 0.7,2.1 0.7,2.8 C0.7,3.9 1.3,4.9 2.2,5.5 C1.7,5.5 1.2,5.3 0.7,5.1 L0.7,5.1 C0.7,6.7 1.8,8 3.3,8.3 C3,8.4 2.7,8.4 2.4,8.4 C2.2,8.4 2,8.4 1.8,8.3 C2.2,9.6 3.4,10.6 4.9,10.6 C3.8,11.5 2.4,12 0.8,12 L0,12 C1.5,12.9 3.2,13.5 5,13.5 C11,13.5 14.3,8.5 14.3,4.2 L14.3,3.8 C15,3.3 15.6,2.7 16,2 Z" id="Shape"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </a>
+ {{ end }}
+ {{ if isset .Site.Params "dribbble" }}
+ <a href="https://dribbble.com/{{ .Site.Params.Dribbble }}" target="blank">
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>social-16px_logo-dribbble</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-206.000000, -335.000000)" id="Group" fill="#505050">
+ <g transform="translate(94.000000, 335.000000)">
+ <g id="social-16px_logo-dribbble" transform="translate(112.000000, 0.000000)">
+ <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M10.2,7.4 C10.2,7.4 10,6.8 9.9,6.6 C11.6,5.8 12.7,4.9 13.1,4.4 C13.8,5.3 14.2,6.4 14.3,7.6 C13.5,7.4 11.7,7.1 10.2,7.4 Z M9.1,5.1 C8.3,3.7 7.4,2.5 7,1.8 C8.9,1.3 10.6,1.9 11.9,3.1 C11.5,3.6 10.7,4.4 9.1,5.1 Z M5.1,2.5 C5.5,3 6.3,4.2 7.1,5.7 C4.9,6.2 2.9,6.3 2,6.3 C2.4,4.7 3.6,3.3 5.1,2.5 Z M8,7.3 C8.1,7.5 8.2,7.7 8.3,7.8 C5.5,8.7 3.7,11 3.1,11.9 C2.3,10.8 1.8,9.5 1.8,8.2 C2.7,8.1 5.3,8 8,7.3 Z M9,9.5 C9.7,11.5 10.1,13.1 10.2,13.9 C8.1,14.6 5.7,14.2 4.4,13.1 C4.8,12.4 6.1,10.6 9,9.5 Z M11.9,12.9 C11.7,12.1 11.4,10.7 10.8,9 C11.9,8.8 13.5,9 14.1,9.2 C13.8,10.7 13,12 11.9,12.9 Z" id="Shape"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </a>
+ {{ end }}
+ {{ if isset .Site.Params "linkedin" }}
+ <a href="{{ .Site.Params.LinkedIn }}" target="blank">
+ <svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>social-16px_logo-linkedin</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-243.000000, -335.000000)" id="Group" fill="#505050">
+ <g transform="translate(94.000000, 335.000000)">
+ <g id="social-16px_logo-linkedin" transform="translate(149.000000, 0.000000)">
+ <path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L15.4,16 C15.8,16 16.1,15.7 16.1,15.3 L16.1,0.7 C16,0.3 15.7,0 15.3,0 Z M4.7,13.6 L2.4,13.6 L2.4,6 L4.8,6 L4.8,13.6 L4.7,13.6 Z M3.6,5 C2.8,5 2.2,4.3 2.2,3.6 C2.2,2.8 2.8,2.2 3.6,2.2 C4.4,2.2 5,2.8 5,3.6 C4.9,4.3 4.3,5 3.6,5 Z M13.6,13.6 L11.2,13.6 L11.2,9.9 C11.2,9 11.2,7.9 10,7.9 C8.8,7.9 8.6,8.9 8.6,9.9 L8.6,13.7 L6.2,13.7 L6.2,6 L8.5,6 L8.5,7 L8.5,7 C8.8,6.4 9.6,5.8 10.7,5.8 C13.1,5.8 13.5,7.4 13.5,9.4 L13.5,13.6 L13.6,13.6 Z" id="Shape"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </a>
+ {{ end }}
+ {{ if isset .Site.Params "medium" }}
+ <a href="https://medium.com/@{{ .Site.Params.Medium }}" target="blank">
+ <!--?xml version="1.0" encoding="UTF-8"?-->
+ <img src="{{ .Site.BaseURL }}img/medium.png" style="width: 16px;" alt="">
+ </a>
+ {{ end }}
+ </div>
+ <a href="{{ .Site.BaseURL }}ResumeCollado.pdf" target="blank" class="download-resume" onclick="ga('send', {hitType: 'event',eventCategory: 'CTA',eventAction: 'download',});">
+ <svg style="position: relative;top: 1.8px;padding-right: 1.5em;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16"><g><polygon data-color="color-2" fill="#b6c9fe" points="9,8 9,1 7,1 7,8 4.6,8 8,12 11.4,8 "></polygon>
+ <path fill="#b6c9fe" d="M15,16H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h3v2H2v7h12V7h-2V5h3c0.6,0,1,0.4,1,1v9C16,15.6,15.6,16,15,16z"></path></g></svg>Download Resume</a>
+ </div>
+ <div class="hero-right">
+ {{ range $paragraph := .Site.Params.Hero.hero_right }}
+ <p>{{ $paragraph | markdownify }}</p>
+ {{ end }}
+ </div>
+ </div>
+</section> \ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index e69de29..9505f88 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -0,0 +1,10 @@
+<nav class="main-navigation stuckMenu">
+ <a href="index.html">
+ <img class="logo" src="{{ .Site.BaseURL }}img/logo.png" alt="My Portfolio">
+ </a>
+ <div class="sub-navigation">
+ <a href="#" class="main-navigation-link" id="about" data-scroll-goto="0">About</a>
+ <a href="#" class="main-navigation-link" id="process-link" data-scroll-goto="1">Process</a>
+ <a href="#" class="main-navigation-link" data-scroll-goto="2">Case Studies</a>
+ </div>
+</nav> \ No newline at end of file
diff --git a/layouts/partials/process.html b/layouts/partials/process.html
index e69de29..9ffea96 100644
--- a/layouts/partials/process.html
+++ b/layouts/partials/process.html
@@ -0,0 +1,183 @@
+<section data-scroll-index="1">
+ <div class="process">
+ <div class="header">
+ <h1 class="title">{{ .Site.Params.Process.Title }}</h1>
+ <h2 class="subtitle">{{ .Site.Params.Process.Subtitle }}</h2>
+ </div>
+ <div class="process-wrapper">
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="34px" height="31px" viewBox="0 0 34 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>design-64px-outline_book-open</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-89.000000, -786.000000)" id="Group-10" stroke-width="2">
+ <g transform="translate(90.000000, 780.000000)">
+ <g id="design-64px-outline_book-open" transform="translate(0.000000, 7.000000)">
+ <g id="Group">
+ <path d="M16,3.73333333 L16,18.1333333" id="Shape" stroke="#00CEDB"></path>
+ <polyline id="Shape" stroke="#505050" points="28.8 3.2 32 3.2 32 28.8 0 28.8 0 3.2 3.2 3.2"></polyline>
+ <path d="M16,3.73333333 C12.4,1.0224 7.64426667,0 3.2,0 L3.2,21.8666667 C7.64426667,21.8666667 12.4,22.8890667 16,25.6 C19.6,22.8890667 24.3557333,21.8666667 28.8,21.8666667 L28.8,0 C24.3557333,0 19.6,1.0224 16,3.73333333 Z" id="Shape" stroke="#505050"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Research</h3>
+ </figure>
+ <p>I collaborate with stakeholders, ask meaningful questions, probe user goals, motivations, to understand context.</p>
+ </div>
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="34px" height="37px" viewBox="0 0 34 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>design-64px-outline-2_ruler-pencil</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-565.000000, -780.000000)" id="Group-11" stroke-width="2">
+ <g transform="translate(560.000000, 777.000000)">
+ <g id="design-64px-outline-2_ruler-pencil" transform="translate(6.000000, 4.000000)">
+ <g id="Group">
+ <path d="M26.2857143,5.71428571 L26.2857143,26.2857143" id="Shape" stroke="#00CEDB"></path>
+ <path d="M20.5714286,5.71428571 L32,5.71428571" id="Shape" stroke="#505050"></path>
+ <path d="M20.5714286,26.2857143 L32,26.2857143" id="Shape" stroke="#505050"></path>
+ <polygon id="Shape" stroke="#505050" points="32 26.2857143 26.2857143 33.1428571 20.5714286 26.2857143 20.5714286 0 32 0"></polygon>
+ <path d="M0,16 L5.14285714,16" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,20.5714286 L4,20.5714286" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,29.7142857 L4,29.7142857" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,6.85714286 L5.14285714,6.85714286" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,11.4285714 L4,11.4285714" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,25.1428571 L5.14285714,25.1428571" id="Shape" stroke="#00CEDB"></path>
+ <rect id="Rectangle-path" stroke="#505050" x="0" y="0" width="13.7142857" height="34.2857143"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Discovery</h3>
+ </figure>
+ <p>I ideate solutions by wireframing or creating mockups, facilitate design studios, and gather user feedback.</p>
+ </div>
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="34px" height="30px" viewBox="0 0 34 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>design-64px-outline_window-paragraph</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-1029.000000, -783.000000)" id="Group-12" stroke-width="2">
+ <g transform="translate(1030.000000, 777.000000)">
+ <g id="design-64px-outline_window-paragraph" transform="translate(0.000000, 7.000000)">
+ <g id="Group">
+ <rect id="Rectangle-path" stroke="#505050" x="4.26666667" y="13.3333333" width="8.53333333" height="8.53333333"></rect>
+ <path d="M16.5333333,13.3333333 L27.7333333,13.3333333" id="Shape" stroke="#00CEDB"></path>
+ <path d="M16.5333333,17.6 L27.7333333,17.6" id="Shape" stroke="#00CEDB"></path>
+ <path d="M16.5333333,21.8666667 L22.9333333,21.8666667" id="Shape" stroke="#00CEDB"></path>
+ <path d="M4.26666667,3.73333333 L6.4,3.73333333" id="Shape" stroke="#00CEDB"></path>
+ <path d="M9.6,3.73333333 L11.7333333,3.73333333" id="Shape" stroke="#00CEDB"></path>
+ <path d="M21.8666667,3.73333333 L27.7333333,3.73333333" id="Shape" stroke="#00CEDB"></path>
+ <path d="M0,7.46666667 L32,7.46666667" id="Shape" stroke="#00CEDB"></path>
+ <rect id="Rectangle-path" stroke="#505050" x="0" y="0" width="32" height="27.7333333"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Design</h3>
+ </figure>
+ <p>I design delightful, purposeful interactions and interfaces that help the user accomplish his or her tasks.</p>
+ </div>
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="36px" height="27px" viewBox="0 0 36 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>design-64px-outline_code</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-88.000000, -964.000000)" id="Group-18" stroke-width="2">
+ <g transform="translate(90.000000, 957.000000)">
+ <g id="Group-13">
+ <g id="design-64px-outline_code" transform="translate(0.000000, 8.000000)">
+ <g id="Group">
+ <polyline id="Shape" stroke="#505050" points="6.85714286 5.71428571 0 12.5714286 6.85714286 19.4285714"></polyline>
+ <polyline id="Shape" stroke="#505050" points="25.1428571 5.71428571 32 12.5714286 25.1428571 19.4285714"></polyline>
+ <path d="M11.4285714,25.1428571 L20.5714286,0" id="Shape" stroke="#00CEDB"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Development</h3>
+ </figure>
+ <p>I prototype the final design either in code (HTML, CSS, JS), Invision, Framer Studio or other tools depending on the job.</p>
+ </div>
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>design-64px-outline_wand-99</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-558.000000, -961.000000)" id="Group-17">
+ <g transform="translate(560.000000, 957.000000)">
+ <g id="Group-14">
+ <g id="design-64px-outline_wand-99" transform="translate(0.000000, 5.000000)">
+ <g id="Group">
+ <path d="M32,6.50847458 C30.4379661,4.94644068 27.0535593,4.94644068 25.4915254,6.50847458 C27.0535593,4.94644068 27.0535593,1.5620339 25.4915254,0 C27.0535593,1.5620339 30.4379661,1.5620339 32,0 C30.4379661,1.5620339 30.4379661,4.94644068 32,6.50847458 Z" id="Shape" stroke="#00CEDB" stroke-width="2"></path>
+ <path d="M30.9152542,22.779661 C29.8738983,21.7383051 27.6176271,21.7383051 26.5762712,22.779661 C27.6176271,21.7383051 27.6176271,19.4820339 26.5762712,18.440678 C27.6176271,19.4820339 29.8738983,19.4820339 30.9152542,18.440678 C29.8738983,19.4820339 29.8738983,21.7383051 30.9152542,22.779661 Z" id="Shape" stroke="#00CEDB" stroke-width="2"></path>
+ <path d="M13.559322,5.42372881 C12.5179661,4.38237288 10.2616949,4.38237288 9.22033898,5.42372881 C10.2616949,4.38237288 10.2616949,2.12610169 9.22033898,1.08474576 C10.2616949,2.12610169 12.5179661,2.12610169 13.559322,1.08474576 C12.5179661,2.12610169 12.5179661,4.38237288 13.559322,5.42372881 Z" id="Shape" stroke="#00CEDB" stroke-width="2"></path>
+ <path d="M15.1864407,11.9322034 L20.0677966,16.8135593" id="Shape" stroke="#505050" stroke-width="2"></path>
+ <rect id="Rectangle-path" stroke="#505050" stroke-width="1.99998082" transform="translate(11.931795, 20.067934) rotate(-45.000000) translate(-11.931795, -20.067934) " x="-1.49099184" y="16.6163062" width="26.8455731" height="6.90325583"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Iteration</h3>
+ </figure>
+ <p>I perform research through series of usability tests and A/B testing, evaluate design with analytics, and iterate.</p>
+ </div>
+ <div class="process-item">
+ <figure class="item-header">
+ <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+ <title>arrows-64px-outline-1_refresh-69</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-1029.000000, -963.000000)" id="Group-16" stroke-width="2">
+ <g transform="translate(1030.000000, 957.000000)">
+ <g id="Group-15">
+ <g id="arrows-64px-outline-1_refresh-69" transform="translate(0.000000, 7.000000)">
+ <g id="Group">
+ <path d="M0,16 C0,7.16342857 7.16342857,0 16,0 C22.4485714,0 28.0737143,3.984 30.6062857,9.48" id="Shape" stroke="#505050"></path>
+ <polyline id="Shape" stroke="#505050" points="31.8765714 0 30.6062857 9.48 21.1268571 8.20971429"></polyline>
+ <path d="M32,16 C32,24.8365714 24.8365714,32 16,32 C9.55142857,32 3.92628571,28.016 1.39371429,22.52" id="Shape" stroke="#00CEDB"></path>
+ <polyline id="Shape" stroke="#00CEDB" points="0.123428571 32 1.39371429 22.52 10.8731429 23.7902857"></polyline>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h3>Repeat</h3>
+ </figure>
+ <p>I redo the entire process and use new insights to further bolster the product’s user experience.</p>
+ </div>
+ </div>
+ </div>
+</section> \ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
new file mode 100644
index 0000000..8e10c18
--- /dev/null
+++ b/layouts/partials/scripts.html
@@ -0,0 +1,18 @@
+<script src="{{ .Site.BaseURL }}js/jquery-1.js"></script>
+<script src="{{ .Site.BaseURL }}js/stickUp.js"></script>
+<script src="{{ .Site.BaseURL }}js/scrollIt.js" type="text/javascript"></script>
+<script type="text/javascript">
+ jQuery(function($) {
+ $(document).ready( function() {
+ $('.main-navigation').stickUp({
+
+ });
+ });
+ });
+ $(function(){
+ $.scrollIt({
+ topOffset: -70, // offste (in px) for fixed top navigation
+ easing: 'ease-in-out'
+ });
+ });
+</script> \ No newline at end of file
diff --git a/static/css/final.css b/static/css/final.css
index d21607a..5b596cb 100644
--- a/static/css/final.css
+++ b/static/css/final.css
@@ -1,9 +1,10 @@
* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
--webkit-font-smoothing: antialiased;
--moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
+
body {
font-size: 16px;
font-family: Roboto;
@@ -26,7 +27,6 @@ a:hover {
}
footer {
-
padding: 30px 30px 30px 30px;
max-width: 1000px;
margin: 0 auto;
@@ -40,8 +40,8 @@ footer {
width: 100%;
background: white;
height: 68px;
- padding: 0px;
- margin: 0px;
+ padding: 0;
+ margin: 0;
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;
display: -webkit-box;
@@ -57,18 +57,17 @@ footer {
.sub-navigation {
max-width: 445px;
-height: inherit;
-display: -webkit-box;
-display: -ms-flexbox;
-display: flex;
-
+ height: inherit;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
.main-navigation h5 {
position: absolute;
left: 90px;
top: 3px;
-color: #777777;
+ color: #777777;
}
@media all and (max-width: 400px) {
@@ -77,6 +76,7 @@ color: #777777;
font-size: 12px;
}
}
+
.main-navigation-link {
color: #686868;
padding: 15px;
@@ -92,9 +92,11 @@ color: #777777;
justify-content: center;
border-left: 1px solid #F0F0F0;
}
+
.icons a:first-child {
- padding: 4px 4px 4px 0px
+ padding: 4px 4px 4px 0;
}
+
.icons a {
padding: 4px;
}
@@ -104,16 +106,12 @@ color: #777777;
font-size: 13px;
padding: 15px;
}
-
#about {
display: none;
}
-
#process-link {
display: none !important;
}
-
-
}
.logo:hover, .main-navigation-link:hover {
@@ -132,6 +130,7 @@ section {
padding-left: 30px;
padding-right: 30px;
}
+
.hero {
display: -webkit-box;
display: -ms-flexbox;
@@ -190,16 +189,20 @@ section {
.hero-right p {
/* color: #929292; */
-font-size: 16px;
-color: #777777;
-letter-spacing: 0;
-/* line-height: 25px; */
-line-height: 1.8em;
+ font-size: 16px;
+ color: #777777;
+ letter-spacing: 0;
+ /* line-height: 25px; */
+ line-height: 1.8em;
}
.hero-right em {
font-style: normal !important;
+}
+.hero-right p a {
+ color: #574cdd;
+ text-decoration: underline;
}
.icons {
@@ -216,30 +219,28 @@ line-height: 1.8em;
/* Rectangle 3: */
display: inline-block;
margin-top: 20px;
-background: #5A54AF;
-/* Download Resume: */
-font-family: Roboto;
-font-size: 15px;
-/*padding: 15px 50px;*/
-color: #C3D5FF;
-padding: 18px 0px;
-width: 296px;
-text-align: center;
-letter-spacing: 0;
-border-radius: 2px;
+ background: #5A54AF;
+ /* Download Resume: */
+ font-family: Roboto;
+ font-size: 15px;
+ /*padding: 15px 50px;*/
+ color: #C3D5FF;
+ padding: 18px 0;
+ width: 296px;
+ text-align: center;
+ letter-spacing: 0;
+ border-radius: 2px;
}
-
-
.title {
/* My Process: */
-font-family: Roboto;
-font-weight: bold;
-margin: 0px;
-font-size: 44px;
-color: #000000;
-letter-spacing: 0;
-line-height: 0.4em;
+ font-family: Roboto;
+ font-weight: bold;
+ margin: 0;
+ font-size: 44px;
+ color: #000000;
+ letter-spacing: 0;
+ line-height: 0.4em;
}
.process-item {
@@ -255,12 +256,13 @@ line-height: 0.4em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
--ms-flex-wrap: wrap;
- flex-wrap: wrap;
--webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
}
+
.item-header {
display: -webkit-box;
display: -ms-flexbox;
@@ -271,24 +273,25 @@ line-height: 0.4em;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
- margin: 0px;
- height: 35px;
+ margin: 0;
+ height: 35px;
}
+
.process-item p {
/* I collaborate with s: */
-font-size: 16px;
-color: #777777;
-letter-spacing: 0;
-line-height: 1.8em;
+ font-size: 16px;
+ color: #777777;
+ letter-spacing: 0;
+ line-height: 1.8em;
}
+
.process-item h3 {
/* Discover: */
-font-size: 28px;
-color: #5A54AF;
-letter-spacing: 0;
+ font-size: 28px;
+ color: #5A54AF;
+ letter-spacing: 0;
}
-
.case-studies-wrapper {
display: -webkit-box;
display: -ms-flexbox;
@@ -311,7 +314,7 @@ letter-spacing: 0;
.case-study-item h4 {
font-size: 26px;
font-weight: 300;
- margin: 0px;
+ margin: 0;
line-height: 2.4em;
}
@@ -319,22 +322,22 @@ letter-spacing: 0;
font-size: 13px;
font-weight: 700;
color: #5A5A5A;
- margin: 0px;
+ margin: 0;
line-height: 0.3em;
}
.case-study-item p {
font-size: 16px;
- color: #777777;
- letter-spacing: 0;
- line-height: 1.8em;
+ color: #777777;
+ letter-spacing: 0;
+ line-height: 1.8em;
}
.read-more {
display: inline-block;
width: 100%;
border: solid 2px #E1E1E1;
- padding: 18px 0px;
+ padding: 18px 0;
text-align: center;
color: #574CDD;
font-weight: 500;
@@ -350,7 +353,6 @@ letter-spacing: 0;
margin-top: 30px;
}
-
.results-content {
max-width: 900px;
color: black;
@@ -373,22 +375,24 @@ letter-spacing: 0;
.results-content h2 {
font-size: 25px;
-line-height: 1em;
-font-weight: 300;
-margin: 0px;
-margin-top: 0.3em;
+ line-height: 1em;
+ font-weight: 300;
+ margin: 0;
+ margin-top: 0.3em;
}
.results-content h3 {
- margin: 0px;
-margin-top: 0.4em;
-padding-bottom: 35px;
+ margin: 0;
+ margin-top: 0.4em;
+ padding-bottom: 35px;
}
+
.results-content hr {
width: 30px;
border: 3px solid #5A54AF;
}
+
.main-case-study img {
max-width: 100%;
}
@@ -397,37 +401,40 @@ padding-bottom: 35px;
line-height: 1em;
margin-top: 20px;
}
+
.main-case-study .subtitle {
/* Mobile App Design: */
-font-family: Roboto;
-font-weight: bold;
-font-size: 22px;
-color: #5A54AF;
-letter-spacing: 0;
+ font-family: Roboto;
+ font-weight: bold;
+ font-size: 22px;
+ color: #5A54AF;
+ letter-spacing: 0;
}
.main-case-study .summary {
/* The objective of thi: */
-font-family: Roboto;
-font-weight: 300;
-font-size: 24px;
-color: #000000;
-letter-spacing: 0;
-line-height: 39px;
+ font-family: Roboto;
+ font-weight: 300;
+ font-size: 24px;
+ color: #000000;
+ letter-spacing: 0;
+ line-height: 39px;
}
+
.case-study-item img {
max-width: 100%;
}
.case-details {
margin: 0;
-padding: 0;
-display: flex;
-max-width: 700px;
-list-style-type: none;
-justify-content: space-between;
-flex-wrap: wrap;
+ padding: 0;
+ display: flex;
+ max-width: 700px;
+ list-style-type: none;
+ justify-content: space-between;
+ flex-wrap: wrap;
}
+
.case-links {
margin-top: 26px;
padding-bottom: 30px;
@@ -435,23 +442,22 @@ flex-wrap: wrap;
.link-div {
display: inline-block;
- padding: 15px 15px 15px 0px;;
+ padding: 15px 15px 15px 0;
}
.case-links svg {
position: relative;
-top: 2.9px;
-padding-right: 1.5em;
+ top: 2.9px;
+ padding-right: 1.5em;
}
-.case-detail-link {
+.case-detail-link {
padding: 15px 30px;
-/* border: 1px solid #fafafa; */
-color: #593eda;
-border-radius: 2px;
-background: #f1f1f1;
-margin-right: 1em;
-
+ /* border: 1px solid #fafafa; */
+ color: #593eda;
+ border-radius: 2px;
+ background: #f1f1f1;
+ margin-right: 1em;
}
@media all and (max-width: 981px) {
@@ -467,7 +473,6 @@ margin-right: 1em;
@media all and (max-width: 842px) {
.link-div {
display: block;
-
}
.case-detail-link {
display: block;
@@ -475,7 +480,6 @@ margin-right: 1em;
padding:25px;
text-align: center;
}
-
}
.content-case-study {
@@ -484,15 +488,13 @@ margin-right: 1em;
margin: 0 auto;
}
-
-
.content-case-study p {
/* Each member of our t: */
-font-family: Roboto;
-font-size: 19px;
-color: #676767;
-letter-spacing: 0;
-line-height: 30px;
+ font-family: Roboto;
+ font-size: 19px;
+ color: #676767;
+ letter-spacing: 0;
+ line-height: 30px;
}
.content-case-study img {
@@ -501,24 +503,23 @@ line-height: 30px;
}
.content-case-study a {
- color: #574cdd
- ; text-decoration: underline;
+ color: #574cdd;
+ text-decoration: underline;
}
.content-case-study h1 {
- margin: 0px;
-margin-top: 2.4em;
+ margin: 0;
+ margin-top: 2.4em;
}
+
@media all and (max-width: 513px) {
.case-details {
justify-content: flex-start;
}
-
.download-resume {
display: block;
width: 100%;
}
-
.case-details-item {
padding-right: 25px !important;
}
@@ -531,6 +532,7 @@ margin-top: 2.4em;
.case-details-item strong {
font-weight: bold;
}
+
.case-details-item p {
line-height: 1.8em;
font-size: 16px;
@@ -541,9 +543,8 @@ margin-top: 2.4em;
max-width: 48%;
margin-top: 40px;
}
-
.case-studies-wrapper {
- margin-top: 0px;
+ margin-top: 0;
}
}
@@ -552,7 +553,6 @@ margin-top: 2.4em;
width: 100%;
margin-top: 30px;
}
-
.process-item {
max-width: 45%;
}
@@ -569,11 +569,9 @@ margin-top: 2.4em;
.hi, .title {
font-size: 40px;
}
-
-.process-item h3 {
- font-size: 24px;
-}
-
+ .process-item h3 {
+ font-size: 24px;
+ }
.subtitle {
font-size: 24px;
}
@@ -581,7 +579,6 @@ margin-top: 2.4em;
padding-top: 60px !important;
padding-bottom: 60px !important;
}
-
#scroll-element {
padding-top: 100px !important;
}
diff --git a/static/img/dp.jpg b/static/img/avatar.jpg
index b97255d..b97255d 100644
--- a/static/img/dp.jpg
+++ b/static/img/avatar.jpg
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-04 10:13:15 +0300