Oliver Macdonald

Portfolio Website Design


As a solo developer it's important to make sure my games can be found without the marketing budget a typical studio would possess, having a portfolio website and sites for my projects is essential for this. I would also like to work on website design with HTML + CSS as a hobby and as possible freelance work so i've decided to manually make my portfolio website.


I wanted to bring my skills to the readers attention the second they landed on the website, for this I created a way to show my list of skills! 

		.center ul, .skill ul
			padding: 5px;
			justify-content: center;

		.center li, .skill li
			display: block;
			margin: 10px;
			font-size: 23px;
			background-color: rgba(255, 255, 255, 0.7);
			color: black;
			border-radius: 15px;
			padding: 10px;

The second they land on the website, this background gradient grabs there attention
Oliver Macdonald, Solo Game Developer instantly tells them who I am! 

		.center
    			align-content: center;

    			background-image: linear-gradient(to bottom right,rgb(215, 51, 51),rgb(101, 26, 77));
    			padding: 0;

In each project on the homepage, I also use the skill list to show what was used on each game!




Code Sections

I also have a way to display pieces of code from my projects in a cool way!

		.code
			background-color: black;
			border-radius: 15px;
			font-family: "Google Sans Code", monospace;
			margin-left: 15%;
			margin-right: 15%;
			padding: 15px;

			font-size: 1.2em;
			text-align: left;
			overflow-x: auto;

Optimizing for Mobile

There are also many parts of the website, like the skill list that won't look good on a mobile device!

		@media screen and (max-width: 900px)

CSS within this will only apply to devices with a screen width less than 900px, this allows us to make adjustments to devices to make them look good on different devices!


An Image that floats on the left with the content on the right, for devices with a width more than 900px

		.mainpiece img
			float: left;
			height: auto;
			width: 40%;
			margin-left: 3%;
			border-radius: 15px;

Less than 900px width, the image shows on top, with the content beneath:

		.mainpiece img
			float: none;
			width: 80%;
			margin-left: 0%;

Only the parts like float, width and margin-left will be changed here, the base ones without a @media set before stay






Contact Me