-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e53e18a
Showing
5 changed files
with
1,716 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,327 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Fatima BOUYARMANE - Portfolio</title> | ||
| <!-- Font Awesome for icons --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | ||
| <!-- Custom CSS --> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <!-- Navigation --> | ||
| <nav> | ||
| <div class="nav-content"> | ||
| <div class="logo">Fatima BOUYARMANE</div> | ||
| <div class="hamburger"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <ul class="nav-links"> | ||
| <li><a href="#home">Home</a></li> | ||
| <li><a href="#about">About</a></li> | ||
| <li><a href="#projects">Projects</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- Hero Section --> | ||
| <section id="home"> | ||
| <div class="hero-content"> | ||
| <h1>Hi, I'm Fatima BOUYARMANE</h1> | ||
| <p>Cybersecurity Student | CTF Enthusiast</p> | ||
| <div class="hero-buttons"> | ||
| <a href="#contact" class="btn primary-btn">Contact Me</a> | ||
| <a href="#projects" class="btn secondary-btn">View Projects</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- About Section --> | ||
| <section id="about"> | ||
| <div class="about-container"> | ||
| <h2 class="section-title">About Me</h2> | ||
| <div class="about-content"> | ||
| <div class="about-image-container"> | ||
| <div class="image-wrapper"> | ||
| <img src="images/My photo.jpeg" alt="Fatima BOUYARMANE" class="profile-image"> | ||
| </div> | ||
| <div class="social-links"> | ||
| <a href="https://www.linkedin.com/in/fatima-bouyarmane-919892228/" target="_blank" class="social-icon"> | ||
| <i class="fab fa-linkedin"></i> | ||
| <span class="tooltip">LinkedIn</span> | ||
| </a> | ||
| <a href="https://github.com/FatimaBouyarmane" target="_blank" class="social-icon"> | ||
| <i class="fab fa-github"></i> | ||
| <span class="tooltip">GitHub</span> | ||
| </a> | ||
| <a href="mailto:[email protected]" class="social-icon"> | ||
| <i class="fas fa-envelope"></i> | ||
| <span class="tooltip">Email</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="about-info"> | ||
| <div class="about-text"> | ||
| <h3 class="subtitle">Who I Am</h3> | ||
| <p class="bio"> | ||
| I'm a fourth-year cybersecurity student at EUROMED University, passionate about protecting digital systems and exploring the complexities of information security. My journey in cybersecurity has been driven by a deep curiosity for understanding how systems work and how to secure them effectively. | ||
| </p> | ||
| <p class="bio"> | ||
| Beyond technical skills, I pride myself on my ability to communicate complex security concepts clearly and work collaboratively with diverse teams. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="expertise-section"> | ||
| <h3 class="subtitle">Areas of Expertise</h3> | ||
| <div class="expertise-grid"> | ||
| <div class="expertise-card"> | ||
| <div class="card-icon"> | ||
| <i class="fas fa-shield-alt"></i> | ||
| </div> | ||
| <div class="card-content"> | ||
| <h4>Cybersecurity</h4> | ||
| <p>Specialized in system security and network protection, with hands-on experience in vulnerability assessment.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="expertise-card"> | ||
| <div class="card-icon"> | ||
| <i class="fas fa-flag"></i> | ||
| </div> | ||
| <div class="card-content"> | ||
| <h4>CTF Competitor</h4> | ||
| <p>Active participant in Capture The Flag competitions, developing practical security skills through challenges.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="expertise-card"> | ||
| <div class="card-icon"> | ||
| <i class="fas fa-rocket"></i> | ||
| </div> | ||
| <div class="card-content"> | ||
| <h4>Space Technology</h4> | ||
| <p>Passionate about space technology security and its unique cybersecurity challenges.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="skills-section"> | ||
| <h3 class="subtitle">Technical Skills</h3> | ||
| <div class="skills-container"> | ||
| <div class="skill-category"> | ||
| <h4>Security</h4> | ||
| <div class="skills-grid"> | ||
| <span class="skill-tag">Network Security</span> | ||
| <span class="skill-tag">Penetration Testing</span> | ||
| <span class="skill-tag">Incident Response</span> | ||
| </div> | ||
| </div> | ||
| <div class="skill-category"> | ||
| <h4>Analysis</h4> | ||
| <div class="skills-grid"> | ||
| <span class="skill-tag">Security Analysis</span> | ||
| <span class="skill-tag">Risk Assessment</span> | ||
| <span class="skill-tag">Threat Modeling</span> | ||
| </div> | ||
| </div> | ||
| <div class="skill-category"> | ||
| <h4>Tools & Technologies</h4> | ||
| <div class="skills-grid"> | ||
| <span class="skill-tag">Cryptography</span> | ||
| <span class="skill-tag">Security Tools</span> | ||
| <span class="skill-tag">SIEM</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Projects Section --> | ||
| <section id="projects"> | ||
| <div class="projects-container"> | ||
| <h2 class="section-title">My Projects</h2> | ||
| <div class="project-carousel"> | ||
| <div class="project-slider"> | ||
| <!-- Project 1 --> | ||
| <div class="project-slide"> | ||
| <div class="project-card"> | ||
| <div class="project-image"> | ||
| <img src="images/project1.png" alt="Project 1"> | ||
| <div class="project-links"> | ||
| <a href="#" class="project-link" target="_blank"> | ||
| <i class="fas fa-external-link-alt"></i> | ||
| <span>Live Demo</span> | ||
| </a> | ||
| <a href="https://github.com/Fatimabouyarmane/snort-IDS" class="project-link" target="_blank"> | ||
| <i class="fab fa-github"></i> | ||
| <span>Source Code</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="project-content"> | ||
| <h3>Snort Intrusion Detection System - IDS</h3> | ||
| <p>This project demonstrates how to configure and deploy Snort as an Intrusion Detection System to detect and analyze network-based threats through custom rules and attack simulations.</p> | ||
| <div class="project-tech"> | ||
| <span class="tech-tag">Threat Detection</span> | ||
| <span class="tech-tag">Log Analysis</span> | ||
| <span class="tech-tag">Simulating Network Attacks</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Project 2 --> | ||
| <div class="project-slide"> | ||
| <div class="project-card"> | ||
| <div class="project-image"> | ||
| <img src="project2.jpg" alt="Project 2"> | ||
| <div class="project-links"> | ||
| <a href="#" class="project-link" target="_blank"> | ||
| <i class="fas fa-external-link-alt"></i> | ||
| <span>Live Demo</span> | ||
| </a> | ||
| <a href="#" class="project-link" target="_blank"> | ||
| <i class="fab fa-github"></i> | ||
| <span>Source Code</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="project-content"> | ||
| <h3>Network Security Tool</h3> | ||
| <p>An advanced network security analysis tool for detecting and preventing potential security breaches.</p> | ||
| <div class="project-tech"> | ||
| <span class="tech-tag">Python</span> | ||
| <span class="tech-tag">Machine Learning</span> | ||
| <span class="tech-tag">Security</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Add more projects as needed --> | ||
| </div> | ||
|
|
||
| <div class="carousel-navigation"> | ||
| <button class="carousel-btn prev" aria-label="Previous project"> | ||
| <i class="fas fa-chevron-left"></i> | ||
| </button> | ||
| <div class="carousel-dots"></div> | ||
| <button class="carousel-btn next" aria-label="Next project"> | ||
| <i class="fas fa-chevron-right"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Contact Section --> | ||
| <section id="contact"> | ||
| <div class="contact-container"> | ||
| <div class="contact-header"> | ||
|
|
||
| <h2 class="section-title">Get In Touch</h2> | ||
| <div class="title-decoration"> | ||
| <span class="line"></span> | ||
| <i class="fas fa-envelope-open-text"></i> | ||
| <span class="line"></span> | ||
| </div> | ||
| <p class="contact-tagline"> | ||
| Let's collaborate on making the digital world more secure | ||
| </p> | ||
| <div class="quick-contact"> | ||
| <a href="mailto:[email protected]" class="quick-contact-item"> | ||
| <i class="fas fa-envelope"></i> | ||
| [email protected] | ||
| </a> | ||
| <span class="separator">|</span> | ||
| <a href="tel:+1234567890" class="quick-contact-item"> | ||
| <i class="fas fa-phone"></i> | ||
| +212634086082 | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="contact-wrapper"> | ||
| <div class="contact-info"> | ||
| <h3>Let's Connect</h3> | ||
| <p class="contact-description"> | ||
| I'm currently available for opportunities in cybersecurity. | ||
| Feel free to reach out if you'd like to collaborate or just have a chat! | ||
| </p> | ||
|
|
||
| <div class="contact-methods"> | ||
| <div class="contact-method"> | ||
| <i class="fas fa-envelope"></i> | ||
| <div class="method-info"> | ||
| <h4>Email</h4> | ||
| <a href="mailto:fbouyarmane@gmailcom">[email protected]</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="contact-method"> | ||
| <i class="fab fa-linkedin"></i> | ||
| <div class="method-info"> | ||
| <h4>LinkedIn</h4> | ||
| <a href="https://www.linkedin.com/in/fatima-bouyarmane-919892228/" target="_blank">Connect on LinkedIn</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="contact-method"> | ||
| <i class="fab fa-github"></i> | ||
| <div class="method-info"> | ||
| <h4>GitHub</h4> | ||
| <a href="https://github.com/FatimaBouyarmane" target="_blank">Follow on GitHub</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="contact-form-wrapper"> | ||
| <form class="contact-form" id="contactForm"> | ||
| <div class="form-group"> | ||
| <input type="text" id="name" name="name" required> | ||
| <label for="name">Name</label> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <input type="email" id="email" name="email" required> | ||
| <label for="email">Email</label> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <input type="text" id="subject" name="subject" required> | ||
| <label for="subject">Subject</label> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <textarea id="message" name="message" rows="5" required></textarea> | ||
| <label for="message">Message</label> | ||
| </div> | ||
|
|
||
| <button type="submit" class="submit-btn"> | ||
| <span class="btn-text">Send Message</span> | ||
| <i class="fas fa-paper-plane"></i> | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Footer --> | ||
| <footer> | ||
| <p>© 2024 Fatima BOUYARMANE. All rights reserved.</p> | ||
| </footer> | ||
|
|
||
| <!-- Custom JavaScript --> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.