Skip to content

Commit

Permalink
feat(*): updating to version 1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Laszlo Heves authored Apr 27, 2017
2 parents 4fdf87d + 4241d61 commit f01cc92
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 62 deletions.
6 changes: 3 additions & 3 deletions assets/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/styles.css

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

20 changes: 12 additions & 8 deletions src/components/App/index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
import React from 'react';
import Navigation from '../Navigation';
import Portfolio from '../Portfolio';
import '../../styles.scss';


export default class App extends React.Component {
render() {
return (
<div className="container">
<main className="main">
<section className="about">
<h1><span className="emphasis">👋🏻 Hello,</span> my name is Laszlo Heves.</h1>
<blockquote>I have eight years of experience building medium and large sized websites and web applications. I am specialized in creating user facing features from UX planning through site-building to deployment.</blockquote>
</section>
<Portfolio/>
</main>
<div>
<Navigation />
<div className="container">
<main className="main">
<section className="about">
<h1><span className="emphasis">👋🏻 Hello,</span> my name is Laszlo Heves.</h1>
<blockquote>I'm a Senior Frontend Developer with eight years of experience building medium and large sized websites and web applications with an emphasis on developing user interface related features from UX planning through site-build to deployment.</blockquote>
</section>
<Portfolio/>
</main>
</div>
</div>);
}
}
17 changes: 17 additions & 0 deletions src/components/Navigation/index.js

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

14 changes: 8 additions & 6 deletions src/components/Portfolio/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,21 @@ export default class Portfolio extends React.Component {
<h1>Here is what I have been working on recently:</h1>
<div className="portfolio__content">
<PortfolioItem title="Site sections" />
<PortfolioItem title="UI Kit" />
<PortfolioItem title="Navigation update" />
<PortfolioItem title="Commerce insets" />
<PortfolioItem title="UI Kit" url="http://kinja.com/ui-kit/new"/>
<PortfolioItem title="Navigation update" url="http://gizmodo.com"/>
<PortfolioItem title="Commerce insets" link="http://deals.kinja.com/convert-sunlight-into-a-full-phone-battery-with-ankers-1794623844"/>
<PortfolioItem title="Stripe integration" />
<PortfolioItem title="User Profile page" />
<PortfolioItem title="User Profile page" url="https://kinja.com/ashleyfeinberg" />
<PortfolioItem title="Channels project" />
<PortfolioItem title="SSO admin tools" />
<PortfolioItem title="Leanvocab REST API" url="http://leanvocab.herokuapp.com/"/>
<PortfolioItem title="Settings page" />
<PortfolioItem title="Comment Flagging tools" />
<PortfolioItem title="Checkout process" />
<PortfolioItem title="Checkout process" url="https://www.harrods.com/NewCheckoutCart.aspx" />
<PortfolioItem title="Online fashion magazine" />
<PortfolioItem title="Mortgage calculator" />
<PortfolioItem title="Video landing pages" />
<PortfolioItem title="IVR" />
<PortfolioItem title="IVR system" />
</div>
</section>
);
Expand Down
27 changes: 20 additions & 7 deletions src/components/Portfolio/item.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import React from 'react';

export default function PortfolioItem(props) {
return (
<div className="portfolio__item">
{props.title}
</div>
);
}
export default class PortfolioItem extends React.Component {
constructor(props) {
super(props);

this.clickHandler = this.props.url ? this.clickHandler.bind(this) : () => true;
}

clickHandler() {
window.open(this.props.url, '_blank');
}

render() {
const activeClass = this.props.url ? 'portfolio__item--active': '';
return (
<div onClick={this.clickHandler} className={`portfolio__item ${activeClass}`}>
{this.props.title}
</div>
);
}
}
72 changes: 35 additions & 37 deletions src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,8 @@ $mobile-up-bottom: 740px;
@mixin textTreatement {
font-family: $primary-font;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes levitation {
0% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
50% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

@keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
text-shadow: 0 1px 2px rgba(122, 122, 122, 0.5);
letter-spacing: 0.5px;
}

html,
Expand All @@ -55,6 +34,28 @@ body {
flex-direction: column;
}

.navigation {
position: absolute;
top: 0;
right: 0;
display: flex;
height: 50px;
padding-top: 20px;
padding-right: 20px;
justify-content: flex-end;

@media (min-width: $mobile-up-bottom) {
position: fixed;
}

&__navitem {
fill: #fff;
width: 32px;
height: 32px;
margin-left: 20px;
}
}

.about {
min-height: 100vh;
display: flex;
Expand Down Expand Up @@ -83,7 +84,7 @@ body {
margin-right: 0;

@media (min-width: $mobile-up-bottom) {
max-width: 80%;
max-width: 90%;
font-size: 24px;
}
}
Expand All @@ -102,27 +103,24 @@ body {
}

&__item {
cursor: pointer;
cursor: default;
color: #ffffff;
font-family: "Helvetica Neue";
text-transform: uppercase;
border: 5px solid #fff;
border: 5px solid rgba(#fff, 0.5);
padding: 10px 26px;
margin-bottom: 20px;
text-align: center;
transform: translateY(6px);
transition: color, background 300ms;

&:hover {
animation-name: hvr-bob-float,levitation;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
animation-timing-function: ease-out, ease-in-out;
color: $base-color;
background-color: #ffffff;
&--active {
cursor: pointer;
border-color: #fff;

&:hover {
background-color: #fff;
color: $base-color;
}
}
}
}

0 comments on commit f01cc92

Please sign in to comment.