🖥️ Codnoz Portfolio — Free Open-Source Hacker Portfolio Template

🔥 Free to use. Clone it. Customize it. Make it yours.

A premium, dark-themed developer portfolio built with HTML, CSS, JavaScript, GSAP animations, and Tailwind CSS. Designed for developers, ethical hackers, and cybersecurity professionals.

🌐 Live Demo → ethicalcodnoz.github.io/codnoz-portfolio

Created by @ethicalcodnoz

---

📸 Preview

---

🆓 How to Use This Template

This portfolio is 100% free and open source. Anyone can download, customize, and deploy their own version.

Step 1 — Clone

git clone https://github.com/ethicalcodnoz/codnoz-portfolio.git
cd codnoz-portfolio

Step 2 — Customize

Open index.html in any code editor and replace:

• Name — Search codnoz and replace with your name/alias
• Bio — Update the hero subtitle and about section with your info
• Age / Stats — Change the numbers to match your profile
• Social Links — Replace Telegram, GitHub, X, Instagram URLs with yours
• Logo — Replace codnoz-logo.jpg with your own avatar
• Tech Stack — Add or remove tech tiles in the stack section
• Bots/Projects — Update the bot cards with your own projects

Step 3 — Deploy (Free)

Option A — GitHub Pages (Recommended)

1. Fork this repo
2. Go to Settings → Pages
3. Set source: Deploy from branch → main → / (root)
4. Your site is live at https://yourusername.github.io/codnoz-portfolio/

Option B — Vercel

npx vercel --prod

Option C — Netlify

1. Drag and drop the folder at netlify.com/drop

Option D — Just open it

# Windows
start index.html

# Mac
open index.html

---

✨ Features

Feature	Description
🎨 Dark Hacker Aesthetic	Custom dark theme with green accents, terminal-style elements, monospace typography
🚀 GSAP Animations	Smooth scroll-triggered reveals, counter animations, parallax effects
🖱️ Custom Cursor	Ring-follow cursor with hover interactions
📊 GitHub Activity Grid	Contribution graph with dynamic rendering
🤖 Bot/Project Showcase	Dedicated section with feature tags and links
💻 Tech Stack Grid	30+ tools organized in 6 categories with hover effects
📱 Fully Responsive	Mobile-first, works on all screen sizes
⚡ Smooth Scroll	Lenis-powered buttery smooth scrolling
🔗 Social Integration	Telegram, X, GitHub, Instagram with branded SVG icons
🎯 SEO Ready	Meta tags, semantic HTML, proper heading hierarchy
🔄 Loading Animation	Custom boot-up loader with progress bar
📌 Scroll Progress	Top bar showing page scroll position

---

🎨 Quick Customization Guide

Change Accent Color

Edit the CSS variable in styles.css:

:root {
  --green: #00ff88;    /* Change this to any color you want */
}

Change Fonts

The portfolio uses 3 Google Fonts. Swap them in index.html line 10:

• Inter — Body text
• JetBrains Mono — Code/terminal elements
• Space Grotesk — Headings

Add a New Project Card

Copy any .bot-card block in the bots section and update:

<a href="YOUR_LINK" target="_blank" class="bot-card reveal">
  <h4>Your Project Name</h4>
  <div class="handle">@your_handle</div>
  <p>Your project description here.</p>
  <div class="features"><span>Tag1</span><span>Tag2</span></div>
  <div class="launch">View Project <span class="arrow">↗</span></div>
</a>

---

🗂️ File Structure

codnoz-portfolio/
├── index.html         # Main page — edit this to customize
├── styles.css         # Full stylesheet (46KB)
├── script.js          # GSAP animations, cursor, activity grid
├── codnoz-logo.jpg    # Your avatar/logo
├── logo.svg           # SVG logo
├── logo-mark.svg      # SVG logo mark
├── screenshots/       # Preview images
└── README.md          # This file

---

🧰 Built With

• HTML5 — Semantic structure
• CSS3 — Custom properties, grid, flexbox, keyframes
• Tailwind CSS — Utility classes via CDN
• GSAP 3.12 — ScrollTrigger + timeline animations
• Lenis — Smooth scroll
• Google Fonts — Inter, JetBrains Mono, Space Grotesk

---

⭐ Show Support

If you liked this template:

1. Star ⭐ this repo
2. Follow @ethicalcodnoz on Instagram
3. Share with your friends who need a portfolio

---

📄 License

MIT License — completely free. Use it, modify it, ship it. Credit appreciated but not required.

---

👤 Author

@ethicalcodnoz — 17 y/o developer, ethical hacker & cybersecurity enthusiast

• 🌐 Portfolio: ethicalcodnoz.github.io/codnoz-portfolio
• 📸 Instagram: @ethicalcodnoz
• 💬 Telegram: @codnoz
• 🐙 GitHub: ethicalcodnoz
• 🐦 X: @EthicalCodnoz

---

Exploit. Explain. Educate. 🔥