Nullshade — Ethical Hacker Portfolio Website

Create a complete, production-quality, visually exceptional ethical hacker / cybersecurity professional portfolio website called Nullshade using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real portfolio for a cybersecurity professional, penetration tester, security researcher, or red-team specialist.

This is NOT a malicious hacking website.

This is NOT a fake movie-style hacker screen.

The design may use a terminal-inspired aesthetic, but it must remain:

• Professional
• Readable
• Credible
• Modern
• Technically refined
• Suitable for job applications and client work

The portfolio should communicate:

• Ethical security research
• Defensive thinking
• Technical skill
• Curiosity
• Discipline
• Problem solving
• Responsible disclosure
• Professional credibility

Do not include offensive instructions, exploit code, payloads, credential theft, phishing guidance, destructive commands, or malicious tooling instructions.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML in index.html.

Keep all CSS in style.css.

Keep all JavaScript in script.js.

Correctly connect all three files.

The website must work immediately when the three files are placed in the same directory.

No installation, framework, package manager, or build process should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• external JavaScript libraries
• backend frameworks
• databases
• real shell execution
• real scanning functionality
• exploit frameworks
• network attack functionality

Use inline SVG icons where appropriate.

This must remain a static portfolio.

---

3. BRAND IDENTITY

Portfolio identity:

NULLSHADE

Tagline:

Observe. Understand. Defend.

Nullshade is a fictional professional identity for an ethical hacker and security researcher.

The personality should feel:

• Calm
• Technical
• Focused
• Precise
• Minimal
• Slightly mysterious
• Professional

Avoid childish hacker clichés.

Do not use:

• Skulls
• Anonymous masks
• Hooded hacker stock photos
• Matrix rain
• Excessive green neon
• Fake police warnings

---

4. VISUAL DIRECTION

Create a sophisticated dark cyber aesthetic.

Suggested palette:

• Near black
• Graphite
• Deep navy
• Soft white
• Muted gray
• Controlled terminal green
• Cyan accent used sparingly
• Amber for warnings

Use green as an accent, not the entire design.

Use:

• Thin borders
• Monospace accents
• Clean sans-serif body typography
• Subtle grid texture
• Terminal-style panels
• Technical metadata
• Minimal glow
• Structured spacing

Avoid constant animation.

---

5. TYPOGRAPHY

Use two complementary typographic styles:

Primary

Clean modern sans-serif for:

• Body text
• Navigation
• Headings
• Project descriptions
• Experience

Technical Accent

Monospace for:

• Commands
• Labels
• Timestamps
• Security metadata
• Tags
• Terminal output

Do not use monospace for all content.

Use responsive clamp() typography.

---

6. NAVIGATION

Create a sticky navigation.

Include:

• NULLSHADE logo
• Home
• About
• Skills
• Projects
• CTF
• Experience
• Write-ups
• Contact

Add a CTA:

Open Terminal

This should scroll to or open the safe interactive terminal section.

---

7. MOBILE NAVIGATION

Create an accessible mobile menu.

Requirements:

• Hamburger button
• Smooth open/close
• Escape closes
• Link click closes
• Correct ARIA state
• Body scroll lock
• Large touch targets

Add:

Open Terminal

as a mobile CTA.

---

8. HERO SECTION

Create a strong hero that mixes professional identity with terminal-inspired design.

Left side:

Small label:

ETHICAL HACKER · SECURITY RESEARCHER

Main headline:

I find weaknesses before they become incidents.

Supporting text:

“Security researcher focused on web security, cloud environments, threat analysis, and practical defensive improvements.”

Primary CTA:

View Security Work

Secondary CTA:

Open Terminal

Add social links:

• GitHub
• LinkedIn
• Email
• Security Blog

Right side:

Create a realistic security workstation composition using HTML/CSS.

Include:

• Terminal panel
• Security status panel
• Small code block
• Profile identity card

Do not use a giant stock photo.

---

9. HERO TERMINAL

Create a small safe animated terminal panel.

Example:

$ whoami

Output:

nullshade

$ role

Output:

ethical hacker / security researcher

$ status

Output:

available for security research & consulting

Use a short typing effect.

Keep it fast.

Respect prefers-reduced-motion.

---

10. QUICK STATUS STRIP

Add a compact status row:

Focus Web Security

Current Cloud Security Research

CTFs 42 Completed

