How I built this site
A plain HTML and CSS site, built with three things in mind the whole time: make it easy to use, easy for everyone to read, and easy to find.
You won't find any page builders or heavy libraries here, nothing extra weighing things down. Just HTML, CSS, and a little JavaScript. That keeps the pages quick to load and the markup easy to follow, and it turns out those two goals line up nicely with what screen readers and search engines need too.
Here's how each part comes together.
Building it to be accessible
"Accessible" just means people can use the site no matter how they get around the web. Some visitors use a mouse. Others rely on a keyboard alone, or a screen reader that speaks the page out loud. I built with all three in mind from the start, instead of bolting accessibility on at the end.
Skip links
Skip links solve a real problem for keyboard and screen reader users. Without a mouse, you move through a page by pressing Tab, one link at a time. So without help, you'd end up tabbing through the entire menu on every single page before ever reaching the content you came for.
A skip link fixes that. It sits at the very top of the page, hidden until you tab to it, then jumps you straight past the menu. Under the hood, it's just an anchor link pointing at a section with a matching id, styled to stay off-screen until it's focused:
<a href="#main" class="skip-link">Skip to Content</a>
...
<main id="main" tabindex="-1">.skip-link {
position: absolute;
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}The homepage has two: Skip to Content and Skip to Work. Give it a try: click anywhere on the page, then press Tab. The first one slides right into view.
ARIA labels
ARIA attributes describe what something is to assistive tools like screen readers, without changing how it looks or behaves. Since a screen reader reads a page out loud in order, a bare icon or a vague link can leave someone guessing. That's where a label helps:
<nav aria-label="Primary">
<a href="https://dribbble.com/robcaran"
target="_blank" rel="noopener"
aria-label="Dribbble (opens in a new tab)">
Dribbble
</a>
<svg aria-hidden="true">...</svg>A few examples from this site: the top menu is labeled "Primary," so it reads as navigation, not just a pile of links. Links that open a new tab say so up front, and purely decorative icons get aria-hidden="true"; otherwise you'd hear "arrow, arrow, arrow" read out loud for no reason.
A few more accessibility touches
Semantic tags like <header>, <main>, and <footer> give the page a clear structure any tool can parse. Every image has real alt text describing what's actually in it. Keyboard focus gets a visible outline, so you never lose your place, and text stays far enough from the background to read comfortably. There's even a small entrance animation that turns itself off automatically if your device is set to prefer reduced motion.
Writing meta tags so links look right and pages get found
Meta tags live in the page's <head>, and you'll never actually see them on screen. Instead, they describe the page to other computers, mostly search engines and the apps people use to share links. Get them right, and a page shows up better in search and looks sharper the moment someone shares it.
Title tags
You know the title tag as the clickable blue line in search results; it's also what shows up in the browser tab. Each page here gets its own, written with words someone might actually search for, and kept under about sixty characters so nothing gets cut off:
<title>Robert Caran, Design Engineer and Developer</title>Meta descriptions
This is the short blurb under the title in a search result. It won't directly boost your ranking, but a clear one earns more clicks, which is the real point. Every page here has its own, a plain sentence or two, kept to around a hundred and fifty characters:
<meta name="description" content="A plain, honest summary of the page, written for the person reading the search results.">Telling search engines what to do
Setting the robots tag to "index, follow" tells search engines exactly that: go ahead and list this page, and feel free to follow its links too. Author, copyright, and date tags round out the picture, noting who made the page and when.
<meta name="robots" content="index, follow">
<meta name="author" content="Robert Caran">Canonical URLs
A page can often be reached through more than one address. So a canonical tag names the one address that should actually count, which keeps search engines from splitting a page's ranking across duplicates.
<link rel="canonical" href="https://robcaran.com/portfolio.html">Making shared links look good
That little preview card that pops up when you paste a link into LinkedIn or a group chat, title, blurb, image and all, is Open Graph doing its job. Every page here carries the core four tags, plus a matching set of Twitter card tags, so the preview looks right no matter where it lands.
<meta property="og:title" content="How I Built This Portfolio Site">
<meta property="og:type" content="article">
<meta property="og:image" content="https://robcaran.com/images/logo.svg">
<meta property="og:url" content="https://robcaran.com/portfolio.html">Built to be found and to load fast
A few SEO basics come free once you build carefully. The site is responsive, so it works on phones, and since most searches happen on one, that actually matters for ranking. Addresses stay clear and readable, like /portfolio.html, rather than some random string of characters. Content is real text instead of words baked into an image, because search engines read text far more easily than pixels. And a sitemap lists every page here so search engines can find them all, with a robots file pointing the way.
Why any of this matters
Usability, accessibility, and SEO sound like three separate chores. They're really the same habit wearing different hats. Clean, meaningful HTML helps a screen reader make sense of a page, and that exact same HTML helps Google make sense of it too. A fast, simple page is easier for a person to use, and it ranks better at the same time. Build it right once, and you quietly take care of all three. That's the approach behind every page here.
My approach to animation
Getting software to work is table stakes now. Anyone can ship that, especially with AI in the mix. What actually sets something apart is the taste in the details: how it feels, how it moves, whether it gets out of your way. Motion is a big part of that, but only when it earns its place. So I put every animation to a simple test: does it have a purpose, is it fast, and how often will someone see it? A quiet fade-in when the page loads earns its spot. A flourish you'd sit through a hundred times a day doesn't, and there the best animation is usually none at all.
I went back and forth on how much to use here. An earlier version of this site leaned hard on motion, and I noticed it started pulling attention away from the actual work. So I cut it down to one quiet thing: a single, fast fade-in when the page loads. The point was to build something that feels good and then stays out of your way.