Skip to content

Commit ed52877

Browse files
LemophileLemophile
committed
Complete redesign: cybersecurity-focused site with KrakenNet, TikTok boost, and security guides
1 parent d9eb7a2 commit ed52877

4 files changed

Lines changed: 230 additions & 96 deletions

File tree

‎app/guides/page.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import { FaShieldAlt, FaSearch, FaLock, FaBrain, FaBook, FaArrowRight } from 'react-icons/fa';
5+
import Link from 'next/link';
6+
7+
export default function Guides() {
8+
const guides = [
9+
{
10+
title: 'Operational Security (OpSec)',
11+
description: 'Complete guide to maintaining operational security in digital environments. Learn how to protect your identity, communications, and activities.',
12+
icon: FaShieldAlt,
13+
topics: ['Digital anonymity', 'Secure communications', 'Identity protection', 'Counter-surveillance'],
14+
level: 'Intermediate',
15+
readTime: '15 min',
16+
href: '/guides/opsec'
17+
},
18+
{
19+
title: 'Open Source Intelligence (OSINT)',
20+
description: 'Master the art of gathering intelligence from publicly available sources. Learn advanced techniques for information gathering and analysis.',
21+
icon: FaSearch,
22+
topics: ['Social media analysis', 'Geolocation tracking', 'Document analysis', 'Tool automation'],
23+
level: 'Beginner',
24+
readTime: '20 min',
25+
href: '/guides/osint'
26+
},
27+
{
28+
title: 'Pentesting Fundamentals',
29+
description: 'Essential guide to penetration testing methodologies and techniques. Learn how to identify and exploit security vulnerabilities.',
30+
icon: FaLock,
31+
topics: ['Reconnaissance', 'Scanning', 'Exploitation', 'Post-exploitation'],
32+
level: 'Advanced',
33+
readTime: '25 min',
34+
href: '/guides/pentesting'
35+
},
36+
{
37+
title: 'Machine Learning for Security',
38+
description: 'Apply machine learning techniques to cybersecurity challenges. Learn how to build intelligent security systems.',
39+
icon: FaBrain,
40+
topics: ['Anomaly detection', 'Threat classification', 'Pattern recognition', 'Automated defense'],
41+
level: 'Advanced',
42+
readTime: '30 min',
43+
href: '/guides/ml-security'
44+
}
45+
];
46+
47+
const getLevelColor = (level: string) => {
48+
switch(level) {
49+
case 'Beginner': return 'text-green-400 bg-green-500/20';
50+
case 'Intermediate': return 'text-yellow-400 bg-yellow-500/20';
51+
case 'Advanced': return 'text-red-400 bg-red-500/20';
52+
default: return 'text-gray-400 bg-gray-500/20';
53+
}
54+
};
55+
56+
return (
57+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-red-900/20 to-gray-900 pt-20">
58+
<div className="container mx-auto px-6 py-20">
59+
<motion.div
60+
initial={{ opacity: 0, y: 30 }}
61+
animate={{ opacity: 1, y: 0 }}
62+
transition={{ duration: 0.6 }}
63+
className="text-center mb-16"
64+
>
65+
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
66+
Security <span className="text-gradient">Guides</span>
67+
</h1>
68+
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
69+
Comprehensive guides covering essential cybersecurity topics.
70+
From basic concepts to advanced techniques, learn from practical examples and real-world scenarios.
71+
</p>
72+
</motion.div>
73+
74+
<div className="grid md:grid-cols-2 gap-8 mb-16">
75+
{guides.map((guide, index) => (
76+
<motion.div
77+
key={guide.title}
78+
initial={{ opacity: 0, y: 30 }}
79+
animate={{ opacity: 1, y: 0 }}
80+
transition={{ duration: 0.6, delay: index * 0.2 }}
81+
className="card-hover group"
82+
>
83+
<div className="flex items-start justify-between mb-4">
84+
<div className="p-3 bg-red-500/20 rounded-lg">
85+
<guide.icon className="w-6 h-6 text-red-400" />
86+
</div>
87+
<div className="flex items-center space-x-2">
88+
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getLevelColor(guide.level)}`}>
89+
{guide.level}
90+
</span>
91+
<span className="text-gray-400 text-xs">{guide.readTime}</span>
92+
</div>
93+
</div>
94+
95+
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-red-400 transition-colors">
96+
{guide.title}
97+
</h3>
98+
99+
<p className="text-gray-300 mb-4 leading-relaxed">
100+
{guide.description}
101+
</p>
102+
103+
<div className="mb-4">
104+
<div className="flex flex-wrap gap-2">
105+
{guide.topics.slice(0, 3).map((topic) => (
106+
<span
107+
key={topic}
108+
className="px-2 py-1 bg-gray-800 text-gray-400 rounded text-xs"
109+
>
110+
{topic}
111+
</span>
112+
))}
113+
{guide.topics.length > 3 && (
114+
<span className="px-2 py-1 bg-gray-800 text-gray-400 rounded text-xs">
115+
+{guide.topics.length - 3} more
116+
</span>
117+
)}
118+
</div>
119+
</div>
120+
121+
<Link
122+
href={guide.href}
123+
className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors"
124+
>
125+
<span>Read Guide</span>
126+
<FaArrowRight className="w-4 h-4" />
127+
</Link>
128+
</motion.div>
129+
))}
130+
</div>
131+
132+
<motion.div
133+
initial={{ opacity: 0, y: 30 }}
134+
animate={{ opacity: 1, y: 0 }}
135+
transition={{ duration: 0.6, delay: 0.8 }}
136+
className="text-center"
137+
>
138+
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-6 max-w-2xl mx-auto">
139+
<FaBook className="w-8 h-8 text-red-400 mx-auto mb-4" />
140+
<h3 className="text-xl font-bold text-white mb-2">Coming Soon</h3>
141+
<p className="text-gray-300 mb-4">
142+
More detailed guides with practical examples, code snippets, and hands-on exercises are in development.
143+
</p>
144+
<Link
145+
href="/contact"
146+
className="inline-flex items-center space-x-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
147+
>
148+
<span>Request Specific Topics</span>
149+
<FaArrowRight className="w-4 h-4" />
150+
</Link>
151+
</div>
152+
</motion.div>
153+
</div>
154+
</div>
155+
);
156+
}

‎app/projects/page.tsx‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,52 @@
11
'use client';
22

33
import { motion } from 'framer-motion';
4-
import { FaGithub, FaExternalLinkAlt, FaReact, FaNodeJs, FaPython, FaDatabase } from 'react-icons/fa';
4+
import { FaGithub, FaExternalLinkAlt, FaNetworkWired, FaShieldAlt, FaBug, FaChartLine } from 'react-icons/fa';
55
import Link from 'next/link';
66

77
export default function Projects() {
88
const projects = [
99
{
10-
title: 'E-Commerce Platform',
11-
description: 'A full-featured e-commerce platform with real-time inventory management, payment processing, and admin dashboard.',
12-
tech: ['React', 'Node.js', 'MongoDB', 'Stripe'],
13-
icon: FaReact,
14-
github: 'https://github.com/Lemophile/ecommerce',
15-
demo: 'https://ecommerce-demo.com',
16-
featured: true
17-
},
18-
{
19-
title: 'Task Management App',
20-
description: 'Collaborative task management application with real-time updates, drag-and-drop interface, and team collaboration features.',
21-
tech: ['Next.js', 'TypeScript', 'PostgreSQL', 'Socket.io'],
22-
icon: FaNodeJs,
23-
github: 'https://github.com/Lemophile/task-manager',
24-
demo: 'https://taskmanager-demo.com',
25-
featured: true
26-
},
27-
{
28-
title: 'Weather Dashboard',
29-
description: 'Beautiful weather dashboard with location-based forecasts, interactive maps, and detailed weather analytics.',
30-
tech: ['React', 'API Integration', 'Chart.js', 'Geolocation'],
31-
icon: FaPython,
32-
github: 'https://github.com/Lemophile/weather-app',
33-
demo: 'https://weather-demo.com',
34-
featured: false
10+
title: 'KrakenNet',
11+
description: 'Advanced DoS research platform for network security testing and vulnerability assessment. Designed for educational and research purposes to understand network attack vectors.',
12+
tech: ['Python', 'Scapy', 'Network Security', 'DoS Testing'],
13+
icon: FaNetworkWired,
14+
github: 'https://github.com/Lemophile/krakennet',
15+
demo: null,
16+
featured: true,
17+
type: 'Research',
18+
warning: 'For educational and research purposes only'
3519
},
3620
{
37-
title: 'Blog Platform',
38-
description: 'Modern blogging platform with markdown support, user authentication, and responsive design.',
39-
tech: ['Next.js', 'MDX', 'Prisma', 'Tailwind'],
40-
icon: FaDatabase,
41-
github: 'https://github.com/Lemophile/blog-platform',
42-
demo: 'https://blog-demo.com',
43-
featured: false
21+
title: 'TikTok Visibility Boost',
22+
description: 'Exploit-based tool for enhancing TikTok video visibility through platform vulnerabilities. Demonstrates social media security flaws.',
23+
tech: ['Python', 'API Exploitation', 'Social Media', 'Security Research'],
24+
icon: FaChartLine,
25+
github: 'https://github.com/Lemophile/tiktok-boost',
26+
demo: null,
27+
featured: true,
28+
type: 'Exploit',
29+
warning: 'Proof of concept for security research'
4430
},
4531
{
46-
title: 'Portfolio Website',
47-
description: 'Personal portfolio website with smooth animations, dark mode, and optimized performance.',
48-
tech: ['Next.js', 'Framer Motion', 'Tailwind CSS'],
49-
icon: FaReact,
50-
github: 'https://github.com/Lemophile/portfolio',
51-
demo: 'https://lemophile.github.io',
52-
featured: false
32+
title: 'Network Scanner',
33+
description: 'Comprehensive network scanning tool for security assessments and vulnerability discovery.',
34+
tech: ['Python', 'Nmap', 'Network Analysis', 'Security'],
35+
icon: FaShieldAlt,
36+
github: 'https://github.com/Lemophile/network-scanner',
37+
demo: null,
38+
featured: false,
39+
type: 'Tool'
5340
},
5441
{
55-
title: 'API REST Service',
56-
description: 'RESTful API service with authentication, rate limiting, and comprehensive documentation.',
57-
tech: ['Node.js', 'Express', 'JWT', 'Swagger'],
58-
icon: FaNodeJs,
59-
github: 'https://github.com/Lemophile/api-service',
42+
title: 'Exploit Framework',
43+
description: 'Modular exploit development framework for testing and demonstrating security vulnerabilities.',
44+
tech: ['Python', 'Metasploit', 'Exploit Dev', 'Security'],
45+
icon: FaBug,
46+
github: 'https://github.com/Lemophile/exploit-framework',
6047
demo: null,
61-
featured: false
48+
featured: false,
49+
type: 'Framework'
6250
}
6351
];
6452

‎components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ const Header = () => {
2525

2626
const navItems = [
2727
{ name: 'Home', href: '/' },
28-
{ name: 'About', href: '/about' },
2928
{ name: 'Projects', href: '/projects' },
29+
{ name: 'Security Guides', href: '/guides' },
3030
{ name: 'Contact', href: '/contact' }
3131
];
3232

0 commit comments

Comments
 (0)