Reports 18 Responsible Disclosures

Use fictional/demo numbers.

Keep it visually restrained.

---

11. ABOUT SECTION

Create:

About

Heading:

Curious by nature. Defensive by principle.

Write realistic professional copy about a security researcher who:

• Studies how systems fail
• Tests applications responsibly
• Documents findings clearly
• Helps teams reduce real-world risk
• Values responsible disclosure
• Focuses on learning and defense

Include a small code-style personal profile block:

Name: Nullshade

Role: Security Researcher

Location: Southeast Asia

Focus: Web / Cloud / Application Security

Status: Open to selected projects

---

12. SECURITY SKILLS

Create grouped skills.

Web Security

• Authentication Review
• Authorization Testing
• Session Security
• Input Validation
• Security Headers
• API Security

Cloud Security

• IAM Review
• Configuration Assessment
• Exposure Review
• Logging & Monitoring
• Least Privilege

Infrastructure

• Linux
• Docker
• Networking
• Web Servers
• TLS
• Reverse Proxies

Defensive Analysis

• Log Analysis
• Threat Modeling
• Incident Triage
• Vulnerability Management
• Security Hardening

Keep skills defensive and professional.

---

13. TOOLS SECTION

Create a compact tools section.

Include:

• Burp Suite
• Wireshark
• Nmap
• Linux
• Docker
• Git
• OWASP ZAP
• SIEM-style tools

Do not include usage instructions.

Do not provide attack commands.

Use tools only as portfolio skill indicators.

---

14. FEATURED SECURITY PROJECTS

Create at least 6 projects.

Sentinel View

Security monitoring dashboard for reviewing alerts and asset status.

AuthGuard Lab

Demo application exploring secure authentication and authorization patterns.

LogLens

Frontend visualization for analyzing fictional security events.

CloudCheck

Cloud security checklist and posture-review interface.

HeaderScan UI

Educational interface showing recommended web security headers.

Incident Timeline

Interactive visualization for documenting incident-response steps.

Each project should include:

• Title
• Category
• Short description
• Technologies
• Screenshot/mockup
• View Project
• Source Code placeholder

Do not include malicious functionality.

---

15. PROJECT FILTERING

Create filters:

• All
• Web Security
• Cloud
• Defensive Tools
• Research
• Labs

Implement with vanilla JavaScript.

Use subtle transitions.

---

16. SECURITY LABS

Create a section:

Security Labs

Explain that these are safe local/demo environments used for learning and testing.

Examples:

Broken Auth Lab

Focus: Authentication mistakes and secure remediation.

Access Control Lab

Focus: Understanding authorization logic and defensive fixes.

API Security Lab

Focus: Secure API design and validation.

Logging Lab

Focus: How useful logging improves incident detection.

Do not provide exploitation steps.

Keep descriptions high-level and defensive.

---

17. CTF SECTION

Create:

CTF & Challenges

Show fictional challenge achievements.

Categories:

• Web
• Crypto
• Forensics
• OSINT
• Reverse Engineering

Example stats:

42 Challenges Completed

12 Web Challenges

9 Forensics

8 Crypto

7 OSINT

6 Reverse Engineering

Do not include challenge solutions that enable real-world abuse.

---

18. CTF ACHIEVEMENT CARDS

Create example entries:

Web Fortress

Category: Web

Difficulty: Hard

Status: Solved

Hidden Signal

Category: Forensics

Difficulty: Medium

Status: Solved

Cipher Trail

Category: Crypto

Difficulty: Medium

Status: Solved

Open Source Hunt

Category: OSINT

Difficulty: Easy

Status: Solved

Keep them fictional.

---

19. CERTIFICATIONS

Create a professional certification section.

Use placeholder examples such as:

• Security+
• eJPT-style placeholder
• Cloud Security Fundamentals
• Web Security Training
• Incident Response Fundamentals

If referencing real certifications, do not falsely claim active credentials.

Clearly treat them as sample portfolio entries.

Each item should include:

• Certification
• Issuer
• Year
• Credential link placeholder

---

20. EXPERIENCE TIMELINE

Create a professional timeline.

Example:

Security Researcher

2025 — Present

Responsibilities:

• Review application security
• Document vulnerabilities
• Support remediation
• Perform threat modeling
• Improve defensive controls

Junior Security Analyst

2023 — 2025

Responsibilities:

