Tag: Tech

How to build a one page personal website

Post author By marcus
Post date July 1, 2014
No Comments on How to build a one page personal website

Website Showcase

This is a walkthrough tutorial, with code examples on how to build this one-page website that you will be able to customise with a text-editor. I’ll also talk you through buying a domain name (http://example.com), web-hosting (where your website is stored), how to point yout domain to your web-host and upload your website.

I’ll make this as easy as I can and will assume you have no previous coding experience. You might want to bookmark this page because it’s quite long.

Ready? Let’s go.

Before you start building your website, you should have a clear vision of what you want on your website and how you want it to look. You can sketch something on a napkin or make it pretty in Photoshop. Either way, it’s a lot harder without some direction.

Tags DIY, Tech, Website

Journal Makings

Sweat Roulette is in the news

Post author By marcus
Post date June 26, 2014
1 Comment on Sweat Roulette is in the news

News Clipping - The Mercury

SweatRoulette.com has been making headlines in The Mercury newspaper, available to read online and in print.

It’s crazy to think that this idea was only thought up last week and a crude prototype was only developed last Sunday. The website has been updated with more functionality since it’s launch such as giving you a rest period after each workout, a round counter which tells you how many rounds you completed with a dynamic link to share your achievement on Twitter.

A big shoutout to TeamTreehouse.com, I’ve learned so much from these guys. It’s definitely one of the best places online to learn how to code (amongst a load of other useful things). If you want to take yourself to the next level, give it a try with 50% off your first month.

Tags News, Sweat Roulette, sweatroulette, Tech

Journal Makings

Sweat Roulette v1

Sweat Roulette Web App

It’s up, it’s live, it’ll make you sweat your ass off. Sweat Roulette is a healthy project by Charlotte and myself which will get you moving and keep you fit.

The rules are simple. We give you an exercise for 20-60 seconds, then it’ll change. You keep doing them as hard as you can for as long as you can. If you need a rest, skip one exercise.

Timer, Exercise Instructions, Rest Intervals and Music are being development for future release. If you want to be part of this project, feel free to leave feedback or submit a pull request on GitHub.

Give it a go and Sweat Roulette.

Tags Sweat Roulette, sweatroulette, Tech, Web App

Journal Makings

From Paper to Pixels

The past couple of days I’ve been building a new portfolio website for myself. The hardest part was getting started so I did some really quick sketches, settled on a layout, then started coding.

I took this photo for Instagram, but it encapsulates the whole creation process so well I thought I’d blog it too.

From Paper to Pixels Instagram Photo.jpg

Tags Builds, creation, process, Tech, web design

Journal Makings

Code Lab

Post author By marcus
Post date April 28, 2013
No Comments on Code Lab

Code Lab

Code Lab, formerly called Code Club, Coders Collective, Munch ‘n’ Crunch, etc… is something that I’ve wanted to set up for a while to get people coding and sharing ideas together in real life. There are things like this going on, but this is going to be for a smaller number of people and more regular. Pizza, beer, computers, coding / programming, sharing ideas, hanging out, chatting about whatever – it’ll be good.

Check out the Code Lab site that’ll show who’s attending the next session, when and where it’s happening and what grub will be for the picking.

Interested in attending? Email me or drop me a tweet @marcusmichaels

Interested in hosting one of the sessions? Email me or drop me a tweet @marcusmichaels

Tags Tech

Journal Makings

Modest Innovation 2.0

Tags 2.0, Builds, live, Modest Innovation, Tech

Journal Makings

MI: Evolution

Modest Innovation - Old Version

Projects section - old version — Projects section – old version

Above are the current (but soon to be outdated) Modest Innovation home page and Projects section. A redesign has been a long time coming. Originally I got them up as quick as possible, I had a vague idea for the design theme being thin borders and grids – it worked on the home page, but that got lost in the projects section.

After finally getting round to making a pure CSS version of the Modest Innovation logo, it sparked a new round of inspiration for me to get the redesign and new web build together. I had to sort my act out, and so, after three days of hard graft, it’s almost there.

The simplicity, the thin accent lines and the 1:1 ratio and grid spacing all came together beautifully. Everything needed is on a single page (I love one page websites); projects and project summary, social links, thumbnails – everything. One page.

Shiny new Modest Innovation! (still working on the body copy)l

As for the actual content, that’s all hosted on the relevant site for that type of content (videos on Vimeo, photos on Flickr, PDFs on Dropbox, etc).

It’s likely that the site will be live by Monday, if not sooner.

As for its future – I’m working on giving each project its own site, similar to how I’ve showcased my fonts on their own site and User Manual, I’ll continue to do the same with the other projects. I’m also looking to update the blog to inkeep with the new style.

Sneak a peek at the beta site here.

Tags Builds, Evolution, Modest Innovation, Tech

Journal Makings

MI CSS LOGO

I’ve been wanting to make the Modest Innovation logo a single div element made purely out of CSS (actual CSS version below), instead of an image. This was for a few reasons.

Firstly, I wanted to learn how make CSS icons by calling a single element. My logo is simple so I thought it would be a good starting point. Secondly, once it’s done it’ll save the headache of optimising it for retina display devices.
Lastly, it’s super fast and fucking awesome.

Inspired by one-div I set out to learn about the :before and :after pseudo elements (with the help of Smashing Magazine) and how it all works.

Feel free to use the code and manipulate it over on GitHub.

Tags Builds, CSS, LOGO, MI, Tech

Journal Makings

Modest Fonts

The other night I quickly threw together this website showcasing my new fonts with download links for personal use. I posted it on Reddit before I went to sleep thinking nothing of it (as my posts don’t usually fare too well).

The next morning I was shocked! My post was getting popular, so much so that it not only reached the front page of /r/graphic_design, but it was actually the top link for a while.

This morning, I wasted no time (apart from taking a picture of a leaking radiator valve for my landlord) in checking the stats for yesterday’s visitor count on Google Analytics. Two thousand visitors!

That put a smile on my face.

That, and this:

The street was silent, then suddenly I hear a child say to his father, "MORE LIKE MORDOR! Hahahaha". That made me smile.

— Marcu$ (@marcusmichaels) February 13, 2013