premier commit

This commit is contained in:
root 2021-12-13 15:29:38 +01:00
commit 62f0e4bee1
65 changed files with 2976 additions and 0 deletions

6
archetypes/default.md Normal file
View file

@ -0,0 +1,6 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

4
config.toml Normal file
View file

@ -0,0 +1,4 @@
baseURL = "https://demo.uicard.io/hugo-uilite-free/"
languageCode = "en-us"
title = "Valentina"
theme = "hugo-uilite"

0
content/.gitkeep Normal file
View file

5
data/config.json Normal file
View file

@ -0,0 +1,5 @@
{
"author" : "Arvind Singh",
"email" : "youremailhere@gmail.com",
"formspree" : "https://your-form-endpoint-goes-here"
}

16
data/experience.json Normal file
View file

@ -0,0 +1,16 @@
{
"title" : "Experience",
"experience" : [
{
"timeperiod" : "May 2017 - Nov 2017",
"company" : "Uber",
"website": "https://www.uber.com",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
},
{
"timeperiod" : "Nov 2017 - Present",
"company" : "Google",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
}
]
}

15
data/services.json Normal file
View file

@ -0,0 +1,15 @@
{
"title" : "Services",
"services" : [
{
"icon" : "pencil-ruler",
"title" : "Logo Design",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
},
{
"icon" : "pen-nib",
"title" : "Graphics Design",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
}
]
}

6
data/sidebar.json Normal file
View file

@ -0,0 +1,6 @@
{
"title" : "hey world, i'm",
"highlightedText" : "valentina",
"description" : "A graphics designer, based in Germany.",
"displayPicture" : "sim.jpg"
}

9
data/skills.json Normal file
View file

@ -0,0 +1,9 @@
{
"title" : "Skills",
"skills" : {
"Sketch" : "90",
"Adobe XD" : "80",
"Illustrator" : "65",
"Photoshop" : "97"
}
}

6
data/social.json Normal file
View file

@ -0,0 +1,6 @@
{
"facebook" : "https://facebook.com/<yourusername>",
"instagram" : "https://instagram.com/<yourusername>",
"dribbble" : "https://dribbble.com/<yourusername>",
"behance" : "https://behnace.com/<yourusername>"
}

3
data/socialfas.json Normal file
View file

@ -0,0 +1,3 @@
{
"envelope" : "mailto:<youremail>@gmail.com"
}

1
layouts/404.html Normal file
View file

@ -0,0 +1 @@
<h1>simple 404 error page</h1>

20
layouts/index.html Normal file
View file

@ -0,0 +1,20 @@
{{ partial "header.html" . }}
{{ partial "sidebar.html" . }}
<div class="main-content">
{{ if .Site.Data.skills }}{{ partial "skills.html" . }}{{ end }}
{{ if .Site.Data.experience }}{{ partial "experience.html" . }}{{ end }}
{{ if .Site.Data.services }}{{ partial "services.html" . }}{{ end }}
</div>
<div style="z-index: 4; position: relative;">
{{ if gt (len (where .Data.Pages "Type" "blog")) 0 }}{{ partial "blog.html" . }}{{ end }}
{{ if gt (len (where .Data.Pages "Type" "work")) 0 }}{{ partial "work.html" . }}{{ end }}
</div>
<div class="main-content">
{{ partial "contact.html" . }}
</div>
{{ partial "footer-scripts.html" . }}

View file

@ -0,0 +1,30 @@
{{ $config := .Site.Data.config }}
<section id="contact" class="bg-light d-flex align-items-center" style="height: 100vh;">
<div class="container">
<h2 class="heading mb-3">Contact</h2>
<div class="text-success my-3">
{{ $config.message }}
</div>
<form action="{{ $config.formspree }}" method="post">
<div class="form-row">
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Email</label>
<input type="email" class="form-control" name="_replyto" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Message" name="message" class="form-control" rows="4"></textarea>
</div>
<button type="submit" class="btn btn-dark">Submit</button>
</form>
</div>
</section>

View file

@ -0,0 +1,26 @@
{{ $experience := .Site.Data.experience }}
<section id="experience" class="green">
<h2 class="heading">{{ $experience.title }}</h2>
<div id="timeline">
{{ range $index, $element := $experience.experience }}
<div class="timeline-item clearfix">
<div class="timeline-icon"></div>
<div class="timeline-content {{ if eq (mod $index 2) 0 }} right {{ end }}">
<span class="date">{{ $element.timeperiod }}</span>
<h6 class="h3 my-2">{{ $element.company }}</h6>
{{ $website := $element.website }}
{{ if $website }}
<a target="_blank" href="{{ $website }}">
<i class="fas fa-link"></i>
{{ $website }}
</a>
{{ end }}
<p class="">{{ $element.description }}</p>
</div>
</div>
{{ end }}
</div>
</section>

View file

@ -0,0 +1,10 @@
<script src="https://blog.uicard.io/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
<!-- some scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ .Site.BaseURL }}js/main.js"></script>
</html>

View file

@ -0,0 +1,5 @@
{{ $footer := .Site.Data.footer }}
<footer class="text-center text-muted py-4">
{{ $footer.text }}
</footer>

View file

@ -0,0 +1,41 @@
{{ $config := .Site.Data.config }}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ if .IsHome }}
{{ .Site.Title }}
{{ else if .Params.heading }}
{{ .Params.heading }}
{{ else }}
{{ .Title }} | {{ .Site.Title }}
{{ end }}
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Including the bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Social Icon fonts -->
<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">
<link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/styles.css">
<!-- Including google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:800" rel="stylesheet">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.css">
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Meta tags -->
<meta name="author" content="{{ $config.author }}">
<meta name="theme-color" content="#000000">
{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" />
{{ end -}}
{{ partial "seo_schema.html" . }}
</head>
<body class="clearfix">

View file

@ -0,0 +1,57 @@
<!-- Schema.org for Google -->
<meta itemprop="name" content="{{ .Title }}">
<meta itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="{{ .Title }}">
<meta name="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<meta name="og:type" content="article">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<!-- Open Graph - Article -->
<meta name="article:author" content="{{ .Site.Data.config.author }}">
<!-- JSON-LD -->
{{ if .IsHome }}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "{{ .Permalink }}",
"name": "{{ .Site.Title }}",
"author": {
"@type": "Person",
"name": "{{ .Site.Data.config.author }}"
},
"description": "{{ .Site.Data.config.description }}",
}
</script>
{{ end }}
{{ if .IsPage }}
<script type="application/ld+json">
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ .Site.BaseURL }}"
},
"articleSection" : "{{ .Section }}",
"name" : "{{ .Title }}",
"headline" : "{{ .Title }}",
"description" : "{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}",
"inLanguage" : "{{ .Site.LanguageCode }}",
"author" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"creator" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"publisher": "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"accountablePerson" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"copyrightHolder" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"copyrightYear" : "{{ .Date.Format "2006" }}",
"datePublished": "{{ .Date }}",
"dateModified" : "{{ .Date }}",
"url" : "{{ .Permalink }}",
"wordCount" : "{{ .WordCount }}",
"keywords" : [ {{ if isset .Params "tags" }}{{ range .Params.tags }}"{{ . }}",{{ end }}{{ end }} {{with .Site.Title}}"{{ .}}"{{ end }}]
}
</script>
{{ end }}