• Analyze alerts
• Review logs
• Support incident investigations
• Track remediation

Systems / Web Developer

2021 — 2023

Responsibilities:

• Build web applications
• Maintain Linux environments
• Improve application security

Use fictional company placeholders.

---

21. RESPONSIBLE DISCLOSURE

Create an important section:

Responsible Disclosure

Heading:

Security research should improve systems, not harm them.

Explain principles:

• Test only with permission
• Minimize impact
• Protect sensitive data
• Report clearly
• Allow time for remediation
• Avoid public disclosure before fixes

This section should reinforce ethical professionalism.

---

22. WRITE-UPS

Create:

Research Notes

Add 4 safe article previews.

Examples:

What Good Security Logging Looks Like

Defensive Engineering

Common Authentication Design Mistakes

Application Security

Why Least Privilege Matters in Cloud Environments

Cloud Security

Building a Better Incident Timeline

Incident Response

Each includes:

• Category
• Date
• Title
• Short excerpt
• Read Write-up

Do not include exploit walkthroughs.

---

23. INTERACTIVE SAFE TERMINAL

Create a polished fake terminal using vanilla JavaScript.

Supported commands:

help

about

skills

projects

ctf

certs

experience

contact

clear

whoami

status

Each command should return prewritten safe portfolio information.

Example:

$ help

Output:

Available commands: help, about, skills, projects, ctf, certs, experience, contact, clear

Do NOT support:

• shell execution
• network commands
• file access
• operating-system commands
• real command execution

This terminal must be completely simulated.

---

24. TERMINAL UX

Requirements:

• Command history using up/down arrows
• Enter executes fake command
• Clear command resets output
• Auto-scroll to newest output
• Keyboard focus
• Accessible labels
• Mobile-friendly input

Use a blinking cursor sparingly.

Do not create aggressive typing delays.

---

25. SECURITY DASHBOARD

Create a small personal security-research dashboard.

Include:

Current Research Cloud Identity

Open Labs 3

Write-ups 12

CTF Score 4,820

Latest Activity Reviewed authentication flows

Use clearly fictional/demo values.

---

26. TESTIMONIALS / REFERENCES

Create 3 professional fictional references.

Example:

“Clear findings, practical remediation advice, and strong communication throughout the review.”

— Engineering Lead

Keep them believable.

Do not invent real companies.

---

27. AVAILABILITY SECTION

Create:

Current Status

Example:

Available for selected security reviews and research collaborations.

Show areas:

• Web Application Review
• Cloud Security Review
• Security Architecture Feedback
• Defensive Security Consulting

Avoid offering illicit hacking services.

---

28. CONTACT SECTION

Create:

Let’s talk security.

Include:

• Email
• LinkedIn
• GitHub
• Location placeholder

Contact form:

• Name
• Email
• Company
• Project Type
• Message

Project Type options:

• Security Review
• Security Research
• Cloud Security
• Advisory
• Collaboration
• Other

Frontend-only validation.

After valid submission, show:

“Your message is ready. This demo form is not connected to a live mail service.”

Do not pretend it was sent.

---

29. PGP / SECURITY CONTACT

Create a small security-contact block.

Include:

Security Contact

Email: [email protected]

PGP: Demo Public Key Available

Do not include a real key.

Add:

Copy Fingerprint

with a fictional/demo fingerprint.

Make it clear it is placeholder data.

---

30. FOOTER

Create a refined cyber footer.

Include:

NULLSHADE

Tagline:

Observe. Understand. Defend.

Navigation:

• About
• Skills
• Projects
• CTF
• Write-ups
• Contact

Social:

• GitHub
• LinkedIn
• Security Blog

Add dynamic year.

Add back-to-top control.

---

31. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Scrolled navbar state
• Active section tracking
• Smooth scrolling
• Hero typing sequence
• Project filtering
• Safe interactive terminal
• Terminal command history
• CTF filter if included
• Copy demo fingerprint
• Testimonial slider
• Contact form validation
• Scroll reveal
• Back-to-top
• Dynamic year

Use vanilla JavaScript only.

---

32. TERMINAL SAFETY

The terminal must be a visual simulation only.

Never execute user input as:

• Shell commands
• JavaScript
• HTML
• URLs
• System commands

Treat all user input as plain text.

Only match known commands from a fixed allowlist.

Unknown command example:

command not found — type "help"

Do not evaluate input.

