-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgravitude-song.html
136 lines (126 loc) · 7.72 KB
/
gravitude-song.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Henrik Sonnergård</title>
<meta name="description" content="Portfolio of Swedish web/graphic designer Henrik Sonnergård.">
<meta name="keywords" content="henrik, sonnergård, sonnergard, sweden, swedish, music, web, design, warpfuz">
<meta name="author" content="Henrik Sonnergård">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet"href="stylesheets/lightbox.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<header class="sixteen columns">
<div class="container">
<h1 class="remove-bottom site-logo"><a href="./index.html"><img src="images/logo.png" alt="Henrik Sonnergård" /></a></h1>
<a href="#nav" id="toggle">Menu</a>
<br class="clear" />
<div id="nav">
<ul>
<li><a href="./index.html">portfolio<br /><img src="images/navicon-portfolio.png" alt=""></a></li>
<li><a href="./hobbies.html">hobbies<br /><img src="images/navicon-hobbies.png" alt=""></a></li>
<li><a href="./about.html">about<br /><img src="images/navicon-about.png" alt=""></a></li>
<li><a href="./contact.html">contact<br /><img src="images/navicon-contact.png" alt=""></a></li>
</ul>
</div>
</div>
</header>
<div class="container content-text-wrapper clearfix">
<h2>Gravitude</h2>
<div class="one-third column alpha text-body">
<h4>Project description</h4>
<p>Somewhere at the beginning of this millenium, a friend of mine bought a snowboard game called SSX Tricky, which we played extensively every time I went to visit him. But it was the sequel, SSX3, that I completely fell in love with. This was my go-to game for years, and still is.</p>
<p>When the reboot of the SSX franchise was announced in 2011, and it revealed that it would be possible to import your own music into the game, I couldn't resist to get creative. The short, 3 minute piece I composed was made with the game's menu, called RiderNet, in mind, something to listen to as you choose your next slope to shred down.</p>
<h4>View this project on:</h4>
<ul>
<li><a href="https://soundcloud.com/warpfuz/gravitude">SoundCloud »</a></li>
<li><a href="http://open.spotify.com/album/3uGCuSOdSlYUkyBG6zjotz">Spotify »</a></li>
<li><a href="http://warpfuz.bandcamp.com/track/gravitude">BandCamp »</a></li>
</ul>
<ul class="tags">
<li><a href="#">music</a></li>
<li><a href="#">warpfuz</a></li>
</ul>
</div>
<div class="two-thirds column omega project-sidebar">
<figure>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/38830983&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<figcaption>Available for free download under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons license</a>.</figcaption>
</figure>
<figure>
<a href="images/portfolio/gravitude-song/gravitude_song-1.jpg" data-lightbox="gravitude_song" data-title="Photo in cover art was taken during a snowboard trip in Norway."><img class="scale-with-grid" src="images/portfolio/gravitude-song/gravitude_song-1_small.jpg" alt="Gravitude cover art." /></a>
<figcaption>Photo in cover art was taken during a snowboard trip in Norway.</figcaption>
</figure>
<figure>
<a href="images/portfolio/gravitude-song/gravitude_song-2_small.jpg" data-lightbox="gravitude_song" data-title="The driving element: an 'arcade-style' synth arpeggio, filtered. Oh yeah."><img class="scale-with-grid" src="images/portfolio/gravitude-song/gravitude_song-2_small.jpg" alt="FL Studio screenshot." /></a>
<figcaption>The driving element: an "arcade-style" synth arpeggio, filtered. Oh yeah.</figcaption>
</figure>
</div>
</div><!-- container -->
<footer>
<div class="container">
<div class="eight columns">
<h3>Hallå hallå!</h3>
<img class="img-float scale-with-grid" src="images/henrik-thumb.png" alt="It's-a-me!" />
<p>I'm Henrik Sonnergård, an ordinary person from an ordinary Sweden. I especially like electronic music, cider, winter, SAAB, typography and snowboarding.</p>
<p>My passion is finding or creating the small details, stuff that most people don't think about but makes the whole experience rise from good to great. </p>
<p><a href="http://henrik.sonnergard.com/henrik_sonnergard_resume.pdf" title="Resume of Henrik Sonnergård">Download resume (PDF in Swedish)</a></p>
</div>
<div class="seven columns offset-by-one">
<h3>Socialize!</h3>
<p>Of course you can find me in many other places, here's a few ways to check out my works and get in touch.</p>
<p class="socicons-footer">
<a href="mailto:[email protected]" title="Mail">@</a>
<a href="http://www.linkedin.com/in/henriksonnergard" title="LinkedIn">j</a>
<a href="http://twitter.com/warpfuz" title="Twitter">a</a>
<br />
<a href="http://www.flickr.com/photos/warpfuz-photo/" title="Flickr photostream">v</a>
<a href="http://soundcloud.com/warpfuz" title="SoundCloud">n</a>
<a href="http://youtube.com/channel/UC6-PRe0w-OhTaDS6rzzRCcQ" title="YouTube">r</a>
</p>
</div>
<hr class="footer" />
<div class="sixteen columns">
<p class="footer-copy">© 2022 Henrik Sonnergård | Built with <a href="http://getskeleton.com" title="An amazing framework.">Skeleton 1.1</a></p>
</div>
</div>
</footer>
<!-- JS
================================================== -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="javascripts/tabs.js"></script>
<script src="javascripts/responsive-nav.js"></script>
<script src="javascripts/lightbox.min.js"></script>
<script>
var navigation = responsiveNav("#nav", {customToggle: "#toggle"});
</script>
<!-- End Document
================================================== -->
</body>
</html>