//- Container
.container
//-- Portfolio Card Content
.portfolioCardContent.clearfix
h1.portfolioCardContent__title Portfolio.
.portfolioCardContent__paragraphWrap
h2.portfolioCardContent__paragraphTitle Idea Crafting.
p.portfolioCardContent__paragraph Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos quis aperiam vero dicta, odio eaque illum, rerum veniam velit? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
//-- Portfolio Card Wrap
.portfolioCardWrap.clearfix
mixin portfolioCardMix(imgProjectClass, portfolioCardName, portfolioCardTechnologies)
.portfolioCard
.portfolioCard__img(class=`portfolioCard__img_${imgProjectClass}`)
.portfolioCard__about
h1.portfolioCard__name #{portfolioCardName}
h1.portfolioCard__technologies #{portfolioCardTechnologies}
+portfolioCardMix('gwent', 'card game ui', 'html,scss,react')
+portfolioCardMix('prado', 'prado museum', 'html,scss,react')
+portfolioCardMix('spiele', 'spiele museum', 'pug,scss,js')
+portfolioCardMix('cuphead', 'cuphead', 'pug,scss,js')
+portfolioCardMix('calculator', 'calculator', 'pug,scss,js,ts')
+portfolioCardMix('player', 'music player', 'pug,scss,react')
+portfolioCardMix('mobile', 'old mobile', 'html,css,js')
+portfolioCardMix('artGallery', 'art gallery', 'pug,scss,js')
+portfolioCardMix('tree', 'geometric', 'pug,scss,js')
//-- Popup Menu
section.popupMenu
//--- Portfolio Container
.portfolioContainer
.bgRect
.bgRect
//---- Presentation
section.presentation
//----- Present Page
section.presentPage
//------ Present Side
.presentSide
.closeButtonWrap
svg.closeButtonWrap__textWrap(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve")
defs
path#circlePath(d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 ")
circle(cx="150" cy="100" r="75" fill="none")
g
use(xlink:href="#circlePath" fill="none")
text
textPath.closeButtonWrap__text(xlink:href="#circlePath") Close portfolio page
.closeButtonWrap__circle
h1.presentSide__title
//------ Present Main
.presentMain
p.presentMain__article Presentation
p.presentMain__article 01
p.presentMain__article
a.presentMain__demoLink(href="" target="_blank") Demo Page
p.presentMain__article Made by Roden
//------- Present Main Title Wrap
.presentMain__titleWrap
h1.presentMain__title
.presentMain__titleUnderline
.presentMain__slide
.presentMain__titleCircle
svg.presentMain__textWrap(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve")
defs
path#circlePath(d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 ")
circle(cx="150" cy="100" r="75" fill="none")
g
use(xlink:href="#circlePath" fill="none")
text
textPath.presentMain__text(xlink:href="#circlePath") Welcome to portfolio page
//------- Present Main Content
.presentMain__content
.presentMain__descript
h2.presentMain__descriptTitle
p.presentMain__descriptParagraph
.presentMain__imgWrap
.presentMain__imgRect
.presentMain__img
//----- Detail Page
section.detailPage
//------ Line Info Wrap
mixin lineInfoMix(leftWord, pageNumber, leftClassLink, leftHref, leftWordLink, rightClassLink, rightHref, rightWordLink)
.lineInfoWrap
.lineInfoWrap__left #{leftWord}
.lineInfoWrap__line
.lineInfoWrap__right #{pageNumber}
.lineInfoWrap
.lineInfoWrap__left
a(class=`${leftClassLink}` href=`${leftHref}` target="_blank") #{leftWordLink}
.lineInfoWrap__line
.lineInfoWrap__right
a(class=`${rightClassLink}` href=`${rightHref}` target="_blank") #{rightWordLink}
+lineInfoMix('Details', '02', 'lineInfoWrap__detailGithub', '', 'Github Page', '', 'https://dribbble.com/Kerthin', 'www.dribbble.com')
//------ Detail Wrap
.detailsWrap
//------- Detail Item
mixin detailItemMix(detailItemNumber)
.detailItem
.detailItem__img
.detailItem__info
.detailItem__titleWrap
h2.detailItem__title(class=`js-detailItem__title_${detailItemNumber}`)
h3.detailItem__subtitle(class=`js-detailItem__subtitle_${detailItemNumber}`)
.detailItem__paragraph(class=`js-detailItem__paragraph_${detailItemNumber}`)
+detailItemMix(1)
+detailItemMix(2)
+detailItemMix(3)
+detailItemMix(4)
//----- Portfolio Page
section.portfolioPage
+lineInfoMix('Portfolio', '03', '', 'mailto:belichenko.roden.dev@gmail.com', 'mail.google.com', '', 'https://dev.to/kerthin', 'www.dev.to')
//------ Portfolio Info Wrap
.portfolioInfoWrap
.portfolioImg.portfolioImg_lg
//------- Portfolio Links
.portfolioLinks
.portfolioLinks__lineWrap
.portfolioLinks__line
.portfolioLinks__circle
.portfolioLinks__socialWrap
h4.portfolioLinks__socialTitle Visited My<br/>Socials.
.portfolioLinks__social
ul.portfolioLinks__socialList
li.portfolioLinks__socialItem
a.portfolioLinks__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
svg.portfolioLinks__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
span.portfolioLinks__name GitHub
li.portfolioLinks__socialItem
a.portfolioLinks__link(href="https://codepen.io/Astap" target="_blank")
svg.portfolioLinks__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
line(x1="12" y1="22" x2="12" y2="15.5")
polyline(points="22 8.5 12 15.5 2 8.5")
polyline(points="2 15.5 12 8.5 22 15.5")
line(x1="12" y1="2" x2="12" y2="8.5")
span.portfolioLinks__name CodePen
li.portfolioLinks__socialItem
a.portfolioLinks__link(href="https://twitter.com/Roden76020051" target="_blank")
svg.portfolioLinks__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
span.portfolioLinks__name Twitter
.portfolioLinks__underline
.portfolioImg.portfolioImg_md
//------ Portfolio Content
.portfolioContent
h3.portfolioTitle Portfolio.
.portfolio__paragraphWrap
p.portfolio__paragraph Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos quis aperiam vero dicta, odio eaque illum, rerum veniam velit? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos quis/*____________________________________________________________
# @import
## @import _variables.scss
# Mixins
## Line Info Mixin
## Project Image Path Mixin
## Title Underline Width
# Fonts
# Container
## Portfolio Card Content
## Portfolio Card Wrap
## Popup Menu
### Portfolio Container
#### Presentation
##### Present Page
###### Present Side
###### Present Main
####### Present Main Title Wrap
####### Present Main Content
##### Detail Page
###### Line Info Wrap
###### Detail Wrap
####### Detail Item
##### Portfolio Page
###### Portfolio Info Wrap
####### Portfolio Links
###### Portfolio Content
# @media
## @media 1680px
## @media 1680px
## @media 1440px
## @media 1280px
## @media 1024px
## @media 960px
## @media 848px
## @media 768px
## @media 642px
## @media 576px
## @media 414px
## @media 375px
## @media 320px
## @media iPad (min-width: 767px) and (max-width: 1025px) (portrait)
____________________________________________________________*/
/*____________________________________________________________
# @import
____________________________________________________________*/
/*____________________________________________________________
## @import _variables.scss
____________________________________________________________*/
/*____________________________________________________________
## Regular color variables
____________________________________________________________*/
// First number color
$x-color-black: #000;
$x-color-dark-blue: #01243a;
$x-color-dark-greenish-blue: #0b3442;
$x-color-blackish-blue: #171b25;
$x-color-dark-grey-blue: #272f3a;
$x-color-signal-black: #292c2c;
$x-color-lime-green: #29c740;
$x-color-granite: #2a333c;
$x-color-dark-cyanide: #2c8291;
$x-color-cyanide: #37a4b8;
$x-color-space:#37404a;
$x-color-slate-grey: #3e4955;
$x-color-graphite-grey: #4c5259;
$x-color-wet-asphalt: #626a73;
$x-color-aquamarine: #7dcbd8;
$x-color-deep-red-brown: #480a16;
$x-color-flea-belly: #4d160e;
$x-color-marengo: #4d5c68;
$x-color-trefoil-crayola: #56c299;
$x-color-moderate-turquoise: #57c2cb;
$x-color-falun-red: #5f140e;
$x-color-dark-red: #732124;
$x-color-pearl-ruby: #7a1635;
$x-color-manatee: #889ea6;
$x-color-coral-red: #8c250e;
$x-color-vinous: #9b2d30;
// First letter color
$x-color-snow-blue: #a3d9e3;
$x-color-cadet-blue: #a4b4ba;
$x-color-niagara: #b0b7c6;
$x-color-silver: #c0c0c0;
$x-color-grideperlevy: #c3cdd1;
$x-color-grey-silk: #c6b69d;
$x-color-deep-orange: #c74b16;
$x-color-light-cyanide: #cceaf0;
$x-color-periwinkle: #cfdce5;
$x-color-light-cherry: #dd3e62;
$x-color-terracotta: #dd4f5b;
$x-color-gainsborough: #e1e6e8;
$x-color-light-gray: #e6e5e5;
$x-color-tomato: #ee6648;
$x-color-smoky-white: #f2eaf1;
$x-color-beige: #f7e0b5;
$x-color-dandelion: #facf6f;
$x-color-lemon-cream: #fafac3;
$x-color-shiny-orange: #febc2e;
$x-color-amber: #fec712;
$x-color-orange-dawn: #ff5f56;
$x-color-white: #fff;
/*____________________________________________________________
## Compound color variables
____________________________________________________________*/
$palette-primary: $x-color-vinous;
$palette-secondary: $x-color-beige;
$palette-tertiary: $x-color-aquamarine;
$palette-button-exit: $x-color-orange-dawn;
$palette-button-minimize: $x-color-shiny-orange;
$palette-button-screen: $x-color-lime-green;
$palette-bubble-type-1: $x-color-aquamarine;
$palette-bubble-type-2: $x-color-granite;
$palette-bubble-type-3: $x-color-tomato;
$palette-chart-type-1: $x-color-tomato;
$palette-chart-type-2: $x-color-granite;
$palette-window-line: $x-color-light-cyanide;
$palette-folder-shadow: $x-color-dark-cyanide;
$palette-settings-elements: $x-color-dark-cyanide;
$palette-analytics-elements: $x-color-snow-blue;
$palette-dialog: $x-color-snow-blue;
$palette-site-layout: $x-color-snow-blue;
$palette-imac-display-gradient: $x-color-snow-blue;
$palette-imac-browser-elements: $x-color-silver;
$palette-imac-browser-line: $x-color-granite;
$palette-program-panel: $x-color-granite;
$palette-skin: $x-color-deep-orange;
$palette-skin-shadow: $x-color-falun-red;
$palette-hair-blink: $x-color-dark-greenish-blue;
$palette-hair-shadow: $x-color-dark-blue;
$palette-costume-elements: $x-color-marengo;
$palette-bow-elements: $x-color-dark-red;
$palette-responsive-nav: $x-color-tomato;
$palette-responsive-banner: $x-color-aquamarine;
$palette-card-font: $x-color-signal-black;
$palette-present-font: $x-color-signal-black;
$palette-present-border: $x-color-signal-black;
$palette-present-primary: $x-color-dandelion;
$palette-detail-rect-border: $x-color-terracotta;
$palette-social-link: $x-color-white;
$palette-social-link-hover: $x-color-aquamarine;
/*____________________________________________________________
## @import _centering.scss
____________________________________________________________*/
%verticalCentering {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
%horizontalCentering {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
%centering {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*____________________________________________________________
# Mixins
____________________________________________________________*/
/*____________________________________________________________
## Line Info Mixin
____________________________________________________________*/
@mixin lineInfoMix($parentClassName, $topLineWidth, $bottomLineWidth) {
.#{$parentClassName}Page {
.lineInfoWrap {
&:nth-child(1) {
.lineInfoWrap__line {
width: calc(100% - #{$topLineWidth});
}
}
&:nth-child(2) {
.lineInfoWrap__line {
width: calc(100% - #{$bottomLineWidth});
}
}
}
}
}
/*____________________________________________________________
## Project Image Path Mixin
____________________________________________________________*/
@mixin projectImgPathMix($underlineWidth, $presentationClassModification, $presentMainImg, $detailImg1, $detailImg2, $detailImg3, $detailImg4, $portfolioLgImg, $portfolioMdImg) {
.presentation_#{$presentationClassModification} {
.presentMain__titleUnderline {
width: #{$underlineWidth}
}
.presentMain__img {
background-image: url('#{$presentMainImg}');
}
.detailItem {
&:nth-child(1) {
.detailItem__img {
background-image: url('#{$detailImg1}');
}
}
&:nth-child(2) {
.detailItem__img {
background-image: url('#{$detailImg2}');
}
}
&:nth-child(3) {
.detailItem__img {
background-image: url('#{$detailImg3}');
}
}
&:nth-child(4) {
.detailItem__img {
background-image: url('#{$detailImg4}');
}
}
}
.portfolioImg_lg {
background-image: url('#{$portfolioLgImg}');
}
.portfolioImg_md {
background-image: url('#{$portfolioMdImg}');
}
}
}
/*____________________________________________________________
## Title Underline Width
____________________________________________________________*/
@mixin underlineWidthMix($presentationClassModification, $underlineWidth) {
.presentation_#{$presentationClassModification} {
.presentMain__titleUnderline {
width: #{$underlineWidth}
}
}
}
/*____________________________________________________________
# Fonts
____________________________________________________________*/
@import 'https://rawcdn.githack.com/Kerthin/links/e23c46b4fa25b5672245c51fca29213232d5e883/css/fontLinks.css';
/*____________________________________________________________
# @import
____________________________________________________________*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
::-webkit-scrollbar {
width: 0;
}
a {
text-decoration: none;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
position: absolute;
width: 100%;
background-color: $palette-primary;
}
/*____________________________________________________________
## Portfolio Card Content
____________________________________________________________*/
.portfolioCardContent {
position: relative;
margin: 150px auto 100px;
width: 1500px;
}
.portfolioCardContent__title {
position: relative;
float: left;
width: 45%;
font-family: Galeria;
font-size: 100px;
color: $palette-secondary;
}
.portfolioCardContent__paragraphWrap {
position: relative;
float: left;
width: 55%;
}
.portfolioCardContent__paragraphTitle {
position: relative;
margin-bottom: 20px;
font-family: Galeria;
font-size: 24px;
color: $palette-secondary;
}
.portfolioCardContent__paragraph {
font-family: Galeria-Medium;
font-size: 18px;
word-spacing: 8px;
text-align: justify;
line-height: 35px;
color: $palette-secondary;
}
/*____________________________________________________________
## Portfolio Card Wrap
____________________________________________________________*/
.portfolioCardWrap {
position: relative;
margin: 0 auto;
width: 1500px;
&.portfolioCardWrap_eventsNone {
pointer-events: none;
}
}
.portfolioCard {
position: relative;
float: left;
width: 330px;
height: 450px;
padding: 25px;
margin-bottom: 60px;
margin-right: 60px;
background-color: $palette-secondary;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .25);
transition: all 0.3s ease-out;
cursor: pointer;
&:nth-child(4n) {
margin-right: 0;
}
&:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
&:active {
transform: scale(1) translateZ(0);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .25);
}
}
.portfolioCard__img {
position: relative;
width: 100%;
height: 320px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
&_gwent {
background-image: url('https://i.pinimg.com/originals/73/8d/26/738d26a92f816d7379f67519ee5e8210.png');
}
&_prado {
background-image: url('https://i.pinimg.com/originals/9d/c8/f7/9dc8f7657f620fe5496d10cf9f55ac83.png');
}
&_spiele {
background-image: url('https://i.pinimg.com/originals/f4/47/d2/f447d2fd4073f28997ca80bdf0cd6cf9.png');
}
&_cuphead {
background-image: url('https://i.pinimg.com/originals/ed/3d/4e/ed3d4e76fa5d5116de0a2bb8f649689a.png');
}
&_calculator {
background-image: url('https://i.pinimg.com/originals/a9/5b/95/a95b9595b3a101d14407c92c3586bed4.png');
}
&_player {
background-image: url('https://i.pinimg.com/originals/e0/8a/14/e08a141b68c02b08358d7aec2ce6c97c.png');
}
&_mobile {
background-image: url('https://i.pinimg.com/originals/b8/72/89/b8728959adfe9cdeb6ed7e255e6f1162.png');
}
&_artGallery {
background-image: url('https://i.pinimg.com/originals/a2/22/42/a222421ec14add5fd262768d76bdf183.png');
}
&_tree {
background-image: url('https://i.pinimg.com/originals/4b/ca/fc/4bcafca6b36076f715a7e1817108ea41.png');
}
}
.portfolioCard__about {
width: 100%;
margin-top: 26px;
}
.portfolioCard__name {
margin-bottom: 4px;
font-family: Galeria;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
color: $palette-card-font;
}
.portfolioCard__technologies {
font-family: Galeria-Medium;
font-size: 14px;
font-weight: lighter;
letter-spacing: 1px;
text-transform: uppercase;
color: $palette-card-font;
}
/*____________________________________________________________
## Popup Menu
____________________________________________________________*/
.blockRevealer__element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
z-index: 50;
}
.popupMenu {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.js-popupMenu_open {
pointer-events: visible;
.presentation {
opacity: 1;
transform: translate(-50%, -50%);
transition: all .4s;
transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
}
}
/*____________________________________________________________
### Portfolio Container
____________________________________________________________*/
.portfolioContainer {
position: fixed;
width: 100%;
height: 100vh;
background-color: $x-color-smoky-white;
}
.bgRect {
position: absolute;
width: 20%;
height: 20%;
border: 2px solid $palette-present-border;
&:nth-child(1) {
top: 2.5%;
right: 30%;
background-color: $x-color-trefoil-crayola;
}
&:nth-child(2) {
bottom: 2.5%;
left: 20%;
background-color: $palette-detail-rect-border;
}
}
/*____________________________________________________________
#### Presentation
____________________________________________________________*/
.presentation {
@extend %centering;
width: 90%;
height: 90%;
background-color: $palette-present-primary;
border: 2px solid $palette-present-border;
overflow: hidden;
cursor: pointer;
transition: all .4s;
&.presentation_open {
width: 100%;
height: 100vh;
border-width: 0;
overflow: scroll;
cursor: default;
.presentSide {
height: 100%;
transition-delay: .3s;
}
.closeButtonWrap {
transform: translateX(-50%) scale(1);
transition-delay: .8s;
}
.presentMain {
width: calc(100% - 160px);
}
.presentMain__slide {
width: 100%;
}
.presentMain__titleCircle {
transform: scale(0);
}
.presentMain__content {
height: 60%;
transition-delay: 1s;
}
}
}
// Gwent
@include projectImgPathMix(
'80px',
'gwent',
'https://i.pinimg.com/originals/41/40/36/414036a6800072b6fea0b0550809b3be.png',
'https://i.pinimg.com/originals/fb/47/65/fb4765686b6711724f6f8765659b15e5.png',
'https://i.pinimg.com/originals/76/56/2b/76562b163d1947cc40366c973b9d390d.png',
'https://i.pinimg.com/originals/9c/25/18/9c2518687686dc8dadf136ffa8e7bca6.png',
'https://i.pinimg.com/originals/a5/4a/5b/a54a5beb991dc900743cf95339ac69ab.png',
'https://i.pinimg.com/originals/6d/ba/33/6dba33b2c8b6a9a812d1ea7ef78456fb.png',
'https://i.pinimg.com/originals/23/aa/45/23aa45cad67cb76587550c5812e0828f.png'
);
// Prado
@include projectImgPathMix(
'53px',
'prado',
'https://i.pinimg.com/originals/da/d2/be/dad2bec273660ef57d1b5b8226cdd9fa.png',
'https://i.pinimg.com/originals/ff/5a/75/ff5a75072701ac21e976857f4a8e4cc8.png',
'https://i.pinimg.com/originals/f3/9c/1f/f39c1ffd297b392afdce9f1c38ff44b1.png',
'https://i.pinimg.com/originals/1a/e0/f7/1ae0f7edfe962e0ab3cc1ccfbad381c0.png',
'https://i.pinimg.com/originals/c0/52/04/c052041d1ff7f0392d189038b919ff03.png',
'https://i.pinimg.com/originals/b7/3d/e0/b73de097933f05ba0a51dbc129b8ec61.png',
'https://i.pinimg.com/originals/c0/49/eb/c049eb8e05385fae7a136042505f53e0.png'
);
// Spiele Museum
@include projectImgPathMix(
'65px',
'spiele',
'https://i.pinimg.com/originals/57/1f/d4/571fd4a327d7b1bc1df135d8392ed26f.png',
'https://i.pinimg.com/originals/c8/7e/8a/c87e8a698ae1b4835464f2304945f84a.png',
'https://i.pinimg.com/originals/32/0b/31/320b31ee5d039a9e335b9b5be2a1000e.png',
'https://i.pinimg.com/originals/de/19/0c/de190c623f727f13114e3139ad503eda.png',
'https://i.pinimg.com/originals/a4/3a/97/a43a9788ff5635ab2559a5281e49ccf9.png',
'https://i.pinimg.com/originals/5e/74/82/5e7482f21acbfd060991b44b0946a924.png',
'https://i.pinimg.com/originals/c5/de/0c/c5de0cc134bfba07aff16db8ae06b666.png'
);
// Cuphead
@include projectImgPathMix(
'80px',
'cuphead',
'https://i.pinimg.com/originals/6b/30/63/6b30634127df5e8d6d16cad9700005ef.png',
'https://i.pinimg.com/originals/60/ec/d0/60ecd07e17fe41fa5061357e49dd0385.png',
'https://i.pinimg.com/originals/67/28/7c/67287c239b575f00c16e294744fce485.png',
'https://i.pinimg.com/originals/6c/a5/77/6ca5777dc71025f9b10cf1959de9c34c.png',
'https://i.pinimg.com/originals/8d/58/1b/8d581b8b1f9181abe117396950cb6f63.png',
'https://i.pinimg.com/originals/53/a2/da/53a2da0fd9ee24b2eaf131ce487a5d97.png',
'https://i.pinimg.com/originals/52/4f/81/524f813c10e1814fcb711fef0828d7ed.png'
);
// Calculator
@include projectImgPathMix(
'80px',
'calculator',
'https://i.pinimg.com/originals/42/f0/0e/42f00e9e1e79731cbfc9881b5c6f68f6.png',
'https://i.pinimg.com/originals/71/7c/eb/717ceb296abb30870c8f38ac648588bf.png',
'https://i.pinimg.com/originals/ff/3a/f4/ff3af41a3813c3c3e28129759d76eaad.png',
'https://i.pinimg.com/originals/d3/8e/51/d38e51c24708241a4cdee1bed0d5db2a.png',
'https://i.pinimg.com/originals/99/9a/1e/999a1e847137e6df114b2223067a0b87.png',
'https://i.pinimg.com/originals/6e/c3/58/6ec3588c53470444bc530bc3d2466289.png',
'https://i.pinimg.com/originals/97/94/93/979493204b4eafb00d89e05390f11268.png'
);
// Music Player
@include projectImgPathMix(
'103px',
'player',
'https://i.pinimg.com/originals/46/f8/7f/46f87ffbbce0ab98e516b0b2989ac15d.png',
'https://i.pinimg.com/originals/cf/10/38/cf1038119e3275ab196569df9824c33b.png',
'https://i.pinimg.com/originals/af/ef/11/afef114b4e7dc09f369e78d9abcb4f31.png',
'https://i.pinimg.com/originals/b8/9d/ee/b89dee9a722a725612fcb40be44ecec9.png',
'https://i.pinimg.com/originals/9f/db/86/9fdb86d5d5b4b6dc622372ad2f0c3b29.png',
'https://i.pinimg.com/originals/2b/0e/87/2b0e87f37d613fee6851152fdf6bb514.png',
'https://i.pinimg.com/originals/6c/06/f1/6c06f15e586aa7625fa0537b38cbc897.png'
);
// Oldsmobile
@include projectImgPathMix(
'78px',
'old',
'https://i.pinimg.com/originals/1f/81/ff/1f81ff1c40a8d2c201b97c253cfdec91.png',
'https://i.pinimg.com/originals/4f/57/eb/4f57ebcd0d6117a448132dd8620702bb.png',
'https://i.pinimg.com/originals/29/a3/2f/29a32f0f19b038c329fbd742fb9a6f28.png',
'https://i.pinimg.com/originals/91/db/ee/91dbee03e20c27ceff2e876adbb37cbb.png',
'https://i.pinimg.com/originals/b5/e8/19/b5e819a1366e66159e4205e8229aa16e.png',
'https://i.pinimg.com/originals/04/fe/09/04fe09a2205d68898db1df988f75095c.png',
'https://i.pinimg.com/originals/02/dc/9d/02dc9d25ad5c33bd66fdd77653e53e83.png'
);
// artGallery
@include projectImgPathMix(
'62px',
'art',
'https://i.pinimg.com/originals/8f/5a/ca/8f5acab6c267d16b500d18cb0b6ce6c7.png',
'https://i.pinimg.com/originals/18/97/f6/1897f6f2792fa98f09f3c69c889b9e92.png',
'https://i.pinimg.com/originals/f9/ea/42/f9ea42013fda6c830f15acd00d821e85.png',
'https://i.pinimg.com/originals/b3/9a/4c/b39a4ce8dc576d74d3638ff9d5e0ec05.png',
'https://i.pinimg.com/originals/10/bb/ad/10bbad5a586a87ef44cc7571c60a3454.png',
'https://i.pinimg.com/originals/bd/02/43/bd0243482cf76c8f0e4820771646fbe8.png',
'https://i.pinimg.com/originals/37/ed/55/37ed55ddd8bc610582dde587ccc1adea.png'
);
// Trees
@include projectImgPathMix(
'80px',
'trees',
'https://i.pinimg.com/originals/27/ce/b6/27ceb6ef4f7bcd5c24ad0a88ea307336.png',
'https://i.pinimg.com/originals/c9/ce/0c/c9ce0c11fd9f1dc98f80e27824878985.png',
'https://i.pinimg.com/originals/04/d6/f4/04d6f4a420c59b366b11f827c0c617f9.png',
'https://i.pinimg.com/originals/e1/e1/2b/e1e12b9054b7cf3e2b2b6eac21de092d.png',
'https://i.pinimg.com/originals/0c/82/7c/0c827cae63b464cc499a9955d9bb1604.png',
'https://i.pinimg.com/originals/c3/85/43/c3854332e59bd3c3aa5ea0b86c68fc95.png',
'https://i.pinimg.com/originals/9f/78/73/9f787305e7292ceb815d1956d97f5fe2.png'
);
/*____________________________________________________________
##### Present Page
____________________________________________________________*/
.presentPage {
position: relative;
width: 100%;
height: 100%;
background-color: $palette-present-primary;
}
/*____________________________________________________________
###### Present Side
____________________________________________________________*/
.presentSide {
position: absolute;
bottom: 0;
width: 160px;
height: 0;
border-right: 2px solid $palette-present-border;
overflow: hidden;
transition: all .4s;
}
.closeButtonWrap {
@extend %horizontalCentering;
top: 30px;
width: 80px;
height: 80px;
border: 2px solid $palette-present-border;
border-radius: 50%;
background-color: $x-color-smoky-white;
transform: scale(0);
transition: all .4s;
cursor: pointer;
}
.closeButtonWrap__textWrap,
.presentMain__textWrap {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
animation-name: circleTextRotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes circleTextRotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
.closeButtonWrap__text {
font-family: Galeria;
font-size: 30px;
fill: $palette-present-font;
}
.closeButtonWrap__circle {
@extend %centering;
width: 28px;
height: 28px;
border: 2px solid $palette-present-border;
border-radius: 50%;
background-color: $palette-present-primary;
}
.presentSide__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(-1, -1);
font-family: Galeria;
font-size: 72px;
color: $palette-present-font;
writing-mode: vertical-lr;
}
/*____________________________________________________________
###### Present Main
____________________________________________________________*/
.presentMain {
position: absolute;
right: 0;
width: 100%;
height: 100%;
transition: all .4s;
transition-delay: .2s;
}
.presentMain__article {
position: absolute;
font-family: Galeria;
font-size: 22px;
color: $palette-present-font;
.presentMain__demoLink {
color: $palette-present-font;
}
&:nth-child(1) {
top: 35px;
left: 40px;
}
&:nth-child(2) {
top: 35px;
right: 40px;
font-size: 36px;
}
&:nth-child(3) {
bottom: 35px;
left: 40px;
}
&:nth-child(4) {
bottom: 35px;
right: 40px;
}
}
/*____________________________________________________________
####### Present Main Title Wrap
____________________________________________________________*/
.presentMain__titleWrap {
@extend %centering;
}
.presentMain__title {
position: relative;
font-family: Galeria;
font-size: 96px;
color: $palette-present-font;
}
.presentMain__titleUnderline {
position: absolute;
bottom: -8px;
height: 5px;
background-color: $palette-present-font;
}
.presentMain__slide {
position: absolute;
top: 0;
width: 0;
height: calc(100% + 15px);
background-color: $palette-present-primary;
transition: all .4s;
transition-delay: .7s;
}
.presentMain__titleCircle {
position: absolute;
top: -80px;
right: -125px;
width: 150px;
height: 150px;
border-radius: 50%;
transform: scale(1);
transition: all .4s;
transition-delay: .7s;
.presentMain__text {
font-family: Galeria;
font-size: 22px;
fill: $palette-present-font;
}
}
/*____________________________________________________________
####### Present Main Content
____________________________________________________________*/
.presentMain__content {
@extend %centering;
width: 80%;
height: 0;
overflow: hidden;
transition: all .5s;
}
.presentMain__descript {
float: left;
width: 35%;
height: 100%;
overflow: hidden;
}
.presentMain__descriptTitle {
margin: 10% 0;
font-family: Galeria;
font-size: 24px;
text-transform: capitalize;
line-height: 35px;
color: $palette-present-font;
}
.presentMain__descriptParagraph {
font-family: Galeria-Medium;
font-size: 18px;
word-spacing: 20px;
text-align: justify;
line-height: 50px;
color: $palette-present-font;
}
.presentMain__imgWrap {
position: relative;
float: left;
width: 65%;
height: 100%;
overflow: hidden;
}
.presentMain__imgRect {
position: absolute;
right: 15%;
width: 40%;
height: 30%;
border: 2px solid $palette-present-border;
background-color: $x-color-trefoil-crayola;
}
.presentMain__img {
@extend %verticalCentering;
right: 5%;
width: 80%;
height: 80%;
border: 20px solid $x-color-white;
outline: 2px solid $palette-present-border;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/*____________________________________________________________
##### Detail Page
____________________________________________________________*/
.detailPage {
position: relative;
width: 100%;
height: 100%;
background-color: $palette-present-primary;
}
@include lineInfoMix('detail', 184px, 447px);
/*____________________________________________________________
###### Line Info Wrap
____________________________________________________________*/
.lineInfoWrap {
@extend %horizontalCentering;
width: 90%;
&:nth-child(1) {
top: 5%;
}
&:nth-child(2) {
bottom: 5%;
}
}
.lineInfoWrap__left,
.lineInfoWrap__right {
float: left;
font-family: Galeria;
font-size: 22px;
color: $palette-present-font;
a {
color: $palette-present-font;
}
}
.lineInfoWrap__left {
margin-right: 30px;
}
.lineInfoWrap__line {
float: left;
margin-top: 14px;
margin-right: 30px;
height: 2px;
background-color: $palette-present-border;
}
/*____________________________________________________________
###### Detail Wrap
____________________________________________________________*/
.detailsWrap {
@extend %centering;
width: 90vw;
height: 70vh;
}
/*____________________________________________________________
####### Detail Item
____________________________________________________________*/
.detailItem {
position: relative;
float: left;
margin-bottom: 5vh;
margin-right: 5vw;
width: 42.5vw;
height: 32.5vh;
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(1) {
.detailItem__img {
border-color: $palette-present-primary;
}
}
&:nth-child(2) {
.detailItem__img {
border-color: $palette-detail-rect-border;
}
}
&:nth-child(3) {
.detailItem__img {
border-color: $x-color-trefoil-crayola;
}
}
&:nth-child(4) {
.detailItem__img {
border-color: $x-color-white;
}
}
}
.detailItem__img {
float: left;
margin-right: 5%;
width: 45%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 12px solid;
outline: 2px solid $palette-present-border;
}
.detailItem__info {
position: relative;
float: left;
width: 50%;
height: 100%;
}
.detailItem__titleWrap {
position: absolute;
width: 100%;
}
.detailItem__title,
.detailItem__subtitle {
font-size: 22px;
color: $palette-present-font;
}
.detailItem__title {
margin-bottom: 10px;
font-family: Galeria;
}
.detailItem__subtitle {
font-family: Galeria-Medium;
}
.detailItem__paragraph {
position: absolute;
bottom: 3%;
font-family: Galeria-Medium;
font-size: 16px;
word-spacing: 10px;
text-align: justify;
line-height: 40px;
color: $palette-present-font;
}
/*____________________________________________________________
##### Portfolio Page
____________________________________________________________*/
.portfolioPage {
position: relative;
width: 100%;
height: 100%;
background-color: $palette-present-primary;
}
@include lineInfoMix('portfolio', 210px, 408px);
/*____________________________________________________________
###### Portfolio Info Wrap
____________________________________________________________*/
.portfolioInfoWrap {
@extend %horizontalCentering;
top: 15%;
width: 90%;
height: 40%;
}
/*____________________________________________________________
####### Portfolio Links
____________________________________________________________*/
.portfolioImg,
.portfolioLinks {
position: relative;
float: left;
height: 100%;
border: 20px solid;
outline: 2px solid $palette-present-border;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.portfolioImg_lg {
margin-right: 2.5%;
width: 45%;
border-color: $x-color-white;
}
.portfolioImg_md {
width: 30%;
border-color: $x-color-trefoil-crayola;
}
.portfolioLinks {
margin-right: 2.5%;
width: 20%;
border-color: $palette-detail-rect-border;
background-color: $palette-detail-rect-border;
}
.portfolioLinks__lineWrap {
margin-bottom: 10px;
width: 100%;
height: 50px;
}
.portfolioLinks__line {
float: left;
margin-top: 23px;
margin-right: 20px;
width: calc(100% - 70px);
height: 3px;
background-color: $palette-present-border;
}
.portfolioLinks__circle {
float: left;
width: 50px;
height: 50px;
border: 2px solid $palette-present-border;
border-radius: 50%;
background-color: $palette-present-primary;
}
.portfolioLinks__socialWrap {
width: 100%;
}
.portfolioLinks__socialTitle {
margin-bottom: 20px;
font-family: Galeria;
font-size: 32px;
color: $palette-social-link;
}
.portfolioLinks__socialList {
width: 100%;
list-style: none;
}
.portfolioLinks__socialItem {
position: relative;
margin-bottom: 20px;
width: 115px;
height: 20px;
transition: transform 0.2s;
&:hover {
transform: translateY(-3px);
.portfolioLinks__icon {
stroke: $palette-social-link-hover;
}
.portfolioLinks__name {
color: $palette-social-link-hover;
}
}
}
.portfolioLinks__link {
text-decoration: none;
}
.portfolioLinks__icon {
margin-right: 20px;
width: 20px;
height: 20px;
fill: none;
stroke: $palette-social-link;
}
.portfolioLinks__name {
position: absolute;
font-family: Galeria-Medium;
font-size: 14px;
color: $palette-social-link;
}
.portfolioLinks__underline {
position: absolute;
bottom: 23px;
width: 30%;
height: 3px;
background-color: $palette-social-link;
}
/*____________________________________________________________
###### Portfolio Content
____________________________________________________________*/
.portfolioContent {
@extend %horizontalCentering;
bottom: 15%;
width: 90%;
}
.portfolioTitle {
position: relative;
font-family: Galeria;
font-size: 96px;
color: $palette-present-font;
}
.portfolio__paragraphWrap {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
.portfolio__paragraph {
font-family: Galeria-Medium;
font-size: 16px;
word-spacing: 10px;
text-align: justify;
line-height: 40px;
color: $palette-present-font;
}
/*____________________________________________________________
# @media
____________________________________________________________*/
/*____________________________________________________________
## @media 1680px
____________________________________________________________*/
@media only screen and (max-width: 1680px) {
// Presentation
.presentMain__descriptParagraph {
font-size: 20px;
word-spacing: 15px;
line-height: 40px;
}
// Detail Page
.detailItem__paragraph {
word-spacing: 7px;
line-height: 35px;
}
// Portfolio Page
.portfolioLinks__socialTitle {
margin-bottom: 18px;
font-size: 26px;
}
}
/*____________________________________________________________
## @media 1680px
____________________________________________________________*/
@media only screen and (max-width: 1600px) {
// Cards
.portfolioCardContent {
margin: 110px auto 75px;
width: 1110px;
}
.portfolioCardContent__title {
font-size: 75px;
}
.portfolioCardContent__paragraphTitle {
margin-bottom: 15px;
font-size: 21px;
}
.portfolioCardContent__paragraph {
font-size: 15px;
word-spacing: 8px;
line-height: 30px;
}
.portfolioCardWrap {
width: 1110px;
}
.portfolioCard {
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(4n) {
margin-right: 60px;
}
}
// Presentation
.presentMain__descriptParagraph {
word-spacing: 12px;
line-height: 35px;
}
// Detail Page
.detailItem__paragraph {
word-spacing: 6px;
line-height: 30px;
}
}
/*____________________________________________________________
## @media 1440px
____________________________________________________________*/
@media only screen and (max-width: 1440px) {
// Presentation
.presentation {
&.presentation_open {
.presentMain {
width: calc(100% - 140px);
}
}
}
.presentSide {
width: 140px;
}
.presentSide__title {
font-size: 56px;
}
.presentMain__article {
font-size: 18px;
&:nth-child(2) {
font-size: 28px;
}
}
.presentMain__descriptParagraph {
font-size: 16px;
word-spacing: 10px;
line-height: 30px;
}
// Detail Page
@include lineInfoMix('detail', 162px, 376px);
.lineInfoWrap__left,
.lineInfoWrap__right {
font-size: 18px;
}
.lineInfoWrap__line {
margin-top: 10px;
}
.detailItem__paragraph {
font-size: 14px;
word-spacing: 5px;
line-height: 25px;
}
// Portfolio Page
@include lineInfoMix('portfolio', 183px, 345px);
.portfolioLinks__lineWrap {
margin-bottom: 8px;
height: 40px;
}
.portfolioLinks__line {
margin-top: 18.5px;
margin-right: 15px;
width: calc(100% - 55px);
}
.portfolioLinks__circle {
width: 40px;
height: 40px;
}
.portfolioLinks__socialTitle {
margin-bottom: 15px;
font-size: 20px;
}
.portfolioLinks__socialItem {
margin-bottom: 15px;
height: 15px;
}
.portfolioLinks__icon {
margin-right: 15px;
width: 15px;
height: 15px;
}
.portfolioLinks__name {
font-size: 12px;
}
.portfolioLinks__underline {
bottom: 0;
}
}
/*____________________________________________________________
## @media 1280px
____________________________________________________________*/
@media only screen and (max-width: 1280px) {
// Cards
.portfolioCardContent {
margin: 90px auto 60px;
width: 888px;
}
.portfolioCardContent__title {
width: 100%;
font-size: 100px;
}
.portfolioCardContent__paragraphWrap {
display: none;
}
.portfolioCardWrap {
width: 888px;
}
.portfolioCard {
width: 264px;
height: 369px;
padding: 20px;
margin-bottom: 48px;
margin-right: 48px;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(4n) {
margin-right: 48px;
}
}
.portfolioCard__img {
height: 256px;
}
.portfolioCard__about {
margin-top: 20px;
}
.portfolioCard__name {
font-size: 21px;
}
.portfolioCard__technologies {
font-size: 13px;
}
// Presentation
.closeButtonWrap {
top: 40px;
width: 70px;
height: 70px;
}
.closeButtonWrap__text {
font-size: 28px;
}
.closeButtonWrap__circle {
width: 24px;
height: 24px;
}
.presentMain__title {
font-size: 86px;
}
@include underlineWidthMix('gwent', '70px');
@include underlineWidthMix('prado', '48px');
@include underlineWidthMix('spiele', '55px');
@include underlineWidthMix('cuphead', '65px');
@include underlineWidthMix('calculator', '65px');
@include underlineWidthMix('player', '92px');
@include underlineWidthMix('old', '70px');
@include underlineWidthMix('art', '55px');
@include underlineWidthMix('trees', '72px');
.presentMain__titleCircle {
top: -60px;
right: -110px;
width: 130px;
height: 130px;
}
.presentMain__descriptParagraph {
word-spacing: 5px;
line-height: 25px;
}
// Detail Page
.detailItem__paragraph {
word-spacing: 3px;
line-height: 20px;
}
// Portfolio Page
.portfolioTitle {
font-size: 86px;
}
.portfolio__paragraph {
word-spacing: 8px;
line-height: 30px;
}
}
/*____________________________________________________________
## @media 1024px
____________________________________________________________*/
@media only screen and (max-width: 1024px) {
// Presentation
.presentMain__descript {
width: 100%;
height: 10%;
}
.presentMain__descriptTitle {
margin: 0;
font-size: 18px;
}
.presentMain__descriptParagraph {
display: none;
}
.presentMain__imgWrap {
width: 100%;
height: 90%;
}
// Detail Page
.detailItem__title,
.detailItem__subtitle {
font-size: 18px;
}
// Portfolio Page
.portfolioTitle {
font-size: 72px;
}
.portfolio__paragraph {
font-size: 14px;
word-spacing: 3px;
line-height: 30px;
}
}
/*____________________________________________________________
## @media 960px
____________________________________________________________*/
@media only screen and (max-width: 960px) {
// Cards
.portfolioCardContent {
margin: 70px auto 45px;
width: 666px;
}
.portfolioCardContent__title {
font-size: 75px;
}
.portfolioCardWrap {
width: 666px;
}
.portfolioCard {
width: 198px;
height: 279px;
padding: 15px;
margin-bottom: 36px;
margin-right: 36px;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(4n) {
margin-right: 36px;
}
}
.portfolioCard__img {
height: 192px;
}
.portfolioCard__about {
margin-top: 15px;
}
.portfolioCard__name {
font-size: 15px;
}
.portfolioCard__technologies {
font-size: 10px;
}
// Portfolio Page
.portfolioInfoWrap {
height: 70%;
}
.portfolioImg,
.portfolioLinks {
width: 100%;
border: 15px solid;
}
.portfolioImg_lg {
display: none;
}
.portfolioImg_md {
height: 40%;
border-color: $x-color-trefoil-crayola;
}
.portfolioLinks {
margin-bottom: 2.5%;
height: 57.5%;
border-color: $palette-detail-rect-border;
}
.portfolioLinks__lineWrap {
margin-bottom: 8px;
height: 30px;
}
.portfolioLinks__line {
margin-top: 13.5px;
margin-right: 12px;
width: calc(100% - 42px);
}
.portfolioLinks__circle {
width: 30px;
height: 30px;
}
.portfolioLinks__socialTitle {
font-size: 18px;
line-height: 25px;
}
.portfolioLinks__underline {
display: none;
}
.portfolioContent {
display: none;
}
}
/*____________________________________________________________
## @media 848px
____________________________________________________________*/
@media only screen and (max-width: 848px) {
// Presentation
.presentation {
&.presentation_open {
.presentMain {
width: calc(100% - 110px);
}
}
}
.presentSide {
width: 110px;
}
.closeButtonWrap {
top: 40px;
width: 60px;
height: 60px;
}
.closeButtonWrap__text {
font-size: 30px;
}
.closeButtonWrap__circle {
width: 21px;
height: 21px;
}
.presentSide__title {
font-size: 48px;
}
.presentMain__article {
font-size: 16px;
&:nth-child(2) {
font-size: 24px;
}
}
.presentMain__title {
font-size: 72px;
}
@include underlineWidthMix('gwent', '60px');
@include underlineWidthMix('prado', '40px');
@include underlineWidthMix('spiele', '47px');
@include underlineWidthMix('cuphead', '57px');
@include underlineWidthMix('calculator', '57px');
@include underlineWidthMix('player', '78px');
@include underlineWidthMix('old', '60px');
@include underlineWidthMix('art', '46px');
@include underlineWidthMix('trees', '60px');
.presentMain__titleCircle {
top: -40px;
right: -80px;
width: 100px;
height: 100px;
.presentMain__text {
font-size: 18px;
}
}
// Detail Page
.detailItem__img {
width: 55%;
border: 8px solid;
}
.detailItem__info {
width: 40%;
}
.detailItem__title,
.detailItem__subtitle {
font-size: 16px;
}
.detailItem__paragraph {
display: none;
}
}
/*____________________________________________________________
## @media 768px
____________________________________________________________*/
@media only screen and (max-width: 768px) {
// Cards
.portfolioCardContent {
width: 576px;
}
.portfolioCardWrap {
width: 576px;
}
.portfolioCard {
width: 264px;
height: 369px;
padding: 20px;
margin-bottom: 48px;
margin-right: 48px;
&:nth-child(3n) {
margin-right: 48px;
}
&:nth-child(2n) {
margin-right: 0;
}
}
.portfolioCard__img {
height: 256px;
}
.portfolioCard__about {
margin-top: 20px;
}
.portfolioCard__name {
font-size: 21px;
}
.portfolioCard__technologies {
font-size: 13px;
}
// Presentation
.presentation {
&.presentation_open {
.presentSide {
width: 100%;
height: 80px;
transition-delay: .3s;
}
.closeButtonWrap {
transform: translateY(-50%) scale(1);
}
.presentMain {
width: 100%;
height: calc(100% - 80px);
}
}
}
.presentSide {
top: 0;
left: 0;
width: 0;
height: 80px;
border-right: 0;
border-bottom: 2px solid $palette-present-border;
}
.closeButtonWrap {
position: absolute;
top: 50%;
left: auto;
right: 30px;
width: 50px;
height: 50px;
transform: translateY(-50%);
}
.closeButtonWrap__circle {
width: 16px;
height: 16px;
}
.presentSide__title {
font-size: 36px;
transform: translate(-50%, -50%) scale(1, 1);
writing-mode: lr-tb;
}
.presentMain {
bottom: 0;
}
.presentMain__article {
font-size: 18px;
&:nth-child(2) {
font-size: 22px;
}
}
.presentMain__title {
font-size: 64px;
}
@include underlineWidthMix('gwent', '52px');
@include underlineWidthMix('prado', '35px');
@include underlineWidthMix('spiele', '42px');
@include underlineWidthMix('cuphead', '50px');
@include underlineWidthMix('calculator', '50px');
@include underlineWidthMix('player', '69px');
@include underlineWidthMix('old', '52px');
@include underlineWidthMix('art', '40px');
@include underlineWidthMix('trees', '53px');
.presentMain__titleCircle {
top: -40px;
right: -80px;
width: 90px;
height: 90px;
.presentMain__text {
font-size: 20px;
}
}
.presentMain__descript {
display: none;
}
.presentMain__descriptTitle {
display: none;
}
.presentMain__imgWrap {
height: 100%;
}
.presentMain__img {
width: 90%;
}
// Detail Page
.detailItem {
margin-bottom: 2vh;
margin-right: 0;
width: 100%;
height: 16vh;
}
.detailItem__img {
margin-right: 5%;
width: 35%;
border: 10px solid;
}
.detailItem__info {
width: 60%;
}
.detailItem__title,
.detailItem__subtitle {
font-size: 24px;
}
.detailItem__title {
margin-bottom: 8px;
}
.detailItem__paragraph {
font-size: 16px;
word-spacing: 10px;
line-height: 40px;
}
}
/*____________________________________________________________
## @media 642px
____________________________________________________________*/
@media only screen and (max-width: 642px) {
// Cards
.portfolioCardContent {
width: 330px;
}
.portfolioCardContent__title {
font-size: 60px;
}
.portfolioCardWrap {
width: 330px;
}
.portfolioCard {
width: 330px;
height: 450px;
padding: 25px;
margin-right: 0;
&:nth-child(3n) {
margin-right: 0;
}
}
.portfolioCard__img {
height: 320px;
}
.portfolioCard__about {
margin-top: 25px;
}
.portfolioCard__name {
font-size: 26px;
}
.portfolioCard__technologies {
font-size: 16px;
}
// Presentation
.presentMain__article {
font-size: 14px;
}
// Detail Page
@include lineInfoMix('detail', 120px, 286px);
.lineInfoWrap__left,
.lineInfoWrap__right {
font-size: 14px;
}
.lineInfoWrap__left {
margin-right: 20px;
}
.lineInfoWrap__line {
margin-top: 7px;
margin-right: 20px;
}
// Portfolio Page
@include lineInfoMix('portfolio', 136px, 262px);
}
/*____________________________________________________________
## @media 576px
____________________________________________________________*/
@media only screen and (max-width: 576px) {
// Presentation
.presentMain__article {
font-size: 12px;
&:nth-child(1) {
top: 25px;
left: 25px;
}
&:nth-child(2) {
top: 25px;
right: 25px;
font-size: 16px;
}
&:nth-child(3) {
bottom: 25px;
left: 25px;
}
&:nth-child(4) {
bottom: 25px;
right: 25px;
}
}
.presentMain__title {
font-size: 48px;
}
.presentMain__titleUnderline {
bottom: -5px;
height: 4px;
}
@include underlineWidthMix('gwent', '40px');
@include underlineWidthMix('prado', '26px');
@include underlineWidthMix('spiele', '30px');
@include underlineWidthMix('cuphead', '38px');
@include underlineWidthMix('calculator', '38px');
@include underlineWidthMix('player', '51px');
@include underlineWidthMix('old', '40px');
@include underlineWidthMix('art', '30px');
@include underlineWidthMix('trees', '40px');
.presentMain__titleCircle {
top: -35px;
right: -60px;
width: 70px;
height: 70px;
.presentMain__text {
font-size: 24px;
}
}
.presentMain__img {
border-width: 15px;
}
.detailItem__img {
border: 8px solid;
}
.portfolioImg,
.portfolioLinks {
border: 15px solid;
}
.portfolioImg_lg {
border-color: $x-color-white;
}
.portfolioImg_md {
border-color: $x-color-trefoil-crayola;
}
.portfolioLinks {
border-color: $palette-detail-rect-border;
}
// Detail Page
@include lineInfoMix('detail', 108px, 252px);
.lineInfoWrap__left,
.lineInfoWrap__right {
font-size: 12px;
}
.lineInfoWrap__line {
margin-top: 6px;
}
.detailItem__title,
.detailItem__subtitle {
font-size: 20px;
}
// Portfolio Page
@include lineInfoMix('portfolio', 122px, 230px);
}
/*____________________________________________________________
## @media 414px
____________________________________________________________*/
@media only screen and (max-width: 414px) {
// Cards
.portfolioCardContent {
margin: 45px auto 30px;
width: 264px;
}
.portfolioCardContent__title {
font-size: 45px;
}
.portfolioCardWrap {
width: 264px;
}
.portfolioCard {
width: 264px;
height: 369px;
padding: 20px;
margin-bottom: 34px;
}
.portfolioCard__img {
height: 256px;
}
.portfolioCard__about {
margin-top: 20px;
}
.portfolioCard__name {
font-size: 22px;
}
.portfolioCard__technologies {
font-size: 13px;
}
// Presentation
.presentation {
&.presentation_open {
.presentMain__content {
height: 80%;
}
}
}
.presentSide__title {
font-size: 28px;
}
.presentMain__title {
font-size: 36px;
}
.presentMain__titleUnderline {
bottom: -3px;
height: 3px;
}
@include underlineWidthMix('gwent', '30px');
@include underlineWidthMix('prado', '21px');
@include underlineWidthMix('spiele', '24px');
@include underlineWidthMix('cuphead', '30px');
@include underlineWidthMix('calculator', '30px');
@include underlineWidthMix('player', '40px');
@include underlineWidthMix('old', '30px');
@include underlineWidthMix('art', '23px');
@include underlineWidthMix('trees', '30px');
.presentMain__titleCircle {
top: -30px;
right: -50px;
width: 60px;
height: 60px;
}
// Detail Page
.detailItem__title,
.detailItem__subtitle {
font-size: 18px;
}
}
/*____________________________________________________________
## @media 375px
____________________________________________________________*/
@media only screen and (max-width: 375px) {
// Presentation
// Presentation
.presentation {
&.presentation_open {
.presentSide {
height: 70px;
}
.closeButtonWrap {
}
.presentMain {
height: calc(100% - 70px);
}
}
}
.presentSide__title {
font-size: 24px;
}
.closeButtonWrap {
right: 20px;
width: 45px;
height: 45px;
}
.closeButtonWrap__text {
font-size: 32px;
}
.closeButtonWrap__circle {
width: 15px;
height: 15px;
}
.presentMain__img {
border-width: 10px;
}
.detailItem__img {
border: 6px solid;
}
.portfolioImg,
.portfolioLinks {
border: 10px solid;
}
.portfolioImg_lg {
border-color: $x-color-white;
}
.portfolioImg_md {
border-color: $x-color-trefoil-crayola;
}
.portfolioLinks {
border-color: $palette-detail-rect-border;
}
// Detail Page
.detailItem__title,
.detailItem__subtitle {
font-size: 14px;
}
}
/*____________________________________________________________
## @media 320px
____________________________________________________________*/
@media only screen and (max-width: 320px) {
// Cards
.portfolioCardContent {
margin: 35px auto 24px;
width: 198px;
}
.portfolioCardContent__title {
font-size: 35px;
}
.portfolioCardWrap {
width: 198px;
}
.portfolioCard {
width: 198px;
height: 279px;
padding: 15px;
margin-bottom: 30px;
}
.portfolioCard__img {
height: 192px;
}
.portfolioCard__about {
margin-top: 15px;
}
.portfolioCard__name {
font-size: 16px;
}
.portfolioCard__technologies {
font-size: 10px;
}
// Presentation
.presentSide__title {
font-size: 20px;
}
.presentMain__article {
font-size: 10px;
&:nth-child(1) {
top: 15px;
left: 20px;
}
&:nth-child(2) {
top: 15px;
right: 20px;
font-size: 16px;
}
&:nth-child(3) {
bottom: 15px;
left: 20px;
}
&:nth-child(4) {
bottom: 15px;
right: 20px;
}
}
.presentMain__title {
font-size: 28px;
}
.presentMain__titleUnderline {
height: 2px;
}
@include underlineWidthMix('gwent', '23px');
@include underlineWidthMix('prado', '16px');
@include underlineWidthMix('spiele', '18px');
@include underlineWidthMix('cuphead', '23px');
@include underlineWidthMix('calculator', '23px');
@include underlineWidthMix('player', '30px');
@include underlineWidthMix('old', '23px');
@include underlineWidthMix('art', '18px');
@include underlineWidthMix('trees', '23px');
.presentMain__titleCircle {
top: -30px;
right: -40px;
width: 50px;
height: 50px;
}
// Detail Page
@include lineInfoMix('detail', 87px, 206px);
.lineInfoWrap__left,
.lineInfoWrap__right {
font-size: 10px;
}
.lineInfoWrap__left {
margin-right: 15px;
}
.lineInfoWrap__line {
margin-top: 5px;
margin-right: 15px;
}
// Portfolio Page
@include lineInfoMix('portfolio', 98px, 189px);
.portfolioImg_md {
display: none;
}
.portfolioLinks__socialTitle {
margin-bottom: 30px;
font-size: 32px;
}
.portfolioLinks__socialItem {
margin-bottom: 30px;
width: 115px;
height: 30px;
}
.portfolioLinks__icon {
margin-right: 30px;
width: 30px;
height: 30px;
}
.portfolioLinks__name {
font-size: 18px;
}
.portfolioLinks {
height: 100%;
border-color: $palette-detail-rect-border;
}
}
/*____________________________________________________________
## @media iPad (min-width: 767px) and (max-width: 1025px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 767px) and (max-width: 1025px) and (orientation: portrait) {
// Presentation
.presentation {
&.presentation_open {
.presentSide {
width: 100%;
height: 110px;
transition-delay: .3s;
}
.closeButtonWrap {
transform: translateY(-50%) scale(1);
}
.presentMain {
width: 100%;
height: calc(100% - 110px);
}
}
}
.presentSide {
top: 0;
left: 0;
width: 0;
height: 110px;
border-right: 0;
border-bottom: 2px solid $palette-present-border;
}
.closeButtonWrap {
position: absolute;
top: 50%;
left: auto;
right: 30px;
transform: translateY(-50%);
}
.presentSide__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1, 1);
writing-mode: lr-tb;
}
.presentMain {
bottom: 0;
}
.presentMain__article {
font-size: 24px;
}
.presentMain__descriptTitle {
font-size: 24px;
}
.presentMain__img {
width: 90%;
}
// Detail Page
@include lineInfoMix('detail', 196px, 482px);
.lineInfoWrap__left,
.lineInfoWrap__right {
font-size: 24px;
}
.lineInfoWrap__left {
margin-right: 30px;
}
.lineInfoWrap__line {
margin-top: 12px;
margin-right: 30px;
}
.detailItem {
margin-bottom: 2vh;
margin-right: 0;
width: 100%;
height: 16vh;
}
.detailItem__img {
margin-right: 5%;
width: 35%;
border: 10px solid;
}
.detailItem__info {
width: 60%;
}
.detailItem__title,
.detailItem__subtitle {
font-size: 24px;
}
.detailItem__paragraph {
font-size: 16px;
word-spacing: 10px;
line-height: 40px;
}
// Portfolio Page
@include lineInfoMix('portfolio', 223px, 440px);
.portfolioInfoWrap {
height: 70%;
}
.portfolioImg,
.portfolioLinks {
width: 100%;
border: 15px solid;
}
.portfolioImg_lg {
display: none;
}
.portfolioImg_md {
height: 40%;
border-color: $x-color-trefoil-crayola;
}
.portfolioLinks {
margin-bottom: 2.5%;
height: 57.5%;
border-color: $palette-detail-rect-border;
}
.portfolioLinks__lineWrap {
margin-bottom: 8px;
height: 30px;
}
.portfolioLinks__line {
margin-top: 13.5px;
margin-right: 12px;
width: calc(100% - 42px);
}
.portfolioLinks__circle {
width: 30px;
height: 30px;
}
.portfolioLinks__socialTitle {
margin-bottom: 30px;
font-size: 32px;
}
.portfolioLinks__socialItem {
margin-bottom: 30px;
width: 115px;
height: 30px;
}
.portfolioLinks__icon {
margin-right: 30px;
width: 30px;
height: 30px;
}
.portfolioLinks__name {
font-size: 18px;
}
.portfolioLinks__underline {
bottom: 15px;
}
.portfolioContent {
display: none;
}
}let cardWrap = document.querySelector('.portfolioCardWrap');
let popupMenu = document.querySelector('.popupMenu');
let revealer = new RevealFx(popupMenu);
let wrap = document.querySelector('.presentation');
let titleVertical = document.querySelector('.presentSide__title');
let mainTitle = document.querySelector('.presentMain__title');
let demoLink = document.querySelector('.presentMain__demoLink');
let descriptTitle = document.querySelector('.presentMain__descriptTitle');
let descriptParagraph = document.querySelector('.presentMain__descriptParagraph');
let githubPage = document.querySelector('.lineInfoWrap__detailGithub');
let detailTitle_1 = document.querySelector('.js-detailItem__title_1'),
detailSubtitle_1 = document.querySelector('.js-detailItem__subtitle_1'),
detailParagraph_1 = document.querySelector('.js-detailItem__paragraph_1'),
detailTitle_2 = document.querySelector('.js-detailItem__title_2'),
detailSubtitle_2 = document.querySelector('.js-detailItem__subtitle_2'),
detailParagraph_2 = document.querySelector('.js-detailItem__paragraph_2'),
detailTitle_3 = document.querySelector('.js-detailItem__title_3'),
detailSubtitle_3 = document.querySelector('.js-detailItem__subtitle_3'),
detailParagraph_3 = document.querySelector('.js-detailItem__paragraph_3'),
detailTitle_4 = document.querySelector('.js-detailItem__title_4'),
detailSubtitle_4 = document.querySelector('.js-detailItem__subtitle_4'),
detailParagraph_4 = document.querySelector('.js-detailItem__paragraph_4');
let presentPage = document.querySelector('.presentMain'),
closeButton = document.querySelector(".closeButtonWrap");
let projectInfoArray = {
0: {
wrapClass: 'presentation_gwent',
title: 'Gwent.',
demoHref: 'https://kerthin.github.io/gwentReact-templateSait/',
descriptTitle: 'Create the best <br/> card deck',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/gwentReact-templateSait',
detailTitle_1: 'Fillac Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
1: {
wrapClass: 'presentation_prado',
title: 'Prado.',
demoHref: 'https://kerthin.github.io/pradoMuseum-templateSait/',
descriptTitle: 'Learning the best artists',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/pradoMuseum-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
2: {
wrapClass: 'presentation_spiele',
title: 'Spiele.',
demoHref: 'https://kerthin.github.io/computerSpieleMuseum-templateSait/',
descriptTitle: 'Dive into the past of your<br/>favorite video games.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/computerSpieleMuseum-templateSait',
detailTitle_1: 'Fillas Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
3: {
wrapClass: 'presentation_cuphead',
title: 'Cuphead.',
demoHref: 'https://kerthin.github.io/cuphead-templateSait/',
descriptTitle: "Don't Deal with<br/>the Devil.",
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/cuphead-templateSait',
detailTitle_1: 'Fillad Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
4: {
wrapClass: 'presentation_calculator',
title: 'Calculator.',
demoHref: 'https://kerthin.github.io/calculator-templateSait/',
descriptTitle: 'Add, divide, multiply and<br/>subtract any number.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/calculator-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
5: {
wrapClass: 'presentation_player',
title: 'Music.',
demoHref: 'https://kerthin.github.io/musicPlayer-templateSait/',
descriptTitle: 'Listen to your favorite songs<br/>on our music player.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/musicPlayer-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
6: {
wrapClass: 'presentation_old',
title: 'Oldsmobile.',
demoHref: 'https://kerthin.github.io/retroCars-templateSait/',
descriptTitle: 'The era when cars<br/>were created by artists.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/retroCars-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
7: {
wrapClass: 'presentation_art',
title: 'artGallery.',
demoHref: 'https://kerthin.github.io/artGallery-templateSait/',
descriptTitle: 'Artists who have contributed<br/>to the world of art.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/artGallery-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
8: {
wrapClass: 'presentation_trees',
title: 'Geometric.',
demoHref: 'https://kerthin.github.io/trees-templateSait/',
descriptTitle: 'Feel the geometry<br/>in our nature.',
descriptParagraph: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae omnis reiciendis dignissimos cum, rem temporibus, consequatur ad ut facilis aspernatur deserunt dolore quidem cumque odit quo repudiandae veritatis enim, maiores soluta, repellendus!',
github: 'https://github.com/Kerthin/trees-templateSait',
detailTitle_1: 'Fillaf Andini',
detailSubtitle_1: 'UI/UX Designer',
detailParagraph_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_2: 'Hils Joe',
detailSubtitle_2: 'Editor',
detailParagraph_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_3: 'Werfa Egle',
detailSubtitle_3: 'Content Creator',
detailParagraph_3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
detailTitle_4: 'Andinosas',
detailSubtitle_4: 'Marketing',
detailParagraph_4: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, distinctio.',
},
};
let portfolioCard = document.getElementsByClassName("portfolioCard");
for (let i = 0; i < portfolioCard.length; i++) {
portfolioCard[i].addEventListener(
"click",
function (i) {
wrap.classList.add(projectInfoArray[i].wrapClass);
titleVertical.innerHTML = projectInfoArray[i].title;
mainTitle.innerHTML = projectInfoArray[i].title;
demoLink.setAttribute("href", projectInfoArray[i].demoHref);
descriptTitle.innerHTML = projectInfoArray[i].descriptTitle;
descriptParagraph.innerHTML = projectInfoArray[i].descriptParagraph;
githubPage.setAttribute("href", projectInfoArray[i].github);
detailTitle_1.innerHTML = projectInfoArray[i].detailTitle_1;
detailSubtitle_1.innerHTML = projectInfoArray[i].detailSubtitle_1;
detailParagraph_1.innerHTML = projectInfoArray[i].detailParagraph_1;
detailTitle_2.innerHTML = projectInfoArray[i].detailTitle_2;
detailSubtitle_2.innerHTML = projectInfoArray[i].detailSubtitle_2;
detailParagraph_2.innerHTML = projectInfoArray[i].detailParagraph_2;
detailTitle_3.innerHTML = projectInfoArray[i].detailTitle_3;
detailSubtitle_3.innerHTML = projectInfoArray[i].detailSubtitle_3;
detailParagraph_3.innerHTML = projectInfoArray[i].detailParagraph_3;
detailTitle_4.innerHTML = projectInfoArray[i].detailTitle_4;
detailSubtitle_4.innerHTML = projectInfoArray[i].detailSubtitle_4;
detailParagraph_4.innerHTML = projectInfoArray[i].detailParagraph_4;
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'rl',
duration: 700,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.add('js-popupMenu_open');
contentEl.style.opacity = 1;
}
});
setTimeout(() => {
cardWrap.classList.add('portfolioCardWrap_eventsNone');
}, 250);
}.bind(null, i)
);
}
presentPage.addEventListener(
"click",
function (i) {
wrap.classList.add("presentation_open");
}
);
closeButton.addEventListener(
"click",
function (i) {
popupMenu.classList.remove('js-popupMenu_open');
wrap.classList.remove('presentation_open');
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'lr',
duration: 700,
delay: 1200,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.remove('js-popupMenu_open');
contentEl.style.opacity = 0;
}
});
setTimeout(() => {
demoLink.setAttribute("href", "");
wrap.setAttribute("class", "presentation");
cardWrap.classList.remove('portfolioCardWrap_eventsNone');
}, 2550);
}
);
External CSS
This Pen doesn't use any external CSS resources.