CyberSafe/about.html at main · CyberSnackCat/CyberSafe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="About CyberSafe - Meet the founder and learn about our mission to provide practical cybersecurity education.">
    <title>About - CyberSafe</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="assets/images/cybersafe-shield-logo.png">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar" id="navbar">
        <div class="container nav-container">
            <div class="logo">
                <span>CyberSafe</span>
            </div>
            <div class="nav-toggle" id="navToggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-menu" id="navMenu">
                <li><a href="index.html" class="nav-link">Home</a></li>
                <li><a href="index.html#what-we-do" class="nav-link">What We Do</a></li>
                <li><a href="index.html#workshops" class="nav-link">Workshops</a></li>
                <li><a href="downloads.html" class="nav-link">Learn</a></li>
                <li><a href="about.html" class="nav-link active">About</a></li>
            </ul>
        </div>
    </nav>

    <!-- About Header -->
    <section class="about-header">
        <div class="container">
            <h1 class="fade-in-up">About CyberSafe</h1>
            <p class="fade-in-up">Meet the founder and learn about our mission</p>
        </div>
    </section>

    <!-- About Content -->
    <section class="about-section">
        <div class="container">
            <div class="about-content">
                <div class="about-image fade-in-up">
                    <img src="assets/images/B photo cybersafe.png" alt="Founder">
                </div>
                <div class="about-text fade-in-up">
                    <div class="about-intro">
                        <h2>Hi, I'm Ben 👋</h2>
                        <p class="subtitle">High School Student · Cybersecurity Advocate · Community Educator</p>
                    </div>

                    <div class="about-story">
                        <p>I'm a high school student with a passion for cybersecurity and digital safety. Ever since I first got my hands on a device, I've been fascinated by how technology works—and yes, even finding ways around parental controls taught me how much I love discovering loopholes.</p>

                        <p>Over the years, I've seen how quickly technology evolves and how hard it can be for people to keep up, especially older adults. I've also seen the rise in online scams and the real harm they cause. That's why I started <strong>CyberSafe in the Community</strong>—to empower adults with the knowledge and tools they need to protect themselves online.</p>
                    </div>

                    <div class="mission-highlight">
                        <div class="mission-icon">🎯</div>
                        <div class="mission-text">
                            <h3>My Mission</h3>
                            <p>Help people feel confident using technology so they can stay connected with their families without fear.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Secondary profile: same layout as Ben's section -->
            <div class="about-content profile-secondary">
                <div class="about-image fade-in-up">
                    <img src="assets/images/Vedansh.jpg" alt="Vedansh Anand">
                </div>
                <div class="about-text fade-in-up">
                    <div class="about-intro">
                        <h2>Hi, I'm Vedansh 👋</h2>
                        <p class="subtitle">High School Student · Cybersecurity Enthusiast</p>
                    </div>
                    <div class="about-story">
                        <p>I'm passionate about making cybersecurity approachable and practical for everyone. I build guides and run workshops to help people spot scams, secure devices, and use technology confidently.</p>
                    </div>

                    <div class="mission-highlight vedansh-mission">
                        <div class="mission-icon">💡</div>
                        <div class="mission-text">
                            <h3>Vedansh's Mission</h3>
                            <p>Teach clear, practical steps that help people protect themselves online — one workshop and one community at a time.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mission-section fade-in-up">
                <h2>Our Mission</h2>
                <p>CyberSafe in the Community is dedicated to bridging the cybersecurity knowledge gap. We believe that everyone, regardless of age or tech-savviness, deserves access to practical, easy-to-understand cybersecurity education.</p>
                <p>We focus on:</p>
                <ul class="mission-list">
                    <li>Making cybersecurity education accessible and practical</li>
                    <li>Focusing on real-world threats and practical solutions</li>
                    <li>Empowering older adults with the knowledge to stay safe online</li>
                    <li>Creating a community where people feel confident with technology</li>
                    <li>Providing free, comprehensive resources for everyone</li>
                </ul>
            </div>

            <div class="cta-section fade-in-up">
                <h2>Ready to Stay Safe Online?</h2>
                <p>Explore our comprehensive guides and resources</p>
                <div class="cta-buttons">
                    <a href="index.html#workshops" class="btn btn-primary">View Workshops</a>
                    <a href="downloads.html" class="btn btn-secondary">View Resources</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="footer-logo">
                        <img src="assets/images/cybersafe-shield-logo.png" alt="CyberSafe Logo">
                        <span>CyberSafe</span>
                    </div>
                    <p>Practical, friendly guidance to help our community stay safe online.</p>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#workshops">Workshops</a></li>
                        <li><a href="downloads.html">Learn More</a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Key Topics</h4>
                    <ul>
                        <li><a href="assets/pdfs/recognizing-and-preventing-common-scams-guide.pdf">Scam Prevention</a></li>
                        <li><a href="assets/pdfs/password-safety-and-2fa-guide.pdf">Password Security</a></li>
                        <li><a href="assets/pdfs/safe-social-media-use-guide.pdf">Social Media Safety</a></li>
                        <li><a href="assets/pdfs/wi-fi-and-home-network-security-guide.pdf">Wi-Fi Security</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 CyberSafe in the Community. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button class="back-to-top" id="backToTop">
        <span>↑</span>
    </button>

    <script src="script.js"></script>
</body>
</html>