patrickrobinsonagm30devepment

[patrickrobinsonagm30devepment]

Reflective Statement.

For my initial website I set out to create a portfolio site that would show off my work and interests to people that want to work with me or for future employers. In respect to what I initially set out to do I have fulfilled this task and created a website that demonstrates my work and aesthetic clearly. 

My initial plan was to create a very stylised home page and then have more simple pages off of that 'such as a contact and about page’. However, since I started creating my site I quickly realised that this would not be enough to demonstrate my interests and passions through just one main page. So instead I decided to have a home/title page, a live page (that has my live stream embedded), a radio page ( a back catalogue of my radio shows), and later on, a music page (with a selection of music, curated by me). I think this made the website more interesting to visit as there was more of it to navigate than just having one main page. I chose to add the music page later on as I felt as though the website needed further fleshing out, and having lots of new music on one page might direct some more traffic to my site.

At the start of the project I was very inspired by the website https://ins-rt.net, especially their visual section https://ins-rt.net/visual. I loved the way that the videos were there as you scrolled down and wanted to create a page that you scroll down with my own videos playing. I think this is still very visible in the home page of my site now; you can scroll down and there are numerous videos that you can click on and play. Initially I wanted short loops that were automatically playing using HTML5 video, however, I found this to be too heavy on loading the site, therefore, I chose to embed them through youtube, I think this works well as you can control the sound and fullscreen option easily. 

I liked this set up so much that I used it for the Radio and Music page embedding links from Soundcloud and Bandcamp respectively. This adds to the overall theme of the website, having the pages with similar layouts yet different content. For the style of the website I wanted to have something simple and futuristic, I wanted the website to match my visual aesthetics. I didn’t want much text as I want it to be a visual website, as I am a visual artist. This is clear as there is barely any text amongst the whole website and my practical work seems engrained in the website.

Technically the project was tricky for me. I chose to code my site from scratch as I wanted to learn HTML and CSS. I had never used it before, however now I do feel quite confident that I could make a website from scratch again on my own. The most difficult aspect for me was making the site responsive to the re-sizing of the browser. It was difficult as a lot of the time the containers would overlap with the text and the text would be too big or too small. However I found using the CSS value Vh,Vw was beneficial for this. I think it is the main thing in the whole project that I need to work on more still; the website does re-size, however, I think it could be more stylish, particularly on a mobile, it is something I will be working on in the future. 

[patrickrobinsonagm30devepment]

These are my notes for my presentation, I won’t show anyone these they are just for me to read.

[patrickrobinsonagm30devepment]

Buying an SSL certificate

I have learnt that in order to get a twitch player to embed onto your own website you need an SSL certificate, which stands for secure socket layer. It basically safeguards any sensitive data that is being sent between two systems, preventing criminals from reading and modifying any information transferred, including potential personal details.

With sams help I have bought one and I am just waiting for it to kick in so I can use the twitch embed correctly.

[patrickrobinsonagm30devepment]

Taking away background image from radio page

I have actually decided to take away the background image from the radio page as it looks a bit messy I far prefer it without as it a lot more simple and easy to look at.

[patrickrobinsonagm30devepment]

I have now managed to fix the problem below using padding on either side.

[patrickrobinsonagm30devepment]

This is what the music page is looking like at the moment. I am having trouble with the ban camp embeds due to their styling being a bit weird. I want to get them in a bit from the outside, so the columns are more central.

[patrickrobinsonagm30devepment]

Adding another page

I feel as if my site isn’t quite there with content so I think I am going to add another page. I would like to create a ‘music’ section that is a selection of music that I am listening to at the moment. I think this would work well to direct people to the website if they have similar tastes in music to me as it would a good chance to find new music. I also want to embed the Bandcamp player on my site for each song so that people would have a direct link to buy the music more directly from the artist as opposed to streaming off Spotify or apple music etc. 

I would like to keep the same style as the rest of the website with the CSS grid containers as I think that is working well. I could have each selection in columns going down the page, similar to with the videos on the home page but with embedded links to music. 

[patrickrobinsonagm30devepment]

JS sketch re-thought

