Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save linuxenko/301b30f5445f30cf6a72 to your computer and use it in GitHub Desktop.

Select an option

Save linuxenko/301b30f5445f30cf6a72 to your computer and use it in GitHub Desktop.
A Personal Portfolio Webpage [freeCodeCamp [Basic Projects]] (Challenge)

A Personal Portfolio Webpage [freeCodeCamp [Basic Projects]] (Challenge)

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/VemmoX/. Rule #1: Don't look at the example project's code. Figure it out for yourself. Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style. User Story: I can access all of the portfolio webpage's content just by scrolling. User Story: I can click different buttons that will take me to the portfolio creator's different social media pages. User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.) User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.

A Pen by Svetlana Linuxenko on CodePen.

License.

<div id="main-wrapper" class="wrapper">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="main-block">
<div class="header">
<img alt="Svetlana Linuxenko" src="https://s.gravatar.com/avatar/92b887209f23f882ff0473a183894d5d?s=90&r=pg" />
<h1>Svetlana Linuxenko</h1>
<h4 class="hl"><span class="base-red">Front-end</span> developer</h4>
<div class="slogan hl">
<span>&laquo;Most programmers spend the first five years of their career mastering complexity and the rest of their lives learning simplicity&raquo;</span>
</div>
</div>
<a name="home"></a>
<div class="clearfix"></div>
</div>
<a name="projects"></a>
<br /><br />
<div class="clearfix"></div>
<div class="main-block just-block"> <!-- recent -->
<div class="portfolio">
<div class="header">
<h1>Recent Projects</h1>
</div>
<div class="project">
<br />
<div class="hidden-xs">
<br />
<br />
</div>
<p>
Portfolio of the projects i really proud to show. <br />
In general it is a web applications.
</p>
</div>
<br />
<div class="hidden-xs">
<br />
</div>
<div class="container projects-list">
<div class="hidden-xs">
<br />
<br />
</div>
<div class="col-md-4">
<a class="reverse" href="http://www.linuxenko.pro/dist/0.1/assets/img/bank-freebank.png" alt="freebank">
<img class="img-main" alt="freebank" src="http://www.linuxenko.pro/dist/0.1/assets/img/bank-freebank.png" />
<span class="desc">
<span></span>
#freebank (Bank Dnepr) single page website.
</span>
</a>
<div class="clearfix"></div>
</div>
<div class="col-md-4">
<a href="http://www.linuxenko.pro/dist/0.1/assets/img/quizz-allwomenstalk.png" alt="quizz-allwomenstalk">
<span class="desc">
Quizz , Google spreadsheet based application.
<span></span>
</span>
<img class="img-main" alt="quizz-allwomenstalk" src="http://www.linuxenko.pro/dist/0.1/assets/img/quizz-allwomenstalk.png" />
</a>
<div class="clearfix"></div>
</div>
<div class="col-md-4">
<a class="reverse" href="http://www.linuxenko.pro/dist/0.1/assets/img/tv-allwomenstalk.png" alt="allwomenstalk.tv">
<img class="img-main" alt="allwomenstalk.tv" src="http://www.linuxenko.pro/dist/0.1/assets/img/tv-allwomenstalk.png" />
<span class="desc">
<span></span>
Allwomenstalk.tv video application project.
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
<div class="hidden-xs">
<br />
<br />
</div>
<div class="clearfix"></div>
<a class="btn btn-block btn-social btn-linkedin" href="http://ua.linkedin.com/in/linuxenko/">
<i class="fa fa-linkedin"></i> More details
</a>
</div><a name="about"></a>
</div> <!-- recent -->
<div class="main-block just-block"> <!-- exp -->
<div class="exp-wrap">
<div class="experience container">
<h1 class="text-center hl">About</h1>
<br /><br /><br />
<div class="col-md-12">
<div class="base-block-1">
<p>More than 3 years of experience in Enterprise Web Applications development with about 8 years of web development background. <p />
I like to develop software that solves people's needs, demonstrate management expertise in software design and development as well as in formulating customized business solutions that improve productivity, quality, and customer satisfaction.
<br /><br />
<ul>
<li>Solid back-end development background and knowledge of the development tools such as nodejs, rails and java.</li>
<li>Deep knowledge of the standards and protocols web based on.</li>
<li>Development using modern technologies with compatibility and backward compatibility in mind.</li>
<li>Experienced in deployment, support, security and HA solutions.</li>
</ul>
</div>
</div>
<br />
<div class="clearfix"></div>
<div class="hidden-xs">
<br />
<br />
</div>
<div class="info-blocks">
<div class="col-md-4">
<div class="base-font-heading-1 text-center"><span class="fa fa-html5 hl"></span>&nbsp;
<span class="base-font-heading-3 hl">html5</span>
</div>
<div class="base-block-1">
<ul>
<li><abbr class="base-tooltip" title="WebSocket is a protocol providing full-duplex communications channels over a single TCP connection" href="javascript:void(0)">WebSocket</abbr> applications.</li>
<li><abbr class="base-tooltip" title="The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images" href="javascript:void(0)">Canvas</abbr> based games and applications.</li>
<li><abbr class="base-tooltip" title="Web application software methods and protocols used for storing data in a web browser" href="javascript:void(0)">Web storage</abbr> caching strategies.</li>
<li>Performance tuning with <abbr class="base-tooltip" title="Web workers are able to utilize multi-core CPUs more effectively" href="javascript:void(0)">Workers</abbr>.</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="base-font-heading-1 text-center"><span class="fa fa-css3 hl"></span>&nbsp;
<span class="base-font-heading-3 hl">css3</span>
</div>
<div class="base-block-1">
<ul>
<li>Compatibility with older versions.</li>
<li>Minimal sprite set approach.</li>
<li>Media queries and <abbr class="base-tooltip" title="Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)" href="javascript:void(0)">RWD.</abbr></li>
<li>Hardware accelerated animations.</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="base-font-heading-1 text-center"><span class="fa fa-code hl"></span>&nbsp;
<span class="base-font-heading-3 hl">JS</span>
</div>
<div class="base-block-1">
<ul>
<li>Strong OOP</li>
<li><abbr class="base-tooltip" title="This specification addresses how modules should be written in order to be interoperable among a class of module systems that can be both client and server side" href="javascript:void(0)">AMD</abbr> compatiable modules</li>
<li>MVC design with common patterns</li>
<li>DRY &amp; no wheel reinventing(deferreds, events).</li>
</ul>
</div>
</div>
</div>
</div>
<br /><br /><br />
</div> <!-- exp-wrap -->
</div> <!-- exp -->
<div class="clearfix"></div>
<div class="main-block just-block">
<div class="experiments">
<div class="header">
<h1>Experiments and Projects</h1>
</div>
<br /><br /><br />
</div>
<div class="exp-header">
<a href="http://www.linuxenko.pro/dist/0.1/assets/img/linuxenko.pro.png" alt="linuxenko.pro">
<img class="img-main" alt="linuxenko.pro" src="http://www.linuxenko.pro/dist/0.1/assets/img/linuxenko.pro.png" />
</a>
</div>
<br />
<div class="hidden-xs">
<br />
</div>
<div class="experiments">
<div class="container">
<div class="col-md-6 text-left cakejs-desc">
<div class="col-md-12 text-center">
<img alt="cakejs" src="http://www.linuxenko.pro/dist/0.1/assets/files/cakejs.png" />
</div>
<div class="col-md-12">
<h2 class="text-center">CakeJS</h2>
<p>CakeJS is a web application, single page application development framework with AMD, Templating and routing support.</p>
<a href="https://github.com/linuxenko/cakejs">read more..</a>
</div>
</div>
<div class="col-md-6 text-left exp-desc">
<div class="col-md-12 text-center">
<i class="fa fa-github-alt"></i>
</div>
<div class="col-md-12">
<h2 class="text-center">Experiments page</h2>
<p>Project entirely dedicated to experimental features and front-end development science.
</p>
<a href="https://linuxenko.github.io">read more..</a>
</div>
</div>
</div>
<div class="hidden-xs">
<br />
<br />
</div>
<div class="clearfix"></div>
<a class="btn btn-block btn-social btn-github" href="https://github.com/linuxenko">
<i class="fa fa-github"></i> More details
</a>
</div>
</div>
<div class="clearfix"></div>
<div class="main-block no-margin contacts">
<a name="contact"></a>
<div class="share">
<h1>Share this page</h1>
<p>
<a class="btn btn-social-icon btn-google-plus" target=_blank href="https://plus.google.com/share?url=http://linuxenko.pro"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" target=_blank href="https://www.facebook.com/sharer/sharer.php?u=http://linuxenko.pro"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-pinterest" target=_blank href="https://pinterest.com/pin/create/button/?url=http://linuxenko.pro&media=http://linuxenko.pro/assets/img/banner.png&description=Svetlana%20Linuxenko"><i class="fa fa-pinterest"></i></a>
<a class="btn btn-social-icon btn-linkedin" target=_blank href="https://www.linkedin.com/shareArticle?mini=true&url=http://linuxenko.pro&title=Svetlana%20Linuxenko&summary=&source="><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" target=_blank href="https://twitter.com/home?status=Svetlana%20Linuxenko%0Ahttp://linuxenko.pro"><i class="fa fa-twitter "></i></a>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<canvas id="canv" width="2000" height="9000" style="display:none;"></canvas>
<script>!function(a){var b=a.Engine||{};!function(a){a.DecorScene=function(a){if("undefined"==typeof a)throw"No Scene provided";this.scene=a,this.dim={sx:30,sy:30},this.setup().refresh()},a.DecorScene.prototype.setup=function(){var a=this.scene.ctx;return a.clearRect(0,0,this.scene.width,this.scene.height),a.fillStyle="transparent",this},a.DecorScene.prototype.refresh=function(){var a=this.scene.ctx;a.beginPath();var b=1970;return a.moveTo(b,0),a.strokeStyle="rgba(0,0,0,0.2)",a.lineWidth="6",a.bezierCurveTo(b,400,100*Math.random(),0,-400,400*Math.random()),a.stroke(),a.beginPath(),cL=b-100*Math.random(),a.moveTo(cL,0),a.strokeStyle="rgba(208,31,60,0.3)",a.lineWidth="6",a.bezierCurveTo(cL,9e3-100*Math.random(),0,9e3,0,9e3),a.stroke(),this},a.Scene=function(){var a=this;this.el=document.getElementById("canv"),this.height=this.el.height,this.width=this.el.width,this.ctx=null;try{if(a.ctx=a.el.getContext("2d"),!a.ctx)throw"Context does not supported"}catch(b){throw b}}}(b);var c=function(){var a=b.Scene,c=b.DecorScene,d=new c(new a);document.getElementById("main-wrapper").style.backgroundImage='url("'+d.scene.el.toDataURL()+'")'};new c}(window);</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="http://www.linuxenko.pro/dist/0.1/style.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment