dvbXLP

dvbxlp.markdown

Web CV

A Pen by Damian on CodePen.

License.

index.html

<div id="app"></app>

script.babel

class Page extends React.Component {
	render() {
		return (
			<div className="page">
		  		{this.props.children}
			</div>
		);
	}
}

class TwoColumnsItem extends React.Component {
	render() {
		const {timeline, content, responsibilites = []} = this.props;
		return (
			<div className="two-columns">
				<div className="timeline">
					{timeline}
				</div>
				<div className="column-content">
					{content}
					{responsibilites.map((responsibility) => {
					return (
						<li key={responsibility} className="responsibility">
							<span>{responsibility}</span>
						</li>
					)
				})}
				</div>
			</div>
		);
	}
}

class Main extends React.Component {
  render() {
    return (
	  <div className="main">
			<Page>
				<div className="slope-content"/>
				<div className="cv-content slope-left">
					<div className="title-wrapper">
						
						<div className="title">CV</div>
						<div className="profile-picture"/>
						<div className="profile-quote">"Chciałbym poszerzyć swoją wiedzę o środowisku javascriptowym,
w szczególności o bibliotekach takich jak React.js i Redux"</div>
						
					</div>
					<div className="contact">
						<div className="section-heading">Informacje</div>
						<div className="contact-categories-wrapper">
							<div className="contact-category">
								<i className="fa fa-user contact-category-title" aria-hidden="true"></i>
								<div className="contact-item">Damian Michalski</div>
								<div className="contact-item">23 lata</div>
								<div className="contact-item">Kraków</div>
							</div>
							<div className="contact-category">
								<i className="fa fa-phone contact-category-title" aria-hidden="true"></i>
								<div className="contact-item">667947500</div>
								<div className="contact-item">dammic6988@gmail.com</div>
								<div className="contact-item">github.com/Dammic</div>
							</div>
						</div>
					</div>
					<div className="education">
						<div className="section-heading">Edukacja</div>
						<TwoColumnsItem timeline="od 2013"
							content="Studia licencjackie na Wydziale Matematyki i Informatyki Uniwersytetu Jagiellońskiego. Specjalność: informatyka stosowana."
							/>
						<TwoColumnsItem timeline="2010 - 2013"
							content="I Liceum im. Mikołaja Kopernika w Jarosławiu, profil matematyczno-informatyczny"/>
					</div>

					<div className="experience">
						<div className="section-heading">Doświadczenie</div>
							<TwoColumnsItem timeline="17 sierpnia 2016 - 16 luty 2017"
							content="Stażysta - Javascript Developer w firmie Dreamlab. Bardzo duży wzrost jakości pisanego kodu. Realizowane były m.in.:"
							responsibilites={[
								"Stworzenie niezależnego komponentu wyszukiwarki dla nowego systemu CMS, uwzględniając frontend, backend, dokumentację oraz testy (react, redux, nodejs, gulp, html, scss, ES6),",
								"praca w środowisku AGILE i utrzymywanie wielu repozytoriów Git,",
								"usprawienie konfiguracji środowiska developerskiego Zumi.pl (salt),",
								"stworzenie testów funkcjonalnych dla aplikacji Zumi.pl (Selenium),",
								"Stworzenie nowego produktu opartego na responsywnych layoutach, oparte o przygotowane projekty graficzne i funkcjonalne (bootstrap, jquery)"
							]}


								/>
						<TwoColumnsItem timeline="listopad 2015 - sierpień 2016"
							content="Stworzenie kilku niezależnych mniejszych aplikacji webowych i mobilnych (projekty osobiste), opartych o takie technologie jak node.js, angularJS (v1), sass, grunt, gulp, webpack, java, android (dostępne na Github, jednak już przestarzałe jakościowo)"
							/>
					</div>
				</div>
			</Page>
	
			<Page>
				<div className="cv-content slope-right">
					<div className="highlights">
						<div className="section-heading">Wyróżnione umiejętności</div>
						<div className="skill-bubbles-container">
							<div className="skill-bubble">JavaScript</div>
							<div className="skill-bubble">HTML5</div>
							<div className="skill-bubble">SASS</div>
							<div className="skill-bubble">CSS</div>
							<div className="skill-bubble">ES6</div>
							<div className="skill-bubble">Node.js</div>
							<div className="skill-bubble">React.js</div>
							<div className="skill-bubble">Redux</div>
							<div className="skill-bubble">MongoDB</div>
							<div className="skill-bubble">Git</div>
							<div className="skill-bubble">Web development</div>
							<div className="skill-bubble">Bootstrap</div>
							<div className="skill-bubble">JQuery</div>
						</div>
					</div>
					<div className="others">
						<div className="section-heading">Inne</div>
						<div className="others-list">
							<li><span>Znane języki: polski (ojczysty), angielski (dobra znajomość w mowie i w piśmie (B2+))</span></li>
							<li><span>Zaintersowania: web development, gry komputerowe, rysunek, gotowanie</span></li>
						</div>
						
					</div>
					
					<div className="footer">
						<span>To CV zostało stworzone za pomocą React.js oraz sass. ©2017 Damian Michalski</span>
						<span>Link do wersji webowej CV: <a>http://cdpn.io/dvbXLP</a></span>
						<span>Linkedin: <a>https://www.linkedin.com/in/damian-michalski-901814122/</a></span>
					</div>
				</div>
				
				
				<div className="slope-content"/>
			</Page>
	  </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
React.render(
	<Main />
  , document.getElementById('app'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

style.scss

html, body {
	font-family:  'Alegreya', serif;
}

li {
	list-style-type: square;
	margin-left: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
	span {
		margin-left: -5px;
	}
}

.page {
	display: flex;
	flex-direction: row;
	height:297mm;
  width:210mm;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
	.slope-content {
		background-image: url("https://www.billigerluxus.de/documents/image/14/149474/Vliestapete--Design--modern--grau--silber--Tapeten.jpg");
		background-repeat:no-repeat;
		background-position: center center;
	    width: 200px;
		min-width: 200px;
		height: 100%;
	}
	.cv-content {
		background-color: #201F1D;
		height: 100%;
		width: 100%;
		position: relative;
    z-index: 1;
		color: #D8CACA;
		padding: 20px;
		
		.title {
			font-size: 36px;
			border-bottom: 1px solid #D8CACA;
			width: auto;
			position: relative;
			width: 80px;
		}
		.profile-picture {
			position: absolute;
			top: 10px;
			right: 20px;
			height: 100px;
			width: 90px;
			background-image: url("https://s31.postimg.org/mz3kau523/photo_Copy.jpg");
			background-size: cover;
			background-position: center center;
		}
		.profile-quote {
			position: absolute;
			top: 50px;
			right: 130px;
			max-width: 300px;
			font-style: italic;
			font-size: 13px;
		}
		
		
		
		.contact {
			width: 101%;
			padding-top: 40px;
			.contact-categories-wrapper {
				flex-direction: row;
				display: flex;
			  justify-content: center;
				
			  padding-top: 20px;
				.contact-category {
					margin-right: 30px;
					text-align: left;
					padding: 15px;
					background-color: #333333;
					&:last-child {
						margin-right: 0;
					}
					.contact-category-title {
						font-size: 24px;
						padding-bottom: 10px;
					}

					.contact-item {
						padding-bottom: 5px;
					}
				}
			}
		}
		
		.section-heading {
			font-size: 24px;
			border-bottom: 1px solid #666666;
			padding-bottom: 5px;
		}
		
		.education {
			padding-top: 20px;
			width: 105%;
			margin-left: -20px;
		}
		
		.experience {
			padding-top: 20px;
			width: 108%;
			margin-left: -35px;
		}
		
		.highlights{
			padding-top: 20px;
			width: 118%;
			margin-right: -55px;
			.skill-bubbles-container{
				margin-top: 15px;
				.skill-bubble {
					margin-left: 10px;
					margin-bottom: 10px;
					display: inline-flex;
					align-items: center;
					padding: 10px 15px 10px 15px;
					background-color: #333333;
				}
			}
		}
		
		.others {
			padding-top: 20px;
			width: 115%;
			margin-right: -55px;
			.others-list {
				margin: 15px 15px 15px 0;
			}
		}
		
		.two-columns {
			display: flex;
			justify-content: space-between;
			margin: 20px 20px 0 10px;
			line-height: 1.2em;
			.timeline {
				max-width: 120px;
			}
			
			.column-content {
				max-width: 380px;
				text-align: left;
				width: 100%;
			}
			
		}
	}
	.slope-right {
		&:after {
		  background: inherit;
		  top: 0;
			content: '';
			display: block;
			height: 50%;
			right: -60px;
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			transform: skew(-4deg);
			box-shadow: 20px 0px 25px -10px rgba(0, 0, 0, 0.75);
		}
	}
	
	.slope-left {
		&:before {
		  background: inherit;
		  top: 0;
			content: '';
			display: block;
			height: 50%;
			left: -40px;
			position: absolute;
			right: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			transform: skew(-4deg);
			box-shadow: -20px 0px 25px -10px rgba(0, 0, 0, 0.75)
		}
	}
}


.footer {
	line-height: 1.5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #101010;
	height: 100px;
	width: 210mm;
	margin-left: -20px;
	margin-right: -20px;
	position: absolute;
	bottom: 40px;
	color: #8E8E8E;
	a {
		color: #DAA544;
	}
	
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Alegreya:400,400i,700" rel="stylesheet" />