Personal Portfolio Website
A responsive portfolio in plain HTML and CSS — no framework, no build step.
- HTML
- CSS
About this project
A complete personal portfolio: hero, about, skills, projects grid, and a contact section. Plain HTML and CSS — no framework, no build step, nothing to install. Open the file and it works.
It is deliberately unfashionable. A first portfolio built on a framework teaches you the framework; a first portfolio built on HTML and CSS teaches you the web. Every layout decision here is one you can read and change, and the whole colour scheme is a handful of CSS variables at the top of one file.
What you will learn
- Structure a page with semantic HTML that describes its own meaning
- Build a layout with Flexbox and CSS Grid, and know which to reach for
- Make a page work on a phone without writing a separate mobile site
- Use CSS custom properties so a colour change is one line, not forty
- Deploy a static site for free and put a real URL on your CV
Before you start
- Knowing what an HTML tag is. That is genuinely all.
New to HTML? The free HTML course covers everything this project assumes.
Academic integrity notice
These projects are provided for learning, experimentation and reference. Understand the code, modify it for your own requirements, and acknowledge external work according to your institution’s academic policies. Priodemy does not supply work to be submitted as your own.
Features
- Fully responsive from 320px upward, no separate mobile version
- Semantic HTML — header, nav, main, article, footer used correctly
- CSS Grid for the projects section, Flexbox for the smaller pieces
- Colour and spacing driven by CSS custom properties
- Dark mode via prefers-color-scheme
- Accessible: real focus states, alt text, sensible heading order
- Zero dependencies and zero build tooling
Technology stack
Track: Web Development · Level: Starter
What is included
- Complete HTML and CSS source, commented
- A guide to customising it as your own
- Free deployment instructions (GitHub Pages and Netlify)
- Placeholder images you can swap out
Delivered as a 6 KB ZIP. SHA-256 published under Changelog so you can verify it.
System requirements
- Operating system
- Any
- Runtime
- A web browser and a text editor
Licence
Learn from it, change it, and use it in your own coursework and personal projects. Do not resell it or pass it off as your own original work.
- Personal and educational use
- Modifying the code however you like
- Using it as the basis of your own coursework, with honest acknowledgement
- Putting your modified version in a portfolio or on your own GitHub
- Reselling or redistributing the project, modified or not
- Presenting it as your own original work
- Commercial deployment — see the Commercial licence
Support window: 6 months from download.
Frequently asked
Do I need to know JavaScript?
No. There is no JavaScript in this project. That is intentional — a portfolio does not need any, and leaving it out keeps the page fast and the code readable.
Can I use this as my actual portfolio?
Yes, that is what it is for. Replace the content with your own, change the colours, and deploy it. The licence permits personal and educational use.
How do I put it online for free?
The included guide covers GitHub Pages and Netlify. Both are free for a static site like this and take about ten minutes.
Changelog
- First release
SHA-256d90db1af1c390c9814874e55c350870a1e3ec7ddb5c401b1e120053417978be5
You might also like
Free Snake Game
The classic game in about 180 lines of plain JavaScript and a canvas.
- JavaScript
- Canvas
- HTML
Free Tic-Tac-Toe with AI
An opponent that plays perfectly, using minimax with alpha-beta pruning.
- JavaScript
- Minimax
- HTML
Free Typing Speed Test
A speed test that shows its own arithmetic, because WPM is a definition rather than a measurement.
- JavaScript
- CSS
- HTML
Free Memory Card Game
A concentration game built around the three states that stop fast clicks breaking the board.
- JavaScript
- CSS
- HTML