Skip to content

Commit

Permalink
Add fourth scroll item to intro section
Browse files Browse the repository at this point in the history
  • Loading branch information
@israelias
israelias committed Feb 16, 2021
1 parent dfb8c25 commit 37bf564
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 16 deletions.
23 changes: 20 additions & 3 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4464,7 +4464,8 @@ section.collapse:not(.show) .section-icon {

#scroll-one,
#scroll-two,
#scroll-three {
#scroll-three,
#scroll-four {
top: var(--scroll-height);
}

Expand All @@ -4475,11 +4476,11 @@ section.collapse:not(.show) .section-icon {
-webkit-animation:
scroll-in .75s var(--glide) 0s 1 normal forwards running,
scroll-out .75s var(--glide) 4s 1 normal forwards running,
scroll-in .75s var(--glide) 12s 1 normal forwards running;
scroll-in .75s var(--glide) 16s 1 normal forwards running;
animation:
scroll-in .75s var(--glide) 0s 1 normal forwards running,
scroll-out .75s var(--glide) 4s 1 normal forwards running,
scroll-in .75s var(--glide) 12s 1 normal forwards running;
scroll-in .75s var(--glide) 16s 1 normal forwards running;

-webkit-transition: all var(--flashing) var(--zip) var(--early);
-o-transition: all var(--flashing) var(--zip) var(--early);
Expand Down Expand Up @@ -4529,6 +4530,22 @@ section.collapse:not(.show) .section-icon {
transition: all var(--flashing) var(--zip) var(--early);
}

/* Fourth scroll item */

#toggle-all:checked ~ main #scroll-four,
#target-one.show #scroll-four {
-webkit-animation:
scroll-in .75s var(--glide) 12s 1 normal forwards running,
scroll-out .75s var(--glide) 16s 1 normal forwards running;
animation:
scroll-in .75s var(--glide) 12s 1 normal forwards running,
scroll-out .75s var(--glide) 16s 1 normal forwards running;

-webkit-transition: all var(--flashing) var(--zip) var(--early);
-o-transition: all var(--flashing) var(--zip) var(--early);
transition: all var(--flashing) var(--zip) var(--early);
}

/* Scroller keyframes
========================================================================== */

Expand Down
154 changes: 141 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -638,15 +638,141 @@ <h5 class="d-none d-md-block">
</h5>
<!--start 1.2 LIST GROUP -->
<ul id="vertical-scroller" class="recent-activity-cta d-none d-md-flex justify-content-center">
<!-- start SCROLL ITEM (MS1) -->

<!-- start SCROLL ITEM 0 (MS2) -->
<li id="scroll-one" class="scroll-item project-item active w-100">
<div class="activity-item row">
<!-- start PROJECT REPO STATS -->
<ul class="stats-activity">
<li class="data-repo-commit">
<a href="https://github.com/israelias/synonym-chaser/commits/master"
target="_blank" class="btn-link data-repo data-stats"
data-repo-commit-count="194">
<ion-icon name="git-commit-outline"
class="align-middle text-muted">
<span class="sr-only">
Commit count
</span>
</ion-icon>
</a>
</li>
<li>
<a href="https://github.com/israelias/synonym-chaser/branches"
target="_blank" class="btn-link data-repo data-stats"
data-repo-branch-count="2">
<ion-icon name="git-branch-outline" class="align-middle text-muted">
<span class="sr-only">
Branch count
</span>
</ion-icon>
</a>
</li>
<li class="">
<a href="https://github.com/israelias/synonym-chaser/settings"
target="_blank" class="btn-link data-repo data-stats"
data-repo-size="8.65">
<ion-icon name="barcode-outline" class="align-middle text-muted">
<span class="sr-only">
Repo size
</span>
</ion-icon>
</a>
</li>
<li>
<a href="https://synonyms.vercel.app"
target="_blank" class="btn-link data-repo data-stats"
data-repo-status="Active">
<ion-icon name="rocket-outline" class="align-middle text-muted">
<span class="sr-only">
Deployment status
</span>
</ion-icon>
</a>
</li>
</ul><!-- close project repo stats -->

<!-- PROJECT THUMBNAIL -->
<div class="col-3">
<h6 class="mb-1 ">
synonym-chaser
</h6>
<small class="d-none">
Interactive Front-end Development
</small>
</div>
<!-- /project thumbnail -->

<!-- PROJECT TEXT -->
<div class="col-9 pr-2 pl-3">
<img src="https://github.com/israelias/synonym-chaser/blob/master/public/og-image-synsearch-app01redblue_Light.png?raw=true"
width="75"
alt="project thumbnail"
class="img-thumbnail img-fluid mb-2">
<!-- start PROJECT LANGUAGE STATS -->
<div class="language-activity small">
<!-- start PROGRESS CONTAINER -->
<div class="progress">

<!-- JS PROGRESS BAR -->
<div class="progress-bar progress-javascript"
role="progressbar"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
aria-label="JavaScript 100"
style="width: 100%;">
</div>
<!-- /js progress bar -->

</div><!-- close progress container -->

