Begun creating outline of website
This commit is contained in:
+5
-3
@@ -8,12 +8,14 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
|
||||
let s:wipebuf = bufnr('%')
|
||||
endif
|
||||
set shortmess=aoO
|
||||
badd +45 index.htm
|
||||
badd +38 WebsiteRawContent.txt
|
||||
badd +1 index.htm
|
||||
badd +8 mainstyle.css
|
||||
badd +13 normalize.css
|
||||
badd +32 ~/.vimrc
|
||||
argglobal
|
||||
silent! argdel *
|
||||
argadd index.htm
|
||||
edit WebsiteRawContent.txt
|
||||
edit index.htm
|
||||
set splitbelow splitright
|
||||
set nosplitbelow
|
||||
set nosplitright
|
||||
|
||||
@@ -31,6 +31,7 @@ Needs more...
|
||||
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.
|
||||
|
||||
Portfolio > Summary of portfolio
|
||||
Portfolio > FYP: Audio descriptor framework
|
||||
Portfolio > Python/matlab filter module
|
||||
Portfolio > VSTi Synth
|
||||
|
||||
@@ -3,47 +3,137 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Sam Perry - Main Page</title>
|
||||
<link href="normalize.css" rel="stylesheet">
|
||||
<link href="mainstyle.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<img class="circular" src="resources/ProfilePic.jpg" alt="Profile Picture">
|
||||
<ul>
|
||||
<li>About Me</li>
|
||||
<li>Professional Experience</li>
|
||||
<li>Portfolio</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="maincontent">
|
||||
<header>
|
||||
<h1>Sam Perry</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>About Me</li>
|
||||
<li>Portfolio</li>
|
||||
<li>Professional Experience</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="aboutMe">
|
||||
<article id="aboutMe">
|
||||
<h2>About Me</h2>
|
||||
<p>Insert summary here</p>
|
||||
<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.
|
||||
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>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<section id="profExper">
|
||||
<article id="profExper">
|
||||
<h2>Professional Experience</h2>
|
||||
<p>Summary of professional experience </p>
|
||||
<div id="ircam">
|
||||
<h4>IRCAM</h4>
|
||||
<p>Summary of experience at IRCAM</p>
|
||||
<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>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<section id="portfolio">
|
||||
<article id="portfolio">
|
||||
<h2>Portfolio</h2>
|
||||
<p>Summary of portfolio</p>
|
||||
<h4>Audio descriptor framework</h4>
|
||||
@@ -51,10 +141,11 @@
|
||||
<h4>VSTi Synth</h4>
|
||||
<h4>VST Delay effect</h4>
|
||||
<h4>This Website</h4>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<p><small>Copyright © Sam Perry</small></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
Vendored
+427
@@ -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 |
Reference in New Issue
Block a user