Aykhan Ashrafov — a cybersecurity engineer's portfolio
A single-page personal portfolio for a security engineer working across blue team and red team. Built with React and Vite, around terminal aesthetics, a live log panel and a certifications section with verifiable credentials.
Visit live site- Client
- Aykhan Ashrafov — cybersecurity engineer (Cortex XDR, incident response), Baku
- Role
- Every stage of the project: concept, visual language, frontend development, motion and deployment.
- Stack
- React · Vite · Tailwind CSS · Framer Motion
- Date
- February 2026
- Languages
- 1 — EN
- Lighthouse (mobile)
- 97
A security specialist's personal site cannot be an ordinary CV page. In this field the person hiring wants three questions answered within seconds: is this candidate blue team or red team, which tools have they actually worked with, and can the certifications be verified. A standard portfolio template answers none of the three — and a neutral design with no relationship to the field makes the candidate look like an outsider to their own craft.
- Terminal aesthetics: monospace type, command-line markers and status labels throughout the interface
- Rotating role labels in the hero: Blue Team, Red Team, Cortex XDR
- A live log panel — lines stream through a ROOT@AYKHAN-SEC:~ window (firewall, handshake, traffic scan)
- A “SYSTEM ONLINE” status indicator and a neutralised-threats counter
- Four roles in chronological order: company, date range, description and skill tags
- The technical arsenal split into three columns: defensive (Blue Team & SOC), offensive (Red Team & Pentest), engineering (Development & DB)
- A status label beside every tool: Active, Scanning, Logging, Engaged, Root Access, Standby
- A portfolio section using clearance labels: Classified, Public, Restricted
- A certifications vault: issuer, date, credential ID and a verification link
- A “REQUEST CV” call to action and an availability status
The visual language was taken from the profession itself
The site is built on monospace type, command-line markers and a terminal window. That is not decoration: the people hiring a security specialist look at exactly these screens all day and recognise the language. A neutral corporate template would carry the same content while making the candidate look like an outsider — here the design itself is a signal of expertise.
Blue team and red team are shown side by side
Candidates in this field usually belong to one camp. The hero rotates both labels and the arsenal is split explicitly into defensive and offensive columns. The visitor reads the dual profile from the structure rather than from a list — and whichever role they are hiring for, they find their own column.
The log panel does what static copy cannot
“I monitor threats” appears on every CV and proves nothing. In its place the hero carries a streaming log window: a firewall block, a handshake decrypt, a traffic scan. That is a demonstration of what the work looks like rather than a claim about it. The same principle drives the neutralised-threats counter — a number gets read when it moves.
Every tool carries a status label
The problem with skill lists is that everything on them looks equally weighted — someone who once played with Kali Linux writes the same line as someone who lives in it. The Active, Standby and Root Access labels beside each tool carry that difference in a single word and turn the list into a map of real usage.
Certifications come with their credential IDs
A certification name on its own cannot be checked. So each one sits next to its issuer, date, credential ID and a verification link. That does upfront the work a recruiter would otherwise do by hand — and it signals that the candidate has nothing to hide.
One page, anchored navigation
A personal portfolio is usually read top to bottom in one sitting. So the sections are anchors on a single page rather than separate routes: experience, arsenal, certifications, contact. The visitor gets the whole picture without waiting for a single navigation, while the menu still allows a direct jump to the part they came for.
The site has been live since February 2026. PageSpeed Insights measures mobile performance at 97 — given the live log panel in the hero and the animations that run continuously, that means the effects are not holding up the loading of the actual content.
Tell me about your project — I usually reply the same day.
Nurlan Qadirov — Baku, Azerbaijan