Skip to content

Instantly share code, notes, and snippets.

@rouzbeh84

rouzbeh84/rouzbeh-portfolio.html

Created August 24, 2015 21:48
Show Gist options
  • Save rouzbeh84/23a9903c079518593d4e to your computer and use it in GitHub Desktop.
Save rouzbeh84/23a9903c079518593d4e to your computer and use it in GitHub Desktop.
Download ZIP
Coding Style
Raw
rouzbeh-portfolio.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="p:domain_verify" content="82b4f1b25659642d13dbbc1dfa4d65a6" />
<title>Rouzbeh Sarrafieh Portfolio | Los Angeles Based Web Designer and Developer</title>
<meta name="description" content="Portfolio of Los Angeles Web Designer and Developer Rouzbeh. Specializing in HTML and CSS front end development with usage of jQuery and JavaScript.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/main.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="/images/favicon.ico">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<!-- header and navigation start here -->
<header id="home">
<h1><a href="#">Portfolio of Los Angeles Web Designer and Developer Rouzbeh Sarrafieh</a></h1>
<nav class="hdr-nav">
<ul>
<li><a rel="scrollTop" href="#home">Home</a></li>
<li><a rel="scrollTop" href=".about">About</a></li>
<li><a rel="scrollTop" href=".works">Work</a></li>
<li><a rel="scrollTop" href=".contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- header and navigation end here -->
<section id="content">
<!-- intro section starts here -->
<!-- hero text -->
<section class="banner">
<h2> Discover, Design, Develop.
<span>Repeat</span>. </h2>
<p> The creative portfolio of
<span>Rouzbeh Sarrafieh</span>, a designer and developer based in the one and only City of Angels. </p>
</section>
<!-- hero text end -->
<section class="about">
<h2> About </h2>
<p> My name is Rouzbeh and it's pronounced like Tuesday but with a "R" and "B" :). Born overseas and raised one part English and two parts Angeleno, I have stayed true to my childhood and continued travelling around the world while most recently spending
a 2 year stint in New York City. Having been given such amazing opportunities to live in the two greatest cities in the world I am always grateful for what life can bring to somene who just puts forth the effort. Be open to life and life will
be very generous so I am always willing to give back so feel free to head to the <a rel="scrollTop" href=".contact">Contact</a> section to drop me a line and I will get back to you ASAP. </p>
<p> As a mostly self taught developer and designer I acquired skills that traditional routes of education may not have given their students. Instead of focusing on one level of design or development I have been involved in all aspects from discovery
and design to making those artifacts and elements come to life with using web standard HTML/CSS development while sprinkling in bits of magic a.k.a. jQuery. I currently use my hybrid skillset as a designer for Musicians Institute - College of
Contemporary Music and have contributed to many projects for DIRECTV, Starbucks, Adidas, Neiman Marcus to mention a few. </p>
<img src="images/rouzbeh-sarrafieh.jpg" alt="Los Angeles Based Web Designer and Developer Rouzbeh Sarrafieh">
</section>
<!-- intro section ends here -->
<!-- scroll to top arrow start -->
<div class="top-arrow"><a rel="scrollTop" href=".works" class="next">Works</a><a rel="scrollTop" href="#home" class="top">Back To Top</a></div>
<!-- scroll to top arrow end -->
<!-- works section starts here -->
<section class="works">
<h2> Works </h2>
<article>
<h3>Musicians Institute Website</h3>
<figure>
<a href="images/mi-website.jpg" rel="prettyPhoto" alt="Musicians Institute - College of Contemporary Music">
<img src="images/mi-website-thumb.png" width="300" height="230" alt="Musicians Institute - College of Contemporary Music">
</a>
<figcaption><a href="http://mi.edu/" title="Musicians Institute - College of Contemporary Music">mi.edu</a> A site I've been managing in my current position. Various aspects including graphics, layout, functionality and management have been modified by
me or at my discretion with the help of a brilliant developer....<a href="http://mi.edu/" title="Musicians Institute - College of Contemporary Music">View here</a></figcaption>
</figure>
</article>
<article>
<h3>Experian Client Summit</h3>
<figure>
<a href="images/client-summit.jpg" rel="prettyPhoto" alt="Click here to see the Experian Client Summit project">
<img src="images/client-summit-thumb.png" width="300" height="230" alt="Experian Client Summit - Development">
</a>
<figcaption><a href="http://2012digitalsummit.com/" title="Experian Marketing Services Annual Summit">Experian Client Summit</a> is an annual conference held by Experian. I undertook the entire development of the project. Including all HTML, CSS, and jQuery
functionality and included launching the site live...<a href="http://2012digitalsummit.com/" title="Experian Marketing Services Annual Summit">View here</a></figcaption>
</figure>
</article>
<article>
<h3>Soundwagon</h3>
<figure>
<a href="images/soundwagon.jpg" rel="prettyPhoto" alt="Click here to see the Soundwagon.jp project">
<img src="images/soundwagon-thumb.png" width="300" height="230" alt="Soundwagon - Design and Development" />
</a>
<figcaption><a href="http://soundwagon.jp/" title="Soundwagon Website">Soundwagon</a> is a single product website that I designed and developed from the ground up for a unique little novelty toy. Having free reign on the discovery, design and development
of the site was a great experience...<a href="http://soundwagon.jp/" title="Soundwagon Website">View here</a></figcaption>
</figure>
</article>
<article>
<h3>DIRECTV Email</h3>
<figure>
<a href="images/dtv-email.jpg" rel="prettyPhoto" alt="Click here to see the DIRECTV Media Query Email project">
<img src="images/dtv-email-thumb.png" width="300" height="230" alt="DIRECTV Media Query Email - Development" />
</a>
<figcaption><a href="/email/directv.html" title="DIRECTV Mobile Optimized Email with Media Query">DIRECTV</a> requested an email to be mobile optimized with media queries. I undertook the entire develpment by applying the latest responsive methods to older
coding styles of using tables in emails for cross client compatability...<a href="/email/directv.html" title="DIRECTV Mobile Optimized Email with Media Query">View here</a></figcaption>
</figure>
</article>
<article>
<h3>Grammy Program Ad</h3>
<figure>
<a href="images/grammy-ad.png" rel="prettyPhoto" alt="2014 Grammy Program Advertisement">
<img src="images/grammy-ad-thumb.png" width="300" height="230" alt="2014 Grammy Program Advertisement" />
</a>
<figcaption> A minimal poster I did for an advertisement in the 2014 Grammy Program booklet congratulating the foundations dedication to preserving recordings....<a href="images/grammy-ad.png" alt="2014 Grammy Program Advertisement">View here</a></figcaption>
</figure>
</article>
<article>
<h3>Asics Ad Mock</h3>
<figure>
<a href="images/asics-ad.jpg" rel="prettyPhoto" alt="Click here to see the Asics Ad Mock Up project">
<img src="images/asics-ad-thumb.jpg" width="300" height="230" alt="Asics Ad - Photoshop" />
</a>
<figcaption> Asics advertisement made entirely in photoshop with gradient mesh layers to achieve the paint flying off the shoes. To see more of this color matching paint flying goodness...<a href="images/asics-ad.png" alt="Click here to see the Asics Ad Mock Up project">View here</a></figcaption>
</figure>
</article>
</section>
<!-- works section ends here -->
<!-- scroll to top arrow start -->
<div class="top-arrow"><a rel="scrollTop" href=".works" class="next">Works</a><a rel="scrollTop" href="#home" class="top">Back To Top</a></div>
<!-- scroll to top arrow end -->
<!-- contact section starts here -->
<section class="contact">
<h2> Contact </h2>
<p> Please feel free to reach out to me in any of the following ways. </p>
<article>
<a href="mailto:rouzbeh.sarrafieh@gmail.com" title="Email Me">
<img src="images/mail-icon.png" alt="email">
</a>
</article>
<article>
<a href="http://www.linkedin.com/in/rouzbehsarrafieh" title="Linked In">
<img src="images/linkedin-icon.png" alt="email">
</a>
</article>
<article>
<a href="https://twitter.com/rouzbeh84" title="Twitter">
<img src="images/twitter-icon.png" alt="email">
</a>
</article>
<p> I will get back to you ASAP! I promise. </p>
</section>
<!-- contact section ends here -->
<!-- scroll to top arrow start -->
<div class="top-arrow"><a rel="scrollTop" href=".works" class="next">Works</a><a rel="scrollTop" href="#home" class="top">Back To Top</a></div>
<!-- scroll to top arrow end -->
</section>
<!-- footer section starts here -->
<footer>
<small> Copyright 2014 <a href="/">rouzbeh.net</a> All Rights Reserved </small>
<nav class="ftr-nav">
<ul>
<li><a rel="scrollTop" href="#home">Home</a></li>
<li><a rel="scrollTop" href=".about">About</a></li>
<li><a rel="scrollTop" href=".works">Work</a></li>
<li><a rel="scrollTop" href=".contact">Contact</a></li>
</ul>
</nav>
</footer>
<!-- footer section ends here -->
<!-- scripts added here -->
<!-- jquery script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- custom scripts -->
<script src="js/scripts.js"></script>
<!-- jquery function code for prettyPhoto -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'normal',
// fast/slow/normal
opacity: .9,
// Value between 0 and 1
show_title: true,
// true/false
allow_resize: true,
// Resize the photos bigger than viewport. true/false
theme: 'dark_rounded',
// light_rounded / dark_rounded / light_square / dark_square / facebook horizontal_padding: 20,
// The padding on each side of the picture
hideflash: false,
// Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
wmode: 'dark',
// Set the flash wmode attribute
autoplay: true,
// Automatically start videos: True/False
modal: false,
// If set to true, only the close button will close the window deeplinking: false,
// Allow prettyPhoto to update the url to enable deeplinking. overlay_gallery: true,
// If set to true, a gallery will overlay the fullscreen image on mouse over
changepicturecallback: function() {},
// Called everytime an item is shown/changed
callback: function() {},
// Called when prettyPhoto is closed
ie6_fallback: true,
social_tools: ''
});
});
</script>
<!-- smooth scroll functionality -->
<script type="text/javascript">
$('a[rel=scrollTop]').click(function() {
var scrollVal = $($(this).attr('href')).offset();
$("html, body").animate({
scrollTop: scrollVal.top
}, 1000);
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment