index.html

---
layout: default
---

<div class="home">
  <header class="hero">
    <img src="/assets/images/drew_v2.jpeg" alt="Drew Brown" class="profile-image">
    <h1 class="page-heading">Welcome to Doc's Journey</h1>
    <h2>Drew E. Brown "Doc"</h2>
    <p class="tagline"><em>-- Perseverance leads creation</em></p>
  </header>

  <section class="intro">
    <h2>About Me</h2>
    <p>I am a <strong>cybersecurity professional</strong>, <strong>maker</strong>, and <strong>lifelong learner</strong> driven by curiosity and a passion for creating meaningful solutions. My journey spans from military service to graduate-level cybersecurity education, always guided by the principle that <em>perseverance leads creation</em>.</p>
    
    <p>Through hands-on projects, academic research, and professional experience, I bridge the gap between theoretical knowledge and practical application. Whether it's building secure cloud infrastructure, crafting jewelry with precision metalworking, or mentoring the next generation of cybersecurity professionals, I bring the same dedication to excellence and continuous improvement.</p>
    
    <div class="recognition">
      <h3>Recognition & Features</h3>
      <ul class="links">
        <li><a href="https://www.odu.edu/article/class-of-2023-drew-brown-uses-his-educational-journey-to-inspire-others">🎓 Class of 2023: Drew Brown Uses His Educational Journey to Inspire Others</a></li>
        <li><a href="https://www.odu.edu/eng/news/2022/1/student_veteran_keep#.YuQxYmHMKw4">🛡️ Student Veteran Aims to Keep Businesses Secure</a></li>
        <li><a href="/resume/">📄 Professional Resume</a></li>
      </ul>
    </div>
    
    <div class="philosophy">
      <blockquote>
        <p>"Technology is best when it brings people together and solves real problems. My goal is to make cybersecurity accessible, education engaging, and creativity purposeful."</p>
        <cite>— Drew E. Brown "Doc"</cite>
      </blockquote>
    </div>
  </section>

  <section class="workspace">
    <h2>Workspace</h2>
    <img src="/assets/images/workspace_setup.jpeg" alt="Workspace Setup - Drew's creative workspace with computer setup" class="workspace-image" loading="lazy" width="600" height="400">
    <p>This is my workspace where I love to create and explore all sorts of interesting ideas.</p>
  </section>

  <section class="navigation-section">
    <h2>Explore</h2>
    <div class="nav-grid">
      <a href="/resume/" class="nav-card">
        <h3>Resume</h3>
        <p>View my professional experience and qualifications</p>
      </a>
      <a href="/courses/" class="nav-card">
        <h3>Course Listing</h3>
        <p>Collection of course materials from my education</p>
      </a>
      <a href="/projects/" class="nav-card">
        <h3>Projects</h3>
        <p>Various projects, both in-progress and completed</p>
      </a>
      <a href="/documentation/" class="nav-card">
        <h3>Documentation</h3>
        <p>Business development and technical guides</p>
      </a>
      <a href="/hobbies/" class="nav-card">
        <h3>Hobbies</h3>
        <p>Personal interests and creative pursuits</p>
      </a>
    </div>
  </section>
</div>

<style>
.hero {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #0A2540 0%, #3A6EA5 100%);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.1) 50%, transparent 70%);
  transform: rotate(15deg);
  pointer-events: none;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 4px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hero h1, .hero h2 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.tagline {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  font-style: italic;
}

.workspace-image {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.nav-card {
  display: block;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
  border-left: 4px solid #0A2540;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  text-decoration: none;
  color: inherit;
  border-left-color: #D4AF37;
}

.nav-card h3 {
  margin-top: 0;
  color: #0A2540;
  font-weight: 600;
}

.nav-card p {
  margin-bottom: 0;
  color: #6c7b7f;
  line-height: 1.6;
}

.links {
  list-style: none;
  padding: 0;
}

.links li {
  margin-bottom: 0.5rem;
}

.links a {
  color: #0366d6;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

.recognition {
  margin: 2rem 0;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.recognition h3 {
  margin-top: 0;
  color: #D4AF37;
  font-size: 1.2rem;
  font-weight: 600;
}

.philosophy {
  margin: 2rem 0;
}

.philosophy blockquote {
  background: linear-gradient(135deg, #0A2540 0%, #3A6EA5 100%);
  color: #FAF7F2;
  padding: 2.5rem;
  border-radius: 8px;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.philosophy blockquote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: -10px;
  left: 20px;
  opacity: 0.3;
}

.philosophy cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-weight: 500;
  text-align: right;
}

.intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.intro strong {
  color: #0366d6;
  font-weight: 600;
}
</style>