<!-- JS PROGRESS LABEL -->
<a class="language-item small"
href="https://github.com/israelias/synonym-chaser/search?l=javascript"
target="_blank">
<ion-icon name="ellipse" class="mr-2 repo-css"></ion-icon>
<span class="mr-1 text-body">JavaScript</span>
<span class="text-black-50">100%</span>
</a>
<!-- /js progress label -->

</div><!-- close project language stats -->
</div>
<!-- /project text -->
</div>
<!-- start PROJECT CTA -->
<div class="activity-cta pr-0 bg-transparent">
<div class="d-flex w-100 pt-2 justify-content-around align-items-center">
<small class="mr-3 text-cta">
<span class="text-cta-hide">See what I'm currently working on</span>
<span class="text-cta-show">See some work</span>
</small>
<span class="inset-container-6">
<button class="btn"
type="button"
data-toggle="collapse"
data-target="#target-five"
aria-expanded="false"
aria-controls="target-five">
<ion-icon class="scroll-icon icon-five"
name="rocket"
aria-hidden="true">
</ion-icon>
</button>
</span>
</div>
</div><!-- close project cta -->
</li><!-- close scroll item (ms2) -->

<!-- start SCROLL ITEM 1 (MS1) -->
<li id="scroll-two" class="scroll-item project-item active w-100">
<div class="activity-item row">
<!-- start PROJECT REPO STATS -->
<ul class="stats-activity">
<li class="data-repo-commit">
<a href="https://github.com/israelias/resume-redux/commits/master"
target="_blank" class="btn-link data-repo data-stats"
data-repo-commit-count="233">
data-repo-commit-count="242">
<ion-icon name="git-commit-outline"
class="align-middle text-muted">
<span class="sr-only">
Expand All @@ -669,7 +795,7 @@ <h5 class="d-none d-md-block">
<li class="">
<a href="https://github.com/israelias/resume-redux/settings"
target="_blank" class="btn-link data-repo data-stats"
data-repo-size="88.4">
data-repo-size="89.7">
<ion-icon name="barcode-outline" class="align-middle text-muted">
<span class="sr-only">
Repo size
Expand Down Expand Up @@ -714,22 +840,22 @@ <h6 class="mb-1 ">
<!-- HTML PROGRESS BAR -->
<div class="progress-bar progress-html"
role="progressbar"
aria-valuenow="78.1"
aria-valuenow="58.2"
aria-valuemin="0"
aria-valuemax="100"
aria-label="HTML 78.1"
style="width: 78.1%;">
aria-label="HTML 58.2"
style="width: 58.2%;">
</div>
<!-- /html progress bar -->

<!-- CSS PROGRESS BAR -->
<div class="progress-bar progress-css"
role="progressbar"
aria-valuenow="29.9"
aria-valuenow="41.8"
aria-valuemin="0"
aria-valuemax="100"
aria-label="CSS 21.9"
style="width: 21.9%;">
aria-label="CSS 41.8"
style="width: 41.8%;">
</div>
<!-- /css progress bar -->

Expand All @@ -740,7 +866,7 @@ <h6 class="mb-1 ">
href="https://github.com/israelias/resume-redux/search?l=html" target="_blank">
<ion-icon name="ellipse" class="mr-2 repo-html"></ion-icon>
<span class="mr-1 text-body small">HTML</span>
<span class="text-black-50 small">78.1%</span>
<span class="text-black-50 small">58.2%</span>
</a>
<!-- /html progress label -->

Expand All @@ -749,7 +875,7 @@ <h6 class="mb-1 ">
href="https://github.com/israelias/resume-redux/search?l=css" target="_blank">
<ion-icon name="ellipse" class="mr-2 repo-css"></ion-icon>
<span class="mr-1 text-body">CSS</span>
<span class="text-black-50">21.9%</span>
<span class="text-black-50">41.8%</span>
</a>
<!-- /css progress label -->

Expand Down Expand Up @@ -780,8 +906,9 @@ <h6 class="mb-1 ">
</div>
</div><!-- close project cta -->
</li><!-- close scroll item (ms1) -->

<!-- start SCROLL ITEM 2 (Rec) -->
<li id="scroll-two" class="scroll-item bg-transparent w-100">
<li id="scroll-three" class="scroll-item bg-transparent w-100">
<!-- start ACTIVITY ITEM -->
<div class="activity-item pl-3 align-middle">
<div class="pt-3 pl-3 pr-3">
Expand Down Expand Up @@ -824,8 +951,9 @@ <h6 class="mb-1 ">
</div>
</div><!-- close activity cta -->
</li><!-- close scroll item 2 (rec) -->

<!-- start SCROLL ITEM 3 (COMMIT MSG) -->
<li id="scroll-three" class="scroll-item bg-transparent w-100">
<li id="scroll-four" class="scroll-item bg-transparent w-100">
<!-- start ACTIVITY ITEM -->
<div class="activity-item pl-3 align-middle">
<div class="pt-3 pl-3 pr-3">
Expand Down

1 comment on commit 37bf564

@vercel
Copy link

@vercel vercel bot commented on 37bf564 Feb 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.