View file

@ -0,0 +1,20 @@
{{ $services := .Site.Data.services }}
<section class="blue">
<h2 class="heading">{{ $services.title }}</h2>
<div class="row justify-content-md-center text-center">
{{ range $index, $element := $services.services }}
<div class="col-12 col-lg-6 col-md-6 mb-3">
<div class="card p-4">
<i class="mt-3 fa fa-{{ $element.icon }} fa-3x"></i>
<h5 class="mt-4">{{ $element.title }}</h5>
<p class="text-muted">{{ $element.description }}</p>
</div>
</div>
{{ end }}
</div>
</section>

View file

@ -0,0 +1,33 @@
{{ $sidebar := .Site.Data.sidebar }}
{{ $social := .Site.Data.social }}
{{ $socialfas := .Site.Data.socialfas}}
<section id="sidebar" class="sidebar d-flex align-items-center p-5">
<div class="main-info">
<img src="{{.Site.BaseURL}}images/{{ $sidebar.displayPicture }}" class="rounded-circle mb-3" width="160px">
<h1 class="heading">{{ $sidebar.title }} <span class="highlight">{{ $sidebar.highlightedText }}</span></h1>
<p class="text-muted">{{ $sidebar.description }}</p>
<div class="social my-4">
{{ range $key, $value := $social }}
<a target="_blank" href="{{ $value }}" rel="me">
<i class="fab fa-{{ $key }}"></i>
</a>
{{ end }}
{{ range $key, $value := $socialfas }}
<a target="_blank" href="{{ $value }}">
<i class="fas fa-{{ $key }}"></i>
</a>
{{ end }}
</div>
<a href="#contact" class="btn btn-dark btn-lg">Contact</a>
</div>
</section>

View file

@ -0,0 +1,15 @@
{{ $skills := .Site.Data.skills }}
<section id="skills" class="aqua text-light">
<h2 class="heading">{{ $skills.title }}</h2>
{{ range $key, $value := $skills.skills }}
<div class="skill">
<span class="h6">{{ $key }}</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: {{ $value }}%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{{ end }}
</section>

1
public/404.html Normal file
View file

@ -0,0 +1 @@
<h1>simple 404 error page</h1>

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Categories on Valentina</title>
<link>https://demo.uicard.io/hugo-uilite-free/categories/</link>
<description>Recent content in Categories on Valentina</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language><atom:link href="https://demo.uicard.io/hugo-uilite-free/categories/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

1
public/css/highlight.css Normal file
View file

