Begun creating outline of website

This commit is contained in:
2015-05-31 22:05:30 +02:00
parent 1e506f3049
commit 3ffdb1e274
7 changed files with 584 additions and 43 deletions
+5 -3
View File
@@ -8,12 +8,14 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
let s:wipebuf = bufnr('%') let s:wipebuf = bufnr('%')
endif endif
set shortmess=aoO set shortmess=aoO
badd +45 index.htm badd +1 index.htm
badd +38 WebsiteRawContent.txt badd +8 mainstyle.css
badd +13 normalize.css
badd +32 ~/.vimrc
argglobal argglobal
silent! argdel * silent! argdel *
argadd index.htm argadd index.htm
edit WebsiteRawContent.txt edit index.htm
set splitbelow splitright set splitbelow splitright
set nosplitbelow set nosplitbelow
set nosplitright set nosplitright
+1
View File
@@ -31,6 +31,7 @@ Needs more...
Professional Experience > IRCAM > Main Content Professional Experience > IRCAM > Main Content
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. 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.
Portfolio > Summary of portfolio
Portfolio > FYP: Audio descriptor framework Portfolio > FYP: Audio descriptor framework
Portfolio > Python/matlab filter module Portfolio > Python/matlab filter module
Portfolio > VSTi Synth Portfolio > VSTi Synth
+131 -40
View File
@@ -3,58 +3,149 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Sam Perry - Main Page</title> <title>Sam Perry - Main Page</title>
<link href="normalize.css" rel="stylesheet">
<link href="mainstyle.css" rel="stylesheet">
</head> </head>
<body> <body>
<header>
<h1>Sam Perry</h1>
</header>
<nav> <nav>
<img class="circular" src="resources/ProfilePic.jpg" alt="Profile Picture">
<ul> <ul>
<li>About Me</li> <li>About Me</li>
<li>Portfolio</li>
<li>Professional Experience</li> <li>Professional Experience</li>
<li>Portfolio</li>
</ul> </ul>
</nav> </nav>
<div id="maincontent">
<header>
<h1>Sam Perry</h1>
</header>
<section id="aboutMe">
<h2>About Me</h2> <article id="aboutMe">
<p>Insert summary here</p> <h2>About Me</h2>
<div id="interests"> <p>
<h3>Interests</h3> Hi! I'm Sam. An aspiring programmer/DSP engineer. I made this website to show some of the projects that
<div id="coding"> I've completed or am currently working on and as a place to document some of my key skills and interests.
<h4>Coding</h4> I hope to expand the website as I gain experience in my field but for now I have put together a selection
of some of the work I have created over the past few years whilst at University and working at my
placement in Paris. Enjoy!
</p>
<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>
</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>
</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>
</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>
</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>
</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>
</div>
<div id="motorbikes">
<h4>Motorbikes</h4>
</div>
</div> </div>
<div id="music"> </article>
<h4>Music</h4>
<article id="profExper">
<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>
</div> </div>
<div id="motorbikes"> </article>
<h4>Motorbikes</h4>
</div>
</div>
</section>
<section id="profExper"> <article id="portfolio">
<h2>Professional Experience</h2> <h2>Portfolio</h2>
<p>Summary of professional experience </p> <p>Summary of portfolio</p>
<div id="ircam"> <h4>Audio descriptor framework</h4>
<h4>IRCAM</h4> <h4>Python/matlab filter module</h4>
<p>Summary of experience at IRCAM</p> <h4>VSTi Synth</h4>
</div> <h4>VST Delay effect</h4>
</section> <h4>This Website</h4>
</article>
<section id="portfolio"> <footer>
<h2>Portfolio</h2> <p><small>Copyright &copy; Sam Perry</small></p>
<p>Summary of portfolio</p> </footer>
<h4>Audio descriptor framework</h4> </div>
<h4>Python/matlab filter module</h4>
<h4>VSTi Synth</h4>
<h4>VST Delay effect</h4>
<h4>This Website</h4>
</section>
<footer>
<p><small>Copyright &copy; Sam Perry</small></p>
</footer>
</body> </body>
</html> </html>
+20
View File
@@ -0,0 +1,20 @@
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);
}
+427
View File
@@ -0,0 +1,427 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 878 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB