The custom boxes used for showcasing the projects in a nice and clean list are displayed using the following styles:

/** Projects **/
div.projects {
	display: grid;
	grid-template-columns: minmax(auto, 150px) auto;
	grid-gap: 1em;
	grid-auto-rows: minmax(150px, auto);
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

div.projects > div {
	background-color: rgb(244, 244, 244);
	text-align: center;
}

div.description {
	text-align: left;
}

div.project-icon {
	align-self: center;
}

I’ve seen a nice article which showed how to reverse an email address to reduce spam without any JavaScript required:

/** Anti Spam **/
span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}

Each project has a fancy top bar displaying the time it took and additional information about the project using these styles:

/** project details **/
div.projectInfoView {
	display: flex;
	text-align: center;
}

div.projectDate {
	background-color: #222;
	color: white;
	flex: 1;
}

div.projectTime {
	background-color: #00a0d2;
	color: white;
	flex: 1;
}

div.projectLanguage {
	background-color: #0073aa;
	color: white;
	flex: 1;
}

div.projectLOC {
	background-color: #333;
	color: white;
	flex: 1;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.