@ -0,0 +1 @@
.hljs-comment,.hljs-quote{color:#8e908c}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c82829}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#f5871f}.hljs-attribute{color:#eab700}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#718c00}.hljs-title,.hljs-section{color:#4271ae}.hljs-keyword,.hljs-selector-tag{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

440
public/css/styles.css Normal file
View file

@ -0,0 +1,440 @@
html {
overflow-x: hidden;
overflow-y: scroll;
}
a:hover {
text-decoration: none;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
right: 552px;
bottom: 0px;
z-index: 1;
width: 40%;
height: 100%;
}
.sidebar .main-info * {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
}
.sidebar .main-info *.bs {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.main-content {
position: relative;
overflow: visible;
width: 60%;
max-width: 1200px;
margin-left: 40%;
float: none;
clear: none;
}
.main-content:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
background-color: #fff;
}
.main-content.active:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
background-color: #fff;
}
article {
font-size: 18px !important;
line-height: 1.8rem;
}
article p {
color: rgba(0, 0, 0, 0.8);
}
article img {
max-width: 100%;
}
article code {
background-color: #fbfbfb !important;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
article mark {
background-color: white;
color: #c80000;
}
.heading,
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800;
text-transform: uppercase;
}
.heading {
font-size: 38px;
}
.highlight {
background-color: #ededed;
padding: 4px 8px;
/*display: inline-block;*/
}
.form-control {
border: none;
background-color: #e8ebef !important;
}
.primaryMenu {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
position: absolute;
margin-left: 35px;
}
.primaryMenu.active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.secondaryMenu {
position: absolute;
widows: 100%;
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
margin-left: 25px;
padding-left: 0;
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.secondaryMenu.active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.btn {
border-radius: 6px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn.btn-primary {
background-color: #31E7B6;
border-color: #31E7B6;
}
.btn.btn-primary:hover {
background-color: #32d2a7;
border-color: #32d2a7;
}
.btn.btn-primary:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
background-color: #32d2a7;
border-color: #32d2a7;
}
.btn-dark-faded {
font-weight: 300;
font-family: 'Montserrat', sans-serif !important;
/*text-transform: uppercase;*/
background-color: rgba(0, 0, 0, 0.07);
color: black;
}
.social:hover a {
color: rgba(0, 0, 0, 0.4);
}
.social a {
color: black;
font-size: 28px;
margin-right: 12px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.social a:hover {
color: black;
}
.social a:hover i {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
section {
padding: 10%;
}
section .heading {
margin-bottom: 30px;
}
section.yellow {
background-color: #ffd061;
color: #000 !important;
}
section.yellow .progress .bg-blue {
background-color: #c19c43;
}
section.voilet {
background-color: #4768FD;
}
section.blue {
background-color: #cadfdf;
}
section.orange {
color: #fff;
background-color: #fb7833;
}
section.green {
background-color: #aaffa7;
}
section.skin {
background-color: #fdead2;
}
section.aqua {
background-color: #00fefe;
color: #000 !important;
}
section.pink {
background-color: #fff1f1;
}
.progress {
height: 0.6rem;
background-color: #fff;
}
.progress .bg-blue {
background-color: #2e96a5;
}
.card {
border-radius: 6px;
border: none;
}
#timeline {
width: 100%;
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#timeline:before {
content: "";
width: 3px;
height: 100%;
background: #000;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
top: 0;
position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}
#timeline .timeline-item {
margin-bottom: 50px;
position: relative;
text-align: right;
}
#timeline .timeline-item .timeline-icon {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -10px;
border-radius: 50%;
}
#timeline .timeline-item .timeline-content {
width: 45%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline .timeline-item .timeline-content p {
color: rgba(0, 0, 0, 0.7);
}
#timeline .timeline-item .timeline-content .date {
display: inline-block;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 3px;
}
#timeline .timeline-item .timeline-content.right {
float: right;
text-align: left;
}
.pagination .page-item.active .page-link {
background-color: black;
border-color: black !important;
color: #fff !important;
}
.pagination .page-link {
border: none;
color: #000 !important;
}
.skill {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.sidebar {
position: static;
width: 100%;
padding-left: 65px;
}
.main-content {
width: 100%;
margin-left: 0%;
}
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
}
#timeline:before {
left: 0;
}
#timeline .timeline-item .timeline-content {
width: 90%;
float: right;
text-align: left;
}
#timeline .timeline-item .timeline-content:before,
#timeline .timeline-item .timeline-content .right:before {
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
#timeline .timeline-item .timeline-icon {
left: 0;
}
}
.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
width: 24px;
height: 4px;
}
.hamburger-menu {
position: relative;
-webkit-transform: translateY(8px);
transform: translateY(8px);
background: black;
-webkit-transition: all 0ms 300ms;
transition: all 0ms 300ms;
}
.hamburger-menu.animate {
background: rgba(255, 255, 255, 0);
}
.hamburger-menu:before {
content: "";
position: absolute;
left: 0;
bottom: 8px;
background: black;
-webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
content: "";
position: absolute;
left: 0;
top: 8px;
background: black;
-webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:before {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
/*# sourceMappingURL=styles.css.map */

File diff suppressed because one or more lines are too long

448
public/css/styles.scss Normal file
View file

@ -0,0 +1,448 @@
*{
// outline: 1px solid red;
}
html{
overflow-x: hidden;
overflow-y: scroll;
}
a{
&:hover{
text-decoration: none;
}
}
.sidebar{
position: fixed;
left: 0px;
top: 0px;
right: 552px;
bottom: 0px;
z-index: 1;
width: 40%;
height: 100%;
.main-info *{
transition: all 0.3s ease;
opacity: 0;
transform: translateX(-40px);
&.bs{
transform: translateX(0);
opacity: 1;
}
}
}
.main-content{
position: relative;
overflow: visible;
width: 60%;
max-width: 1200px;
margin-left: 40%;
float: none;
clear: none;
&:after{
position: absolute;
content: '';
top: 0; bottom: 0;
left: 0; right: 0;
transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);;
background-color: #fff;
}
&.active{
&:after{
position: absolute;
content: '';
top: 0; bottom: 0;
left: 0; right: 0;
transform: translateX(100%);
background-color: #fff;
}
}
}
article{
font-size: 18px !important;
line-height: 1.8rem;
p{
color: rgba(0,0,0,0.8);
}
img{
max-width: 100%;
}
code{
background-color: #fbfbfb !important;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
mark{
background-color: white;
color: rgb(200,0,0);
}
}
.heading,
h1,h2,h3,h4,h5,h6{
font-family: 'Montserrat', sans-serif !important;
font-weight: 800;
text-transform: uppercase;
}
.heading{
font-size: 38px;
}
.highlight{
background-color: #ededed;
padding: 4px 8px;
/*display: inline-block;*/
}
.form-control{
border: none;
background-color: #e8ebef !important;
}
.primaryMenu{
// margin-top: -90px;
transform: translateY(-90px);
transition: transform 0.3s ease;
position: absolute;
margin-left: 35px;
&.active{
transform: translateY(0px);
}
}
.secondaryMenu{
position: absolute;
widows: 100%;
// margin-top: -90px;
transform: translateY(-90px);
margin-left: 25px;
padding-left: 0;
z-index: 2;
transition: transform 0.3s ease;
&.active{
// margin-top: 0px;
transform: translateY(0px);
}
}
// styles for buttons
.btn{
border-radius: 6px;
transition: all 0.3s ease;
&.btn-primary{
background-color : #31E7B6;
border-color: #31E7B6;
&:hover{
background-color : #32d2a7;
border-color: #32d2a7;
}
&:active{
transform: scale(0.95);
background-color : #32d2a7;
border-color: #32d2a7;
}
}
}
.btn-dark-faded{
font-weight: 300;
font-family: 'Montserrat', sans-serif !important;
/*text-transform: uppercase;*/
background-color: rgba(0,0,0,0.07);
color: black;
}
// Styles for social icons
.social{
&:hover{
a{
color: rgba(0,0,0,0.4);
}
}
a{
color: rgba(0,0,0,1);
font-size: 28px;
margin-right: 12px;
transition: all 0.3s ease;
&:hover{
color: rgba(0,0,0,1);
i{
transform: scale(1.3);
}
}
}
}
section{
padding: 10%;
.heading{
margin-bottom: 30px;
}
&.yellow{
background-color: #ffd061;
color: #000 !important;
.progress .bg-blue{
background-color: #c19c43;
}
}
&.voilet{
background-color: #4768FD;
}
&.blue{
background-color: #cadfdf;
}
&.orange{
color: #fff;
background-color: #fb7833;
}
&.green{
background-color: #aaffa7;
}
&.skin{
background-color: #fdead2;
}
&.aqua{
background-color: #00fefe;
color: #000 !important;
}
&.pink{
background-color: #fff1f1;
}
}
// styles for progress bar
.progress{
height: 0.6rem;
background-color: #fff;
.bg-blue{
background-color: #2e96a5;
}
}
.card{
border-radius: 6px;
border: none;
}
// styles for timeline
#timeline {
width: 100%;
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
&:before {
content: "";
width: 3px;
height: 100%;
background: #000;
left: 50%;
transform: translate(-50%);
top: 0;
position: absolute;
}
&:after {
content: "";
clear: both;
display: table;
width: 100%;
}
.timeline-item {
margin-bottom: 50px;
position: relative;
text-align: right;
.timeline-icon {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.timeline-content {
width: 45%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
p {
color: rgba(0,0,0,0.7);
}
.date{
display: inline-block;
background-color: rgba(0,0,0,0.1);
padding: 10px;
border-radius: 3px;
}
&.right {
float: right;
text-align: left;
}
}
}
}
.pagination{
.page-item.active{
.page-link{
background-color: black;
border-color: black !important;
color: #fff !important;
}
}
.page-link{
border: none;
color: #000 !important;
}
}
.skill{
margin-bottom: 20px;
}
@media (max-width: 767px){
.sidebar {
position: static;
width: 100%;
padding-left: 65px;
}
.main-content{
width: 100%;
margin-left: 0%;
}
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
&:before {
left: 0;
}
.timeline-item{
.timeline-content {
width: 90%;
float: right;
text-align: left;
&:before,
.right:before{
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
}
.timeline-icon {
left: 0;
}
}
}
}
$bar-width: 24px;
$bar-height: 4px;
$bar-spacing: 8px;
.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
width: $bar-width;
height: $bar-height;
}
.hamburger-menu {
position: relative;
transform: translateY($bar-spacing);
background: rgba(0, 0, 0, 1);
transition: all 0ms 300ms;
&.animate {
background: rgba(255, 255, 255, 0);
}
}
.hamburger-menu:before {
content: "";
position: absolute;
left: 0;
bottom: $bar-spacing;
background: rgba(0, 0, 0, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
content: "";
position: absolute;
left: 0;
top: $bar-spacing;
background: rgba(0, 0, 0, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.hamburger-menu.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
}

BIN
public/images/sim.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

273
public/index.html Normal file
View file

@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="generator" content="Hugo 0.82.0" />
<title>
Valentina
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">
<link rel="stylesheet" type="text/css" href="https://demo.uicard.io/hugo-uilite-free/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:800" rel="stylesheet">
<link rel="stylesheet" href="https://demo.uicard.io/hugo-uilite-free/css/highlight.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<meta name="author" content="Arvind Singh">
<meta name="theme-color" content="#000000">
<link rel="alternate" type="application/rss&#43;xml" href="https://demo.uicard.io/hugo-uilite-free/index.xml" />
<meta itemprop="name" content="Valentina">
<meta itemprop="description" content="">
<meta name="og:title" content="Valentina">
<meta name="og:description" content="">
<meta name="og:type" content="article">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Valentina">
<meta name="twitter:description" content="">
<meta name="article:author" content="Arvind Singh">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https:\/\/demo.uicard.io\/hugo-uilite-free\/",
"name": "Valentina",
"author": {
"@type": "Person",
"name": "Arvind Singh"
},
"description": "",
}
</script>
</head>
<body class="clearfix">
<section id="sidebar" class="sidebar d-flex align-items-center p-5">
<div class="main-info">
<img src="https://demo.uicard.io/hugo-uilite-free/images/sim.jpg" class="rounded-circle mb-3" width="160px">
<h1 class="heading">hey world, i&#39;m <span class="highlight">valentina</span></h1>
<p class="text-muted">A graphics designer, based in Germany.</p>
<div class="social my-4">
<a target="_blank" href="https://behnace.com/%3cyourusername%3e" rel="me">
<i class="fab fa-behance"></i>
</a>
<a target="_blank" href="https://dribbble.com/%3cyourusername%3e" rel="me">
<i class="fab fa-dribbble"></i>
</a>
<a target="_blank" href="https://facebook.com/%3cyourusername%3e" rel="me">
<i class="fab fa-facebook"></i>
</a>
<a target="_blank" href="https://instagram.com/%3cyourusername%3e" rel="me">
<i class="fab fa-instagram"></i>
</a>
<a target="_blank" href="mailto:%3cyouremail%3e@gmail.com">
<i class="fas fa-envelope"></i>
</a>
</div>
<a href="#contact" class="btn btn-dark btn-lg">Contact</a>
</div>
</section>
<div class="main-content">
<section id="skills" class="aqua text-light">
<h2 class="heading">Skills</h2>
<div class="skill">
<span class="h6">Adobe XD</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: 80%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill">
<span class="h6">Illustrator</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: 65%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill">
<span class="h6">Photoshop</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: 97%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill">
<span class="h6">Sketch</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: 90%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</section>
<section id="experience" class="green">
<h2 class="heading">Experience</h2>
<div id="timeline">
<div class="timeline-item clearfix">
<div class="timeline-icon"></div>
<div class="timeline-content right ">
<span class="date">May 2017 - Nov 2017</span>
<h6 class="h3 my-2">Uber</h6>
<a target="_blank" href="https://www.uber.com">
<i class="fas fa-link"></i>
https://www.uber.com
</a>
<p class="">Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. </p>
</div>
</div>
<div class="timeline-item clearfix">
<div class="timeline-icon"></div>
<div class="timeline-content ">
<span class="date">Nov 2017 - Present</span>
<h6 class="h3 my-2">Google</h6>
<p class="">Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. </p>
</div>
</div>
</div>
</section>
<section class="blue">
<h2 class="heading">Services</h2>
<div class="row justify-content-md-center text-center">
<div class="col-12 col-lg-6 col-md-6 mb-3">
<div class="card p-4">
<i class="mt-3 fa fa-pencil-ruler fa-3x"></i>
<h5 class="mt-4">Logo Design</h5>
<p class="text-muted">Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. </p>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-3">
<div class="card p-4">
<i class="mt-3 fa fa-pen-nib fa-3x"></i>
<h5 class="mt-4">Graphics Design</h5>
<p class="text-muted">Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. </p>
</div>
</div>
</div>
</section>
</div>
<div style="z-index: 4; position: relative;">
</div>
<div class="main-content">
<section id="contact" class="bg-light d-flex align-items-center" style="height: 100vh;">
<div class="container">
<h2 class="heading mb-3">Contact</h2>
<div class="text-success my-3">
</div>
<form action="https://your-form-endpoint-goes-here" method="post">
<div class="form-row">
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Email</label>
<input type="email" class="form-control" name="_replyto" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Message" name="message" class="form-control" rows="4"></textarea>
</div>
<button type="submit" class="btn btn-dark">Submit</button>
</form>
</div>
</section>
</div>
<script src="https://blog.uicard.io/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://demo.uicard.io/hugo-uilite-free/js/main.js"></script>
</html>

10
public/index.xml Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Valentina</title>
<link>https://demo.uicard.io/hugo-uilite-free/</link>
<description>Recent content on Valentina</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language><atom:link href="https://demo.uicard.io/hugo-uilite-free/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

69
public/js/main.js Normal file
View file

@ -0,0 +1,69 @@
/*
*=================================
* Hugo UILite Portfolio v0.8
*=================================
*
* Free version https://uicard.io/products/hugo-uilite
* Pro version https://uicard.io/products/hugo-uilite-pro
* Demo https://demo.uicard.io/hugo-uilite-portfolio-demo/
*
* Coded By UICardio
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*
*/
let menuBtn = $("#menuBar");
menuBtn.click(function() {
$('.hamburger-menu').toggleClass('animate');
if ($(".secondaryMenu").hasClass("active")) {
$(".secondaryMenu").removeClass("active");
setTimeout(function() {
$(".primaryMenu").addClass("active");
}, 400);
} else {
$(".primaryMenu").removeClass("active");
setTimeout(function() {
$(".secondaryMenu").addClass("active");
}, 350);
}
});
function scrollTo(target) {
const top = $(target).offset().top;
const duration = 500;
const changeHash = function() {
location.hash = target
};
$("html, body").animate({ scrollTop: top }, duration, changeHash);
}
$(document).ready(function() {
var elements = $(".sidebar > .main-info *");
console.log(elements);
for (let i = 0; i < elements.length; i++) {
setTimeout(function() {
$(elements[i].tagName).addClass("bs");
}, (400 * i) - 90 * i);
}
setTimeout(function() {
$(".main-content").addClass("active");
}, 1900);
$("#sidebar a.btn[href='#contact']").on("click", function (event) {
event.preventDefault();
scrollTo($.attr(this, "href"));
});
});

11
public/sitemap.xml Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://demo.uicard.io/hugo-uilite-free/categories/</loc>
</url><url>
<loc>https://demo.uicard.io/hugo-uilite-free/tags/</loc>
</url><url>
<loc>https://demo.uicard.io/hugo-uilite-free/</loc>
</url>
</urlset>

10
public/tags/index.xml Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Tags on Valentina</title>
<link>https://demo.uicard.io/hugo-uilite-free/tags/</link>
<description>Recent content in Tags on Valentina</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language><atom:link href="https://demo.uicard.io/hugo-uilite-free/tags/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

View file

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2018 UICardio
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View file

@ -0,0 +1,32 @@
# Hugo Uilite Portfolio theme
![Hugo UILite Portfolio](https://api.uicard.io/uploads/fbb72e1060675dc28fd8a6f02b0be9c4.jpg)
Hugo UILite portfolio theme is designed especially for designers and developers who need a good-looking portfolio website without much efforts. It includes all the components to showcase the skills and work.
### Free version includes
- Skills section
- Experience timeline
- Service section
- Contact Form
- Social links
- Good SEO
### Pro version also includes
- Blog
- Work/portfolio
- Disqus
- Documentation
- Support
### Useful Links
[Free Demo](https://demo.uicard.io/hugo-uilite-free/) | [Pro Demo](https://demo.uicard.io/hugo-uilite-portfolio-demo/) | [More Info](https://uicard.io/products/hugo-uilite-pro?utm_source=github)
### Contact via Formspree
- [Register](https://formspree.io/)
- [Create a Project and a Form](https://help.formspree.io/hc/en-us/articles/360053239754-Getting-started-with-projects)
- Add your **form endpoint** to `data/config.json`

View file

@ -0,0 +1,6 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

View file

@ -0,0 +1,4 @@
baseURL = "https://demo.uicard.io/hugo-uilite-free/"
languageCode = "en-us"
title = "Valentina"
theme = "hugo-uilite"

View file

@ -0,0 +1,5 @@
{
"author" : "Arvind Singh",
"email" : "youremailhere@gmail.com",
"formspree" : "https://your-form-endpoint-goes-here"
}

View file

@ -0,0 +1,16 @@
{
"title" : "Experience",
"experience" : [
{
"timeperiod" : "May 2017 - Nov 2017",
"company" : "Uber",
"website": "https://www.uber.com",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
},
{
"timeperiod" : "Nov 2017 - Present",
"company" : "Google",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
}
]
}

View file

@ -0,0 +1,15 @@
{
"title" : "Services",
"services" : [
{
"icon" : "pencil-ruler",
"title" : "Logo Design",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
},
{
"icon" : "pen-nib",
"title" : "Graphics Design",
"description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. "
}
]
}

View file

@ -0,0 +1,6 @@
{
"title" : "hey world, i'm",
"highlightedText" : "valentina",
"description" : "A graphics designer, based in Germany.",
"displayPicture" : "sim.jpg"
}

View file

@ -0,0 +1,9 @@
{
"title" : "Skills",
"skills" : {
"Sketch" : "90",
"Adobe XD" : "80",
"Illustrator" : "65",
"Photoshop" : "97"
}
}

View file

@ -0,0 +1,6 @@
{
"facebook" : "https://facebook.com/<yourusername>",
"instagram" : "https://instagram.com/<yourusername>",
"dribbble" : "https://dribbble.com/<yourusername>",
"behance" : "https://behnace.com/<yourusername>"
}

View file

@ -0,0 +1,3 @@
{
"envelope" : "mailto:<youremail>@gmail.com"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

View file

@ -0,0 +1 @@
<h1>simple 404 error page</h1>

View file

@ -0,0 +1,20 @@
{{ partial "header.html" . }}
{{ partial "sidebar.html" . }}
<div class="main-content">
{{ if .Site.Data.skills }}{{ partial "skills.html" . }}{{ end }}
{{ if .Site.Data.experience }}{{ partial "experience.html" . }}{{ end }}
{{ if .Site.Data.services }}{{ partial "services.html" . }}{{ end }}
</div>
<div style="z-index: 4; position: relative;">
{{ if gt (len (where .Data.Pages "Type" "blog")) 0 }}{{ partial "blog.html" . }}{{ end }}
{{ if gt (len (where .Data.Pages "Type" "work")) 0 }}{{ partial "work.html" . }}{{ end }}
</div>
<div class="main-content">
{{ partial "contact.html" . }}
</div>
{{ partial "footer-scripts.html" . }}

View file

@ -0,0 +1,30 @@
{{ $config := .Site.Data.config }}
<section id="contact" class="bg-light d-flex align-items-center" style="height: 100vh;">
<div class="container">
<h2 class="heading mb-3">Contact</h2>
<div class="text-success my-3">
{{ $config.message }}
</div>
<form action="{{ $config.formspree }}" method="post">
<div class="form-row">
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-6">
<label>Email</label>
<input type="email" class="form-control" name="_replyto" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Message" name="message" class="form-control" rows="4"></textarea>
</div>
<button type="submit" class="btn btn-dark">Submit</button>
</form>
</div>
</section>

View file

@ -0,0 +1,26 @@
{{ $experience := .Site.Data.experience }}
<section id="experience" class="green">
<h2 class="heading">{{ $experience.title }}</h2>
<div id="timeline">
{{ range $index, $element := $experience.experience }}
<div class="timeline-item clearfix">
<div class="timeline-icon"></div>
<div class="timeline-content {{ if eq (mod $index 2) 0 }} right {{ end }}">
<span class="date">{{ $element.timeperiod }}</span>
<h6 class="h3 my-2">{{ $element.company }}</h6>
{{ $website := $element.website }}
{{ if $website }}
<a target="_blank" href="{{ $website }}">
<i class="fas fa-link"></i>
{{ $website }}
</a>
{{ end }}
<p class="">{{ $element.description }}</p>
</div>
</div>
{{ end }}
</div>
</section>

View file

@ -0,0 +1,10 @@
<script src="https://blog.uicard.io/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
<!-- some scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ .Site.BaseURL }}js/main.js"></script>
</html>

View file

@ -0,0 +1,5 @@
{{ $footer := .Site.Data.footer }}
<footer class="text-center text-muted py-4">
{{ $footer.text }}
</footer>

View file

@ -0,0 +1,41 @@
{{ $config := .Site.Data.config }}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ if .IsHome }}
{{ .Site.Title }}
{{ else if .Params.heading }}
{{ .Params.heading }}
{{ else }}
{{ .Title }} | {{ .Site.Title }}
{{ end }}
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Including the bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Social Icon fonts -->
<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">
<link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/styles.css">
<!-- Including google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:800" rel="stylesheet">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.css">
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Meta tags -->
<meta name="author" content="{{ $config.author }}">
<meta name="theme-color" content="#000000">
{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" />
{{ end -}}
{{ partial "seo_schema.html" . }}
</head>
<body class="clearfix">

View file

@ -0,0 +1,57 @@
<!-- Schema.org for Google -->
<meta itemprop="name" content="{{ .Title }}">
<meta itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="{{ .Title }}">
<meta name="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<meta name="og:type" content="article">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}">
<!-- Open Graph - Article -->
<meta name="article:author" content="{{ .Site.Data.config.author }}">
<!-- JSON-LD -->
{{ if .IsHome }}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "{{ .Permalink }}",
"name": "{{ .Site.Title }}",
"author": {
"@type": "Person",
"name": "{{ .Site.Data.config.author }}"
},
"description": "{{ .Site.Data.config.description }}",
}
</script>
{{ end }}
{{ if .IsPage }}
<script type="application/ld+json">
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ .Site.BaseURL }}"
},
"articleSection" : "{{ .Section }}",
"name" : "{{ .Title }}",
"headline" : "{{ .Title }}",
"description" : "{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}",
"inLanguage" : "{{ .Site.LanguageCode }}",
"author" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"creator" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"publisher": "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"accountablePerson" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"copyrightHolder" : "{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}",
"copyrightYear" : "{{ .Date.Format "2006" }}",
"datePublished": "{{ .Date }}",
"dateModified" : "{{ .Date }}",
"url" : "{{ .Permalink }}",
"wordCount" : "{{ .WordCount }}",
"keywords" : [ {{ if isset .Params "tags" }}{{ range .Params.tags }}"{{ . }}",{{ end }}{{ end }} {{with .Site.Title}}"{{ .}}"{{ end }}]
}
</script>
{{ end }}

