Skip to content

Commit

Permalink
radial gradient bg
Browse files Browse the repository at this point in the history
  • Loading branch information
Vasilis K committed Oct 19, 2023
1 parent 9b7c7d1 commit 7a049c4
Show file tree
Hide file tree
Showing 15 changed files with 70 additions and 21 deletions.
2 changes: 1 addition & 1 deletion dist/css/styles.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/styles.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/meta.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/microsoft.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/profile.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/voicemod.html
View file

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions src/css/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/css/styles.css.map
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@

<a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a>
<a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a>
<a class="mb-0 button noUnderline ps-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>
<a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>

</div>

Expand Down Expand Up @@ -155,7 +155,7 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
</div>

<section>
<div class="row-fluid">
<div class="row-fluid coolGradientBG">
<div class="container">
<div class="row align-items-center minHeight80vh">
<div class="col-12 col-lg-8 col-xxl-6 mx-auto text-center">
Expand Down Expand Up @@ -517,7 +517,7 @@ <h2 class="font-weight-bold section-title d-none d-lg-block">
About me
</h2>
<p class="mt-4">Hello! I'm Vasilis Kolip, a product designer who likes to wear colourful sneakers. </p>
<p>I'm a half-Greek and half-Turkish citizen of the world who has lived and worked in Athens, Amsterdam, Birmingham and Istanbul.</p>
<p>I'm a citizen of the world who has lived and worked in Athens, Amsterdam, Birmingham and Istanbul and enjoys doing community work.</p>
<p>I've got an academic background in design as well as computer science and artificial intelligence. Most importantly, I've been working as a product designer for the past decade.</p>
<p>What sets me apart is my extensive product design and user research experience on a vast array of successful projects with diverse cross-functional teams.</p>

Expand Down
14 changes: 7 additions & 7 deletions src/meta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@

<a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a>
<a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a>
<a class="mb-0 button noUnderline ps-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>
<a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>

</div>

Expand Down Expand Up @@ -315,22 +315,22 @@ <h2 class="section-title">Overview</h2>

<div class="col-6 mb-5 mx-auto col-lg-4 text-center">

<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/icons8-video-trimming-64.png" alt="Effortless editing illustration" class="img-fluid mx-auto" style="height: 54px;"/>
</div>

<p class="text-uppercase mt-3 mb-2">Effortless editing</p>
</div>

<div class="col-6 mb-5 mx-auto col-lg-4 text-center">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/icons8-time-span-64.png" alt="Time saver illustration" class="img-fluid mx-auto" style="height: 54px;"/>
</div>
<p class="text-uppercase mt-3 mb-2">Time-saver</p>
</div>

<div class="col-6 mb-5 mx-auto col-lg-4 text-center">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/icons8-cursor-64.png" alt="Streamlined selection illustration" class="img-fluid mx-auto" style="height: 54px;"/>
</div>

Expand All @@ -339,21 +339,21 @@ <h2 class="section-title">Overview</h2>


<div class="col-6 mb-5 mx-auto col-lg-4 text-center">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/icons8-adobe-premiere-pro-64.png" alt="Adobe Premiere icon" class="img-fluid mx-auto" style="height: 54px; "/>
</div>
<p class="text-uppercase mt-3 mb-2">Adobe Premiere</p>
</div>

<div class="col-6 mb-5 mx-auto col-lg-4 text-center">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/final-cut-icon.png" alt="Final Cut icon" class="img-fluid mx-auto" style="width: 61px; height: 62px;"/>
</div>
<p class="text-uppercase mt-3 mb-2">Final Cut</p>
</div>

<div class="col-6 mb-5 mx-auto col-lg-4 text-center">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center" style="min-height: 130px">
<div class="col-12 col-lg-5 mx-auto bg-secondary the-border border-radius d-flex align-items-center large-shadow" style="min-height: 130px">
<img src="img/misc/icons/icons8-davinci-resolve-64.png" alt="DaVinci Resolve icon" class="img-fluid mx-auto" style="height: 54px;"/>
</div>
<p class="text-uppercase mt-3 mb-2">DaVinci Resolve</p>
Expand Down
2 changes: 1 addition & 1 deletion src/microsoft.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@

<a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a>
<a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a>
<a class="mb-0 button noUnderline ps-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>
<a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>

</div>

Expand Down
2 changes: 1 addition & 1 deletion src/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@

<a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline font-weight-bold">About</a>
<a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a>
<a class="mb-0 button noUnderline ps-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>
<a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>

</div>

Expand Down
27 changes: 27 additions & 0 deletions src/scss/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,33 @@ strong {
}
/*profile page desk setups end*/

.coolGradientBG {
background: radial-gradient(#FFFBF5, #F9F6FF, #F3FFFD, #FFFBF5);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
width: 100%;
}

.coolGradientBG:after {
content: "";
width: 100%;
height: 200px;
position: absolute;
margin-top: -200px;
background: linear-gradient(0deg, rgba(255, 251, 245, 1), rgba(255, 251, 245, 0) );
}

@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 80% 50%;
}
100% {
background-position: 0% 50%;
}
}

.cvImage {
transition: .3s all;
Expand Down
2 changes: 1 addition & 1 deletion src/voicemod.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@

<a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a>
<a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a>
<a class="mb-0 button noUnderline ps-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>
<a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open();" title="Click to get in touch">Contact</a>

</div>

Expand Down

0 comments on commit 7a049c4

Please sign in to comment.