This is my re-hash of the p5.js sketch that I found online. I have changed the font, colour and way the movement of the letters works when the mouse changes. It is a lot more condensed and futuristic than before which I like as it goes with the style of my site.

The hardest part of this stage was making it responsive to the size of the webpage. It took ages and quite a lot of help from people to finally realise that we had to overwrite the javascript styling with my own CSS styling to make it shrink with the webpage. i.e 

#javasketch > canvas { width: 100% !important; height: 20% !important; padding-top: 3%;

[patrickrobinsonagm30devepment]

Creating a p5.js sketch for my banner image.

I have never used javascript before so I was looking on the internet for some nice designs that were similar to the one that I created before using TouchDesigner. However because you can’t use TD for web design I figured I had to do it with javascript. After talking to some people in the interim presentations about the design, James showed me one he found here: 

http://www.generative-gestaltung.de/2/sketches/?01_P/P_3_2_2_01

I liked this as it was mouse reactive making the website more interactive and fun for the visitor.

I copied the code and aim to change it a little bit to make it my own.

This is what the original looked like, when you move your mouse the patterns in the text move:

[patrickrobinsonagm30devepment]

Creating the live stream page

Now I already have the rough layout for each page it is quite easy to compile the live stream page. I have embedded my twitch stream, however for some reason it is not working at this moment. This is the rough layout and feel for the page though. I will add some text at a later date. 

I still need to create a js sketch for the banner. 

[patrickrobinsonagm30devepment]

Sprucing up Radio page

I think that the radio page is a bit visually boring as there are only small containers with audio in them. So I have decided to use an image that I made recently as the background image. I think this works well as it is in-line with my aesthetics and demonstrates my style to people on the website. 

[patrickrobinsonagm30devepment]

Radio page

For my second page of my website I would like to have a back catalogue of all my radio shows so that people can access them through my website. 

I will use the same grid containers to put embedded soundcloud links onto the page, this will keep good uniformity for the whole site.

[patrickrobinsonagm30devepment]

Social media links

For my social media links I would like to include a link to my youtube, Instagram, SoundCloud and email as these are the ones I dominantly use for my practice/work.

I found a very rough design on codepen that I re-styled to make it fit into my website. Here is the original codepen code: https://codepen.io/vahidgoudini/pen/gqLoYM 

and what it looked like

 and here is my adaptation:

When you hover over it, it turns the link purple, which goes with the box shadow colours of the video containers: 

[patrickrobinsonagm30devepment]

Buttons and fonts

Here are the re-stylised buttons, I got the initial design from Codepen, when you hover over them, the buttons light up. 

I chose these along with this font as I want the website to feel futuristic and I think this font works well in that way. I think when I add text I will also use this font. 

Below are the empty CSS video containers. 

[patrickrobinsonagm30devepment]

Testing out Black

For some reason I slightly went off the initial colours that I chose for my site. I think that the greeny/blue that I chose is not very sleek and doesn’t actually tie in that well with my aesthetic as an artist anymore - those images that I chose at the start were from a while back and creating the website has really made me question my aesthetics in terms of where I am at now. I really like the look of the purple shadow on black, it makes them stick out a lot more and seem a lot more 3D. I like this as it gives depth to the site. 

[patrickrobinsonagm30devepment]

Adding buttons, text and social media links.

Next I have added the buttons to the top of the bar for the other pages of my sight. To the left I have added a very rough social media links tab. This isn’t styled yet but I will do so in the future. I have made it sticky so that it travels down the page as you travel down too, so that it is always accessible. 

I have also ben experimenting with text in this image. I have just been playing around with CSS float and seeing what looks good where. I don’t really like how this looks just now so will do some more experimenting. 

For the banner at the top, I would like to create a Java script sketch if I have time so that the Murr-ma is animated and moves around. At the moment it is just an image that I made using TouchDesigner. 

[patrickrobinsonagm30devepment]

Buttons

Next I am looking at buttons for my webpage so that I can create links to to other pages. 

I read this tutorial to help me to get started: https://www.w3schools.com/css/css3_buttons.asp

I then went to codepen to see if I could find some buttons that I liked and that i could change. 

I found these ones that I thought I could change to suite the style of my website. https://codepen.io/yuhomyan/pen/JjGVabx