View file

@ -0,0 +1,20 @@
{{ $services := .Site.Data.services }}
<section class="blue">
<h2 class="heading">{{ $services.title }}</h2>
<div class="row justify-content-md-center text-center">
{{ range $index, $element := $services.services }}
<div class="col-12 col-lg-6 col-md-6 mb-3">
<div class="card p-4">
<i class="mt-3 fa fa-{{ $element.icon }} fa-3x"></i>
<h5 class="mt-4">{{ $element.title }}</h5>
<p class="text-muted">{{ $element.description }}</p>
</div>
</div>
{{ end }}
</div>
</section>

View file

@ -0,0 +1,33 @@
{{ $sidebar := .Site.Data.sidebar }}
{{ $social := .Site.Data.social }}
{{ $socialfas := .Site.Data.socialfas}}
<section id="sidebar" class="sidebar d-flex align-items-center p-5">
<div class="main-info">
<img src="{{.Site.BaseURL}}images/{{ $sidebar.displayPicture }}" class="rounded-circle mb-3" width="160px">
<h1 class="heading">{{ $sidebar.title }} <span class="highlight">{{ $sidebar.highlightedText }}</span></h1>
<p class="text-muted">{{ $sidebar.description }}</p>
<div class="social my-4">
{{ range $key, $value := $social }}
<a target="_blank" href="{{ $value }}" rel="me">
<i class="fab fa-{{ $key }}"></i>
</a>
{{ end }}
{{ range $key, $value := $socialfas }}
<a target="_blank" href="{{ $value }}">
<i class="fas fa-{{ $key }}"></i>
</a>
{{ end }}
</div>
<a href="#contact" class="btn btn-dark btn-lg">Contact</a>
</div>
</section>

