Continued development

This commit is contained in:
2015-06-02 16:57:17 +02:00
parent 3ffdb1e274
commit aa1c84994c
5 changed files with 271 additions and 104 deletions
+34
View File
@@ -0,0 +1,34 @@
// Scroll smoothly between html anchors
// Taken from: http://codepen.io/mattsince87/pen/exByn
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
//Toggle smoothly revealing/hiding divs
function showHide() {
$(".showhide").click(function(){
var parentDiv = $(this).parent("div");
parentDiv.find(".panel").slideToggle("slow");
});
}
function highlightDiv() {
}
//Make sure document is ready before executing javascript
$(document).ready(function(){
scrollNav();
showHide();
});
+12 -8
View File
@@ -8,20 +8,22 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
let s:wipebuf = bufnr('%')
endif
set shortmess=aoO
badd +1 index.htm
badd +8 mainstyle.css
badd +13 normalize.css
badd +32 ~/.vimrc
badd +40 index.htm
badd +28 SmoothScroll.js
badd +81 style.css
argglobal
silent! argdel *
argadd index.htm
edit index.htm
argadd mainstyle.css
argadd SmoothScroll.js
edit SmoothScroll.js
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winheight=1 winwidth=1
argglobal
edit SmoothScroll.js
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
@@ -31,11 +33,11 @@ setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 25) / 50)
let s:l = 25 - ((14 * winheight(0) + 11) / 23)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
25
normal! 0
tabnext 1
if exists('s:wipebuf')
@@ -48,7 +50,9 @@ if file_readable(s:sx)
exe "source " . fnameescape(s:sx)
endif
let &so = s:so_save | let &siso = s:siso_save
doautoall SessionLoadPost
let g:this_session = v:this_session
let g:this_obsession = v:this_session
let g:this_obsession_status = 2
doautoall SessionLoadPost
unlet SessionLoad
" vim: set ft=vim :
+105 -76
View File
@@ -4,25 +4,38 @@
<meta charset="UTF-8">
<title>Sam Perry - Main Page</title>
<link href="normalize.css" rel="stylesheet">
<link href="mainstyle.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="SmoothScroll.js" type="text/javascript"></script>
</head>
<body>
<nav>
<img class="circular" src="resources/ProfilePic.jpg" alt="Profile Picture">
<!--Sidebar-->
<nav class="nav">
<div id="imgDiv">
<img id="profilePic" class="circular" src="resources/ProfilePic.jpg" alt="Profile Picture">
</div>
<ul>
<li>About Me</li>
<li>Professional Experience</li>
<li>Portfolio</li>
<li class="active">
<a id="link1" href="#aboutMe" class="nav-aboutMe">About Me</a>
</li>
<li>
<a id="link2" href="#profExper" class="nav-profExper">Professional Experience</a>
</li>
<li>
<a id="link3" href="#portfolio" class="nav-portfolio">Portfolio</a>
</li>
</ul>
</nav>
<div id="maincontent">
<header>
<h1>Sam Perry</h1>
</header>
<article id="aboutMe">
<h2>About Me</h2>
<article>
<h2 id="aboutMe">About Me</h2>
<p>
Hi! I'm Sam. An aspiring programmer/DSP engineer. I made this website to show some of the projects that
I've completed or am currently working on and as a place to document some of my key skills and interests.
@@ -33,80 +46,94 @@
<div id="interests">
<h3>Interests</h3>
<div id="coding">
<h4>Coding</h4>
<div id="python">
<h5>Python</h5>
<p>
I have around a year's experience working in python and find it's simple syntax perfect for
quickly prototyping ideas and is one of my primary means for developing DSP based programs.
During my time at the IRCAM research institute I used Python extensively on a number of
different tasks to perform audio analysis and synthesis related processes. Though I mainly
worked in Python 2 I am also familiar with Python 3. I am also familiar with packages such as
Numpy, SciPy and Matplotlib.
Check out some of the projects I have worked on in python here!
</p>
<h5 class="showhide">Python</h5>
<div class="panel">
<p>
I have around a year's experience working in python and find it's simple syntax perfect for
quickly prototyping ideas and is one of my primary means for developing DSP based programs.
During my time at the IRCAM research institute I used Python extensively on a number of
different tasks to perform audio analysis and synthesis related processes. Though I mainly
worked in Python 2 I am also familiar with Python 3. I am also familiar with packages such as
Numpy, SciPy and Matplotlib.
Check out some of the projects I have worked on in python here!
</p>
</div>
</div>
<div id="unix">
<h5>Unix</h5>
<p>
Having worked almost exclusively on Mac and Linux for a number of years I am very familiar with
the Unix environment. I have recently begun to experiment with creating shell scripts to help
automate processes I perform regularly. The best example of my understanding of Unix would be to
check out my source repository here. It demonstrates how I have used shell scripts to automate
the process of setting up a new machine with the environment as I need it.
</p>
<h5 class="showhide">Unix</h5>
<div class="panel">
<p>
Having worked almost exclusively on Mac and Linux for a number of years I am very familiar with
the Unix environment. I have recently begun to experiment with creating shell scripts to help
automate processes I perform regularly. The best example of my understanding of Unix would be to
check out my source repository here. It demonstrates how I have used shell scripts to automate
the process of setting up a new machine with the environment as I need it.
</p>
</div>
</div>
<div id="cplusplus">
<h5>C++</h5>
<p>
I have used C++ to create audio effects using the Steinberg VST framework as part of coursework
for my degree. I have also experimented with creating simple standalone command line tools.
I like the language for it's high performance when compared to python (due to the compiled nature
of the language) though I currently tend to work less in this language as I find it less flexible
for quickly prototyping my ideas. I plan on improving my skills in this language when I feel that
one of my projects has reached a point where it would benefit from being converted to a compiled
language.
</p>
<h5 class="showhide">C++</h5>
<div class="panel">
<p>
I have used C++ to create audio effects using the Steinberg VST framework as part of coursework
for my degree. I have also experimented with creating simple standalone command line tools.
I like the language for it's high performance when compared to python (due to the compiled nature
of the language) though I currently tend to work less in this language as I find it less flexible
for quickly prototyping my ideas. I plan on improving my skills in this language when I feel that
one of my projects has reached a point where it would benefit from being converted to a compiled
language.
</p>
</div>
</div>
<div id="vim">
<h5>Vim</h5>
<p>
My editor of choice is Vim and have been using it for around a year. I feel the main advantage is
that it is a widely available editor due to it's age and its exceptional ability to be adaptable
to all different languages through customization. This allows me to develop in the same environment
with modifications to create an IDE style workspace tailored to each task.If you are interested my
Vim configurations can be found here.
</p>
<h5 class="showhide">Vim</h5>
<div class="panel">
<p>
My editor of choice is Vim and have been using it for around a year. I feel the main advantage is
that it is a widely available editor due to it's age and its exceptional ability to be adaptable
to all different languages through customization. This allows me to develop in the same environment
with modifications to create an IDE style workspace tailored to each task.If you are interested my
Vim configurations can be found here.
</p>
</div>
</div>
<div id="webdesign">
<h5>Web Design</h5>
<p>
I recently became interested in coding a website as a side project to improve my skills in an area
that I am much less familiar with. This has resulted in the website you are looking at now! I thought
it would be beneficial to teach myself something not totally unrelated to my aspirations but enough
to give me a different challenge to apply the new skills I have acquired over the past few years to.
As a result I am now familiar with HTML5, CSS and understand the basics of JavaScript (though I feel
this would not be difficult to build upon given my experience in Python).
</p>
<h5 class="showhide">Web Design</h5>
<div class="panel">
<p>
I recently became interested in coding a website as a side project to improve my skills in an area
that I am much less familiar with. This has resulted in the website you are looking at now! I thought
it would be beneficial to teach myself something not totally unrelated to my aspirations but enough
to give me a different challenge to apply the new skills I have acquired over the past few years to.
As a result I am now familiar with HTML5, CSS and understand the basics of JavaScript (though I feel
this would not be difficult to build upon given my experience in Python).
</p>
</div>
</div>
</div>
<div id="music">
<h4>Music</h4>
<p>
I have always enjoyed writing and playing music. As a child I was taught the Piano and continue to
practice as a hobby in my spare time. Through studying Music Technology at university I have had the
opportunity to expand on my understanding of Music and how computers and signal processing techniques
can be applied creatively to design and manipulate sounds. I also have a good understanding of music
recording techniques and industry standards for recording instruments in a music studio environment.
Although I hope to progress primarily in a technical industry where logic is key, I feel the slightly
less conventional path I have taken to reach my current position will provide me with a different
perspective on tasks than that of a standard computer science graduate, for example.
</p>
<h4 class="showhide">Music</h4>
<div class="panel">
<p>
I have always enjoyed writing and playing music. As a child I was taught the Piano and continue to
practice as a hobby in my spare time. Through studying Music Technology at university I have had the
opportunity to expand on my understanding of Music and how computers and signal processing techniques
can be applied creatively to design and manipulate sounds. I also have a good understanding of music
recording techniques and industry standards for recording instruments in a music studio environment.
Although I hope to progress primarily in a technical industry where logic is key, I feel the slightly
less conventional path I have taken to reach my current position will provide me with a different
perspective on tasks than that of a standard computer science graduate, for example.
</p>
</div>
</div>
<div id="motorbikes">
<h4>Motorbikes</h4>
@@ -118,18 +145,20 @@
<h2>Professional Experience</h2>
<p>Summary of professional experience </p>
<div id="ircam">
<h4>IRCAM</h4>
<p>
IRCAM has has been my first experience in a professional working environment. During my time there I gained an
understanding of how teams work togeather to produce professional products and participated in the development
of such products. My ability to write readable and stable code was important when contributing to projects and
my knowlege of Unix, Git, VIM, Python, C++ etc... grew substantially during my time there. I also learnt how to
work on a project alongside other member of the team and due to the wide variety of projects that I was tasked
with improving, my ability to adapt to tasks where I did not have prior experience improved dramatically. An
example of this could be when I was tasked with fixing a reveal.js prsentation. A simple task but in a language
(or 3, HTML, CSS and JavaScript) that I had never used before. I think this ability to adapt to a given
situation is important in a rapidly changing industry.
</p>
<h4 class="showhide">IRCAM</h4>
<div class="panel">
<p>
IRCAM has has been my first experience in a professional working environment. During my time there I gained an
understanding of how teams work togeather to produce professional products and participated in the development
of such products. My ability to write readable and stable code was important when contributing to projects and
my knowlege of Unix, Git, VIM, Python, C++ etc... grew substantially during my time there. I also learnt how to
work on a project alongside other member of the team and due to the wide variety of projects that I was tasked
with improving, my ability to adapt to tasks where I did not have prior experience improved dramatically. An
example of this could be when I was tasked with fixing a reveal.js prsentation. A simple task but in a language
(or 3, HTML, CSS and JavaScript) that I had never used before. I think this ability to adapt to a given
situation is important in a rapidly changing industry.
</p>
</div>
</div>
</article>
-20
View File
@@ -1,20 +0,0 @@
html, body {height: 100%; line-height: 1.375 }
header { height : 30em; width : 100%; background-color : gray; top : 0}
header > h1 {margin : 0; padding : 1em }
article { padding : 1em; margin : 0 auto; max-width : 42em }
footer { padding : 1.5em; background-color : gray; }
nav { position : fixed; width : 20%; min-height : 100%; right : 0; float : right; background : purple; margin : 0; padding : 0;}
nav > ul { padding : 2em 0em 2em 2em; margin : 0 }
nav > ul > li { padding : 0.5em 0 }
div#maincontent { width : 80%; margin : 0; padding : 0}
nav > img { margin-left : auto; margin-right : auto; display : block; margin-top: 1em; width : 150px; height : 150px; }
.circular {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
+120
View File
@@ -0,0 +1,120 @@
html, body {
height: 100%;
line-height: 1.375;
}
h5 {
margin: 0;
padding: 1.67em 0 1.67em 2em;
background-color: LightGray;
}
header {
height: 30em;
width: 100%;
background-color: gray;
top: 0
}
header > h1 {
margin: 0;
padding: 1em
}
article {
padding: 1em;
margin: 0 auto;
max-width: 42em
}
footer {
padding: 1.5em;
background-color: gray;
}
nav {
position: fixed;
width: 20%;
min-height: 100%;
right: 0;
float: right;
background-color: #6f5499;
margin: 0;
padding: 0;
}
nav > ul {
padding: 2em 0em 2em 0;
margin: 0
}
nav > ul > li {
padding: 0.5em 2em;
list-style-type: none;
}
nav > ul > li.active {
background-color: #8565B8
}
div#maincontent {
position: relative;
width: 80%;
margin: 0;
padding: 0
}
/*A bit of a hack to fix the jquery slide toggle*/
div#panel {
border: 1px solid transparent;
}
p {
margin: 0
}
img#profilePic {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 1em;
max-width: 150px;
max-height: 150px;
}
nav > div#imgDiv {
padding: 0 1em 0 1em
}
.circular {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
/* unvisited link */
a:link {
color: #FF0000;
text-decoration: none;
}
/* visited link */
a:visited {
color: #ffffff;
text-decoration: none;
}
/* mouse over link */
a:hover {
color: #ffffff;
text-decoration: none;
}
/* selected link */
a:active {
color: #ffffff;
text-decoration: none;
}