Do not use eval().

Do not inject unsanitized input with innerHTML.

---

33. IMAGE DIRECTION

Use imagery sparingly.

Suitable imagery:

• Security workstation
• Code editor
• Abstract network graphics
• Laptop/workspace
• Server infrastructure
• Technical diagrams

Avoid:

• Hooded hackers
• Anonymous masks
• Skulls
• Guns
• Dark criminal imagery

Most visual interest should come from:

• UI
• Typography
• Terminal
• Security dashboards
• Technical layouts

---

34. MOTION DIRECTION

Use restrained technical animation.

Appropriate:

• Short typewriter effect
• Terminal cursor
• Fade-up
• Small panel transitions
• Progress indicator animation
• Project hover

Avoid:

• Glitch every second
• Screen shake
• Matrix rain
• Flashing warnings
• Constant scanning beams
• Overly aggressive neon flicker

Respect prefers-reduced-motion.

---

35. RESPONSIVE DESIGN

Design intentionally for:

• 320px
• 375px
• 430px
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Simplify hero workstation
• Keep terminal readable
• Wrap command output
• Stack skills properly
• Make timeline readable
• Keep project cards spacious
• Ensure input controls are touch-friendly
• Avoid text smaller than comfortable reading size

No horizontal overflow.

---

36. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• One H1
• Logical heading hierarchy
• Keyboard-friendly navigation
• Accessible terminal input
• Visible focus states
• Form labels
• Accessible buttons
• Alt text
• Good contrast
• Accessible sliders
• Proper status messaging

Do not rely only on green/red color to communicate status.

---

37. SEO

Add professional portfolio SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Person structured data using JSON-LD with clearly fictional/sample profile information.

Do not add fake credentials or ratings.

---

38. PERFORMANCE

Keep the site lightweight.

Requirements:

• No frameworks
• No external JS libraries
• No background videos
• Efficient terminal implementation
• Efficient scroll handling
• Lazy-load below-the-fold images
• Stable image containers
• Minimal layout shift
• No unnecessary loops

---

39. CSS QUALITY

Organize CSS:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Terminal
9. About
10. Skills
11. Projects
12. CTF
13. Experience
14. Write-ups
15. Contact
16. Footer
17. Animation
18. Responsive
19. Reduced motion

Use:

• CSS variables
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern CSS

Avoid excessive !important.

---

40. JAVASCRIPT QUALITY

Write clean vanilla JavaScript.

Requirements:

• No eval()
• No dynamic code execution
• Allowlisted terminal commands only
• Clear function names
• Reusable helpers
• Missing-element guards
• Minimal global state
• No console errors

Essential content should remain visible if JavaScript fails.

---

41. CONTENT QUALITY

Do not use Lorem Ipsum.

Write realistic ethical-hacker and cybersecurity-professional content.

Avoid phrases such as:

• I hack anything
• Elite hacker
• Untraceable
• I break into systems
• Cyber warrior
• Digital assassin

Use professional security language.

---

42. VISUAL RHYTHM

Do NOT build the page as repeated cards.

Use a structure like:

Professional cyber hero

→ Status strip

→ About

→ Skills matrix

→ Featured projects

→ Security labs

→ CTF

→ Experience timeline

→ Responsible disclosure

→ Research notes

→ Interactive terminal

→ Contact

→ Footer

The final site should feel like a carefully designed security professional portfolio.

---

43. FINAL QUALITY CHECK

Before returning code, verify:

• All three files connect
• Mobile menu works
• Hero terminal works
• Safe terminal works
• Unknown commands are handled safely
• No code execution is possible
• Project filters work
• Testimonial controls work
• Form validation works
• Copy fingerprint works
• All navigation anchors exist
• No undefined variables
• No console errors
• No horizontal overflow
• Terminal is usable on mobile
• Keyboard accessibility works
• Reduced-motion support works
• No unsafe cybersecurity functionality is included
• No prohibited dependencies are included

Fix all issues before returning the code.

---

44. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do NOT write:

“remaining code”

“continue here”

“add more projects”

“same pattern”

Do not return pseudo-code.

Do not omit implementation to save response length.

Everything must be complete and immediately usable.

The final Nullshade website should feel technical, dark, credible, polished, responsive, ethical, professional, and screenshot-worthy enough to look like a real cybersecurity researcher portfolio rather than a fake movie hacker page.