View file

@ -0,0 +1,15 @@
{{ $skills := .Site.Data.skills }}
<section id="skills" class="aqua text-light">
<h2 class="heading">{{ $skills.title }}</h2>
{{ range $key, $value := $skills.skills }}
<div class="skill">
<span class="h6">{{ $key }}</span>
<div class="progress">
<div class="progress-bar bg-blue" role="progressbar" style="width: {{ $value }}%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{{ end }}
</section>

View file

@ -0,0 +1 @@
.hljs-comment,.hljs-quote{color:#8e908c}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c82829}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#f5871f}.hljs-attribute{color:#eab700}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#718c00}.hljs-title,.hljs-section{color:#4271ae}.hljs-keyword,.hljs-selector-tag{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

View file

@ -0,0 +1,440 @@
html {
overflow-x: hidden;
overflow-y: scroll;
}
a:hover {
text-decoration: none;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
right: 552px;
bottom: 0px;
z-index: 1;
width: 40%;
height: 100%;
}
.sidebar .main-info * {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
}
.sidebar .main-info *.bs {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.main-content {
position: relative;
overflow: visible;
width: 60%;
max-width: 1200px;
margin-left: 40%;
float: none;
clear: none;
}
.main-content:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
background-color: #fff;
}
.main-content.active:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
background-color: #fff;
}
article {
font-size: 18px !important;
line-height: 1.8rem;
}
article p {
color: rgba(0, 0, 0, 0.8);
}
article img {
max-width: 100%;
}
article code {
background-color: #fbfbfb !important;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
article mark {
background-color: white;
color: #c80000;
}
.heading,
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800;
text-transform: uppercase;
}
.heading {
font-size: 38px;
}
.highlight {
background-color: #ededed;
padding: 4px 8px;
/*display: inline-block;*/
}
.form-control {
border: none;
background-color: #e8ebef !important;
}
.primaryMenu {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
position: absolute;
margin-left: 35px;
}
.primaryMenu.active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.secondaryMenu {
position: absolute;
widows: 100%;
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
margin-left: 25px;
padding-left: 0;
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.secondaryMenu.active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.btn {
border-radius: 6px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn.btn-primary {
background-color: #31E7B6;
border-color: #31E7B6;
}
.btn.btn-primary:hover {
background-color: #32d2a7;
border-color: #32d2a7;
}
.btn.btn-primary:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
background-color: #32d2a7;
border-color: #32d2a7;
}
.btn-dark-faded {
font-weight: 300;
font-family: 'Montserrat', sans-serif !important;
/*text-transform: uppercase;*/
background-color: rgba(0, 0, 0, 0.07);
color: black;
}
.social:hover a {
color: rgba(0, 0, 0, 0.4);
}
.social a {
color: black;
font-size: 28px;
margin-right: 12px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.social a:hover {
color: black;
}
.social a:hover i {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
section {
padding: 10%;
}
section .heading {
margin-bottom: 30px;
}
section.yellow {
background-color: #ffd061;
color: #000 !important;
}
section.yellow .progress .bg-blue {
background-color: #c19c43;
}
section.voilet {
background-color: #4768FD;
}
section.blue {
background-color: #cadfdf;
}
section.orange {
color: #fff;
background-color: #fb7833;
}
section.green {
background-color: #aaffa7;
}
section.skin {
background-color: #fdead2;
}
section.aqua {
background-color: #00fefe;
color: #000 !important;
}
section.pink {
background-color: #fff1f1;
}
.progress {
height: 0.6rem;
background-color: #fff;
}
.progress .bg-blue {
background-color: #2e96a5;
}
.card {
border-radius: 6px;
border: none;
}
#timeline {
width: 100%;
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#timeline:before {
content: "";
width: 3px;
height: 100%;
background: #000;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
top: 0;
position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}
#timeline .timeline-item {
margin-bottom: 50px;
position: relative;
text-align: right;
}
#timeline .timeline-item .timeline-icon {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -10px;
border-radius: 50%;
}
#timeline .timeline-item .timeline-content {
width: 45%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline .timeline-item .timeline-content p {
color: rgba(0, 0, 0, 0.7);
}
#timeline .timeline-item .timeline-content .date {
display: inline-block;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 3px;
}
#timeline .timeline-item .timeline-content.right {
float: right;
text-align: left;
}
.pagination .page-item.active .page-link {
background-color: black;
border-color: black !important;
color: #fff !important;
}
.pagination .page-link {
border: none;
color: #000 !important;
}
.skill {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.sidebar {
position: static;
width: 100%;
padding-left: 65px;
}
.main-content {
width: 100%;
margin-left: 0%;
}
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
}
#timeline:before {
left: 0;
}
#timeline .timeline-item .timeline-content {
width: 90%;
float: right;
text-align: left;
}
#timeline .timeline-item .timeline-content:before,
#timeline .timeline-item .timeline-content .right:before {
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
#timeline .timeline-item .timeline-icon {
left: 0;
}
}
.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
width: 24px;
height: 4px;
}
.hamburger-menu {
position: relative;
-webkit-transform: translateY(8px);
transform: translateY(8px);
background: black;
-webkit-transition: all 0ms 300ms;
transition: all 0ms 300ms;
}
.hamburger-menu.animate {
background: rgba(255, 255, 255, 0);
}
.hamburger-menu:before {
content: "";
position: absolute;
left: 0;
bottom: 8px;
background: black;
-webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
content: "";
position: absolute;
left: 0;
top: 8px;
background: black;
-webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:before {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
/*# sourceMappingURL=styles.css.map */

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,448 @@
*{
// outline: 1px solid red;
}
html{
overflow-x: hidden;
overflow-y: scroll;
}
a{
&:hover{
text-decoration: none;
}
}
.sidebar{
position: fixed;
left: 0px;
top: 0px;
right: 552px;
bottom: 0px;
z-index: 1;
width: 40%;
height: 100%;
.main-info *{
transition: all 0.3s ease;
opacity: 0;
transform: translateX(-40px);
&.bs{
transform: translateX(0);
opacity: 1;
}
}
}
.main-content{
position: relative;
overflow: visible;
width: 60%;
max-width: 1200px;
margin-left: 40%;
float: none;
clear: none;
&:after{
position: absolute;
content: '';
top: 0; bottom: 0;
left: 0; right: 0;
transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);;
background-color: #fff;
}
&.active{
&:after{
position: absolute;
content: '';
top: 0; bottom: 0;
left: 0; right: 0;
transform: translateX(100%);
background-color: #fff;
}
}
}
article{
font-size: 18px !important;
line-height: 1.8rem;
p{
color: rgba(0,0,0,0.8);
}
img{
max-width: 100%;
}
code{
background-color: #fbfbfb !important;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
mark{
background-color: white;
color: rgb(200,0,0);
}
}
.heading,
h1,h2,h3,h4,h5,h6{
font-family: 'Montserrat', sans-serif !important;
font-weight: 800;
text-transform: uppercase;
}
.heading{
font-size: 38px;
}
.highlight{
background-color: #ededed;
padding: 4px 8px;
/*display: inline-block;*/
}
.form-control{
border: none;
background-color: #e8ebef !important;
}
.primaryMenu{
// margin-top: -90px;
transform: translateY(-90px);
transition: transform 0.3s ease;
position: absolute;
margin-left: 35px;
&.active{
transform: translateY(0px);
}
}
.secondaryMenu{
position: absolute;
widows: 100%;
// margin-top: -90px;
transform: translateY(-90px);
margin-left: 25px;
padding-left: 0;
z-index: 2;
transition: transform 0.3s ease;
&.active{
// margin-top: 0px;
transform: translateY(0px);
}
}
// styles for buttons
.btn{
border-radius: 6px;
transition: all 0.3s ease;
&.btn-primary{
background-color : #31E7B6;
border-color: #31E7B6;
&:hover{
background-color : #32d2a7;
border-color: #32d2a7;
}
&:active{
transform: scale(0.95);
background-color : #32d2a7;
border-color: #32d2a7;
}
}
}
.btn-dark-faded{
font-weight: 300;
font-family: 'Montserrat', sans-serif !important;
/*text-transform: uppercase;*/
background-color: rgba(0,0,0,0.07);
color: black;
}
// Styles for social icons
.social{
&:hover{
a{
color: rgba(0,0,0,0.4);
}
}
a{
color: rgba(0,0,0,1);
font-size: 28px;
margin-right: 12px;
transition: all 0.3s ease;
&:hover{
color: rgba(0,0,0,1);
i{
transform: scale(1.3);
}
}
}
}
section{
padding: 10%;
.heading{
margin-bottom: 30px;
}
&.yellow{
background-color: #ffd061;
color: #000 !important;
.progress .bg-blue{
background-color: #c19c43;
}
}
&.voilet{
background-color: #4768FD;
}
&.blue{
background-color: #cadfdf;
}
&.orange{
color: #fff;
background-color: #fb7833;
}
&.green{
background-color: #aaffa7;
}
&.skin{
background-color: #fdead2;
}
&.aqua{
background-color: #00fefe;
color: #000 !important;
}
&.pink{
background-color: #fff1f1;
}
}
// styles for progress bar
.progress{
height: 0.6rem;
background-color: #fff;
.bg-blue{
background-color: #2e96a5;
}
}
.card{
border-radius: 6px;
border: none;
}
// styles for timeline
#timeline {
width: 100%;
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
&:before {
content: "";
width: 3px;
height: 100%;
background: #000;
left: 50%;
transform: translate(-50%);
top: 0;
position: absolute;
}
&:after {
content: "";
clear: both;
display: table;
width: 100%;
}
.timeline-item {
margin-bottom: 50px;
position: relative;
text-align: right;
.timeline-icon {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.timeline-content {
width: 45%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
p {
color: rgba(0,0,0,0.7);
}
.date{
display: inline-block;
background-color: rgba(0,0,0,0.1);
padding: 10px;
border-radius: 3px;
}
&.right {
float: right;
text-align: left;
}
}
}
}
.pagination{
.page-item.active{
.page-link{
background-color: black;
border-color: black !important;
color: #fff !important;
}
}
.page-link{
border: none;
color: #000 !important;
}
}
.skill{
margin-bottom: 20px;
}
@media (max-width: 767px){
.sidebar {
position: static;
width: 100%;
padding-left: 65px;
}
.main-content{
width: 100%;
margin-left: 0%;
}
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
&:before {
left: 0;
}
.timeline-item{
.timeline-content {
width: 90%;
float: right;
text-align: left;
&:before,
.right:before{
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
}
.timeline-icon {
left: 0;
}
}
}
}
$bar-width: 24px;
$bar-height: 4px;
$bar-spacing: 8px;
.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
width: $bar-width;
height: $bar-height;
}
.hamburger-menu {
position: relative;
transform: translateY($bar-spacing);
background: rgba(0, 0, 0, 1);
transition: all 0ms 300ms;
&.animate {
background: rgba(255, 255, 255, 0);
}
}
.hamburger-menu:before {
content: "";
position: absolute;
left: 0;
bottom: $bar-spacing;
background: rgba(0, 0, 0, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
content: "";
position: absolute;
left: 0;
top: $bar-spacing;
background: rgba(0, 0, 0, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.hamburger-menu.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View file

@ -0,0 +1,69 @@
/*
*=================================
* Hugo UILite Portfolio v0.8
*=================================
*
* Free version https://uicard.io/products/hugo-uilite
* Pro version https://uicard.io/products/hugo-uilite-pro
* Demo https://demo.uicard.io/hugo-uilite-portfolio-demo/
*
* Coded By UICardio
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*
*/
let menuBtn = $("#menuBar");
menuBtn.click(function() {
$('.hamburger-menu').toggleClass('animate');
if ($(".secondaryMenu").hasClass("active")) {
$(".secondaryMenu").removeClass("active");
setTimeout(function() {
$(".primaryMenu").addClass("active");
}, 400);
} else {
$(".primaryMenu").removeClass("active");
setTimeout(function() {
$(".secondaryMenu").addClass("active");
}, 350);
}
});
function scrollTo(target) {
const top = $(target).offset().top;
const duration = 500;
const changeHash = function() {
location.hash = target
};
$("html, body").animate({ scrollTop: top }, duration, changeHash);
}
$(document).ready(function() {
var elements = $(".sidebar > .main-info *");
console.log(elements);
for (let i = 0; i < elements.length; i++) {
setTimeout(function() {
$(elements[i].tagName).addClass("bs");
}, (400 * i) - 90 * i);
}
setTimeout(function() {
$(".main-content").addClass("active");
}, 1900);
$("#sidebar a.btn[href='#contact']").on("click", function (event) {
event.preventDefault();
scrollTo($.attr(this, "href"));
});
});

View file

@ -0,0 +1,19 @@
# theme.toml template for a Hugo theme
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
name = "UILite"
license = "MIT"
licenselink = "https://github.com/uicardiodev/hugo-uilite/blob/master/LICENSE.md"
description = "Hugo UILite theme is designed for developers and desginers so that they can showcase their work without any struggle"
homepage = "https://uicard.io/products/hugo-uilite"
tags = ["minimal","responsive","clean","modern","colors","portfolio","blog","skills","experience","services","uicardio"]
features = ["blog","services","portfolio","contact","skills","formspree","responsive"]
min_version = "0.31.1"
[author]
name = "UICardio"
homepage = "https://uicard.io/products/sodium-hugo-theme"
[developer]
name = "Arvind"
homepage = "https://heyarviind.com"