Web Development

Technologies Used

  • HTML

  • CSS

  • JavaScript

  • Python

  • Sphinx

  • GitHub Pages

Overview

This section highlights my experience with modern web development technologies and practices. My work focuses on building and maintaining functional web applications while demonstrating an understanding of front-end development, site architecture, and deployment workflows.

An example of my work can be viewed here. This project is an HTML-based website hosted through GitHub and demonstrates my practical use of HTML, CSS, and JavaScript to implement interactive features and responsive page design.

In addition to traditional web development projects, this portfolio itself is generated using the documentation framework Sphinx, which integrates HTML, CSS, and Python to produce a structured and maintainable static documentation site.

The landing page for this portfolio is also included below as a code reference. It demonstrates the layout and structure used to present my projects and technical topics. The design intentionally includes placeholders for future projects, including planned Django-based web applications as I continue expanding my full-stack development skills.

As additional projects are completed, their documentation and source references will be added to this section of the portfolio.

HTML Landing Page Code

  1<!DOCTYPE html>
  2<html>
  3<head>
  4<meta charset="UTF-8">
  5<title>Brayden Mitchell | Computer Science & Cybersecurity Student</title>
  6
  7<style>
  8
  9body {
 10font-family: Arial, sans-serif;
 11margin: 0;
 12background: #0f172a;
 13color: #e2e8f0;
 14}
 15
 16header {
 17text-align: center;
 18padding: 60px 20px;
 19}
 20
 21header h1 {
 22font-size: 40px;
 23margin-bottom: 10px;
 24}
 25
 26header p {
 27color: #94a3b8;
 28font-size: 18px;
 29}
 30
 31.container {
 32max-width: 1000px;
 33margin: auto;
 34padding: 40px 20px;
 35}
 36
 37.projects {
 38display: grid;
 39grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 40gap: 20px;
 41}
 42
 43.card {
 44background: #1e293b;
 45padding: 20px;
 46border-radius: 8px;
 47transition: 0.2s;
 48}
 49
 50.card:hover {
 51transform: translateY(-5px);
 52background: #334155;
 53}
 54
 55.card h3 {
 56margin-top: 0;
 57}
 58
 59.card a {
 60color: #38bdf8;
 61text-decoration: none;
 62}
 63
 64footer {
 65text-align: center;
 66padding: 40px 20px;
 67color: #94a3b8;
 68}
 69
 70/* ----------------------
 71MOBILE RESPONSIVENESS
 72------------------------*/
 73/* MOBILE RESPONSIVENESS */
 74@media (max-width: 1400px) {
 75header {
 76    padding: 40px 10px;
 77}
 78
 79header h1 {
 80    font-size: 28px;
 81}
 82
 83header p {
 84    font-size: 16px;
 85}
 86
 87.container {
 88    padding: 20px 10px;
 89}
 90
 91.projects {
 92    grid-template-columns: 1fr; /* STACK CARDS VERTICALLY ON MOBILE */
 93    gap: 15px;
 94}
 95
 96.card {
 97    padding: 15px;
 98}
 99
100footer {
101    padding: 20px 10px;
102}
103}
104
105</style>
106</head>
107
108<body>
109
110<header>
111    <h1>Brayden Mitchell</h1>
112    <p>Cybersecurity • Computer Science  • Network Engineering</p>
113</header>
114
115<div class="container">
116
117<h2>Projects</h2>
118
119<div class="projects">
120
121<div class="card">
122    <h3>Documentation Portfolio</h3>
123    <p>Technical documentation, network diagrams, and security lab reports.</p>
124    <a href="https://docs.braydenatroberts.org">View Project →</a>
125</div>
126
127<div class="card">
128    <h3>Cybersecurity Lab Tracker</h3>
129    <p>Django application for tracking cybersecurity labs and experiments.</p>
130    <a href="#">Coming Soon</a>
131</div>
132
133<div class="card">
134    <h3>Network Architecture</h3>
135    <p>Enterprise network designs including segmentation, DMZ architecture, and firewall deployments.</p>
136    <a href="https://docs.braydenatroberts.org/topics/network_security/labs/labs.html">View Designs →</a>
137</div>
138
139<div class="card">
140    <h3>Python Development</h3>
141    <p>Python projects including automation scripts, security tools, and coursework documentation.</p>
142    <a href="https://docs.braydenatroberts.org/topics/programming_lang/book/book.html">View Designs →</a>
143</div>
144
145<div class="card">
146    <h3>Security Monitoring</h3>
147    <p>Future monitoring stack with SIEM and infrastructure observability.</p>
148    <a href="#">Coming Soon</a>
149</div>
150
151<div class="card">
152    <h3>Cybersecurity Analysis & Reporting</h3>
153    <p>Incident analysis reports, vulnerability assessments, and security documentation.</p>
154    <a href="https://docs.braydenatroberts.org/topics/cybersecurity/cybersecurity.html">View Reports →</a>
155</div>
156
157</div>
158
159</div>
160
161<footer>
162    <p>© <span id="year"></span> Brayden Mitchell</p>
163</footer>
164
165<script>
166    document.getElementById("year").textContent = new Date().getFullYear();
167</script>
168
169</body>
170</html>