Skip to content

Commit 7306ac2

Browse files
0tieno0tieno
committed
feat: add react-icons dependency and enhance Explore page with new content and structure
1 parent 5e23e69 commit 7306ac2

File tree

3 files changed

+67
-114
lines changed

3 files changed

+67
-114
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"lucide-react": "^0.483.0",
1515
"react": "^19.0.0",
1616
"react-dom": "^19.0.0",
17+
"react-icons": "^5.5.0",
1718
"react-router-dom": "^7.4.0",
1819
"tailwindcss": "^4.0.15"
1920
},

‎src/pages/Explore.jsx‎

Lines changed: 56 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,81 @@
11
import React from 'react';
22
import Content from '../components/Content';
33
import { Link } from 'react-router-dom';
4+
import { FaXTwitter } from "react-icons/fa6"; // If you need the new X (Twitter) logo
5+
46

57
const Explore = () => {
68
return (
79
<Content>
810
<div className="max-w-4xl mx-auto p-6">
911
{/* Page Header */}
10-
<h2 className="text-3xl font-bold text-gray mb-4">Explore More Azure Cloud Security Topics</h2>
12+
<h2 className="text-3xl font-bold text-gray mb-4">Don't stop pushing</h2>
13+
{/* <p className="text-gray-300 mb-6">
14+
Continue your learning journey with the following certifications, projects, and resources.
15+
</p> */}
1116
<p className="text-gray-300 mb-6">
12-
In this section, you'll find additional learning materials, articles, certifications, projects, and resources to continue your journey in Azure Cloud Security. Explore various topics in-depth to enhance your skills and understanding.
13-
</p>
14-
15-
{/* Explore Categories */}
16-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
17-
{/* Category 1 */}
18-
<div className="bg-gray-800 p-4 rounded-lg shadow-md">
19-
<h3 className="text-xl font-semibold text-blue-400 mb-3">Azure Security Best Practices</h3>
20-
<p className="text-gray-300 mb-4">
21-
Learn about best practices to enhance security across Azure environments, from secure network design to identity management.
22-
</p>
23-
<Link to="/best-practices" className="text-blue-400 hover:underline">
24-
Learn More
25-
</Link>
26-
</div>
27-
28-
{/* Category 2 */}
29-
<div className="bg-gray-800 p-4 rounded-lg shadow-md">
30-
<h3 className="text-xl font-semibold text-blue-400 mb-3">Azure Identity & Access Management</h3>
31-
<p className="text-gray-300 mb-4">
32-
Explore advanced concepts in identity management, including role-based access control (RBAC) and multi-factor authentication (MFA).
33-
</p>
34-
<Link to="/iam" className="text-blue-400 hover:underline">
35-
Learn More
36-
</Link>
37-
</div>
38-
39-
{/* Category 3 */}
40-
<div className="bg-gray-800 p-4 rounded-lg shadow-md">
41-
<h3 className="text-xl font-semibold text-blue-400 mb-3">Network Security in Azure</h3>
42-
<p className="text-gray-300 mb-4">
43-
Understand how to secure your Azure network with tools like Azure Firewall, VPNs, and NSGs.
44-
</p>
45-
<Link to="/network-security" className="text-blue-400 hover:underline">
46-
Learn More
47-
</Link>
48-
</div>
49-
50-
{/* Category 4 */}
51-
<div className="bg-gray-800 p-4 rounded-lg shadow-md">
52-
<h3 className="text-xl font-semibold text-blue-400 mb-3">Data Protection and Encryption</h3>
53-
<p className="text-gray-300 mb-4">
54-
Explore strategies for data encryption at rest and in transit within Azure environments.
55-
</p>
56-
<Link to="/data-protection" className="text-blue-400 hover:underline">
57-
Learn More
58-
</Link>
59-
</div>
60-
</div>
17+
Keep building! Experiment, break things, and rebuild—learning happens in the process. 🚀
18+
</p>
6119

62-
{/* Featured Resources */}
63-
<div className="mt-8">
64-
<h3 className="text-2xl font-semibold text-gray mb-4">Featured Resources</h3>
6520

66-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
67-
<h4 className="text-xl font-semibold text-blue-400">Microsoft Azure Security Blog</h4>
68-
<p className="text-gray-300 mb-4">
69-
Stay up-to-date with the latest trends, news, and updates in Azure security by following the official blog.
70-
</p>
71-
<a href="https://techcommunity.microsoft.com/t5/security-compliance-and-identity/bd-p/security-compliance-identity" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
72-
Visit Blog
73-
</a>
21+
{/* Next Steps Section */}
22+
<div className="mt-8 bg-gray-800 p-6 rounded-lg shadow-md border-l-4 border-blue-500">
23+
<h3 className="text-2xl font-semibold text-blue-400 mb-4">Next Steps 🚀</h3>
24+
<p className="text-gray-300 mb-4">Advance your skills with these certifications and projects:</p>
25+
26+
{/* Certifications */}
27+
<div className="mb-6">
28+
<h4 className="text-xl font-semibold text-blue-400">📜 Certifications</h4>
29+
<ul className="list-disc pl-5 text-gray-300 mt-2 space-y-2">
30+
<li>
31+
<a href="https://learn.microsoft.com/en-us/certifications/azure-security-engineer/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
32+
Microsoft Certified: Azure Security Engineer Associate
33+
</a>
34+
</li>
35+
<li>
36+
<a href="https://learn.microsoft.com/en-us/certifications/azure-solutions-architect/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
37+
Microsoft Certified: Azure Solutions Architect Expert
38+
</a>
39+
</li>
40+
</ul>
7441
</div>
7542

76-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
77-
<h4 className="text-xl font-semibold text-blue-400">Azure Security Best Practices Documentation</h4>
78-
<p className="text-gray-300 mb-4">
79-
Access comprehensive security best practices for securing workloads and environments on Azure.
80-
</p>
81-
<a href="https://learn.microsoft.com/en-us/security/benchmark/azure/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
82-
Explore Best Practices
83-
</a>
43+
{/* Projects */}
44+
<div>
45+
<h4 className="text-xl font-semibold text-blue-400">💻 Projects</h4>
46+
<ul className="list-disc pl-5 text-gray-300 mt-2 space-y-2">
47+
<li>
48+
<Link to="/project/secure-web-app" className="text-blue-400 hover:underline">
49+
Deploy a Secure Azure Web Application
50+
</Link>
51+
</li>
52+
<li>
53+
<Link to="/project/security-dashboard" className="text-blue-400 hover:underline">
54+
Build an Azure Security Dashboard with Sentinel
55+
</Link>
56+
</li>
57+
</ul>
8458
</div>
59+
8560
</div>
8661

87-
{/* Certifications Section */}
88-
<div className="mt-8">
89-
<h3 className="text-2xl font-semibold text-gray mb-4">Certifications to Pursue</h3>
90-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
91-
<h4 className="text-xl font-semibold text-blue-400">Microsoft Certified: Azure Security Engineer Associate</h4>
92-
<p className="text-gray-300 mb-4">
93-
The Azure Security Engineer Associate certification validates your ability to implement security controls and threat protection, manage identity and access, and protect data and applications.
94-
</p>
95-
<a href="https://learn.microsoft.com/en-us/certifications/azure-security-engineer/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
96-
Explore Certification
97-
</a>
98-
</div>
99-
100-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
101-
<h4 className="text-xl font-semibold text-blue-400">Microsoft Certified: Azure Solutions Architect Expert</h4>
102-
<p className="text-gray-300 mb-4">
103-
The Azure Solutions Architect Expert certification is aimed at professionals who want to validate their ability to design cloud solutions, including aspects of security, networking, and storage.
104-
</p>
105-
<a href="https://learn.microsoft.com/en-us/certifications/azure-solutions-architect/" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
106-
Explore Certification
107-
</a>
108-
</div>
62+
{/* DevSecOps Coming Soon */}
63+
<div className="mt-8 bg-gray-800 p-6 rounded-lg shadow-md border-l-4 border-yellow-500 text-center">
64+
<h3 className="text-2xl font-semibold text-yellow-400 mb-4">DevSecOps – Coming Soon 🔐</h3>
65+
<p className="text-gray-300">
66+
Stay tuned for hands-on labs and resources on integrating security into DevOps workflows.
67+
</p>
10968
</div>
11069

111-
{/* Projects Section */}
112-
<div className="mt-8">
113-
<h3 className="text-2xl font-semibold text-gray mb-4">Projects to Build</h3>
114-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
115-
<h4 className="text-xl font-semibold text-blue-400">Deploy a Secure Azure Web Application</h4>
116-
<p className="text-gray-300 mb-4">
117-
Design and implement a web application in Azure, securing it using best practices such as RBAC, Azure Firewall, and DDoS protection.
118-
</p>
119-
<Link to="/project/secure-web-app" className="text-blue-400 hover:underline">
120-
Start Project
121-
</Link>
122-
</div>
123-
124-
<div className="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
125-
<h4 className="text-xl font-semibold text-blue-400">Build an Azure Security Dashboard with Sentinel</h4>
126-
<p className="text-gray-300 mb-4">
127-
Create a security monitoring dashboard using Azure Sentinel to visualize security incidents and configure threat detection rules.
128-
</p>
129-
<Link to="/project/security-dashboard" className="text-blue-400 hover:underline">
130-
Start Project
131-
</Link>
132-
</div>
70+
{/* Social Media Reminder */}
71+
<div className="mt-8 text-center">
72+
<p className="text-gray-300 text-lg flex items-center justify-center">
73+
Share your progress on <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer" className="text-blue-400 ml-2 hover:underline">X (Twitter)</a> <FaXTwitter className="ml-2 text-blue-400" />
74+
</p>
13375
</div>
13476
</div>
13577
</Content>
13678
);
13779
};
13880

139-
export default Explore;
81+
export default Explore;

0 commit comments

Comments
 (0)