Continued development
This commit is contained in:
+34
@@ -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
@@ -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 :
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user