<!DOCTYPE HTML><html lang="en">
<head>
<link rel="shortcut icon" href="/_resources/assets/favicon/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Student Spotlights - Santa Monica College</title>
<link rel="canonical" href="https://www.smc.edu/spotlight244966/beta/index-square.txt">
<meta property="og:image" content="https://www.smc.edu">
<meta property="og:image:secure_url" content="https://www.smc.edu">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- OU Search Ignore Start Here --><?php include($_SERVER['DOCUMENT_ROOT'] . "/_resources/includes/headcode.inc"); ?><!-- OU Search Ignore End Here -->
<style>
@media (min-width: 1025px) {
.dataTables_wrapper {
margin: 4px 0;
max-width: 100%;
}
}
.genimglist__wrap {
max-width: 98%;
}
.search-container {
width: 100%;
}
.db-filter {
width: 33.3%;
float: left;
padding-right: 20px;
position: relative;
}
@media (max-width: 926px) {
.db-filter {
width: 48%;
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.db-filter {
width: 100%;
}
}
.db-filter label {
line-height: 1.2;
letter-spacing: 1.3px;
text-transform: uppercase;
display: block;
color: #004c98;
font-size: 15px;
font-weight: bold;
font-style: normal;
margin: 0 0 14px;
}
.db-filter select {
width: 100%;
background-color: transparent;
border: 1px solid transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: transparent;
border-bottom: 1px solid #0075df;
font-size: 15px;
color: #000;
font-weight: normal;
line-height: 1.87;
font-family: "proxima-nova", sans-serif;
-moz-osx-font-smoothing: grayscale;
}
.db-filter input {
height: 31px;
width: 100%;
}
label.db-search::after {
content: '\e912';
font-family: 'icomoon' !important;
position: absolute;
bottom: 7px;
right: 13px;
font-size: 20px;
font-weight: 400;
color: #011745;
}
ul.tc-list {
list-style: none;
padding-left: 0;
}
ul.tc-list li {
position: relative;
padding: 20px 0;
border-bottom: 1px solid #dec9c0;
width: 100%;
}
ul.tc-list li span.tc-school {
position: relative;
}
ul.tc-list li span.tc-location {
position: absolute;
top: 23px;
left: 650px;
font-size: .9em;
}
ul.tc-list li span.tc-type {
position: absolute;
top: 23px;
left: 875px;
font-size: .9em;
}
ul.tc-list li span.tc-tag {
position: absolute;
top: 20px;
right: 0;
}
ul.tc-list li span.tc-tag img {
height: 30px;
width: auto;
}
.genimglist__icon {
z-index: 20;
position: absolute;
width: 35px;
top: 10px;
left: 133px;
}
.genimglist__content h2 {
margin: 0;
}
@media (min-width: 700px) {
.genimglist__img {
max-width: 150px;
}
}
</style>
<meta property="og:title" content="Student Spotlights">
<meta property="og:url" content="https://www.smc.edu/spotlight244966/beta/index-square.txt">
<meta property="og:description" content="">
<meta property="og:type" content="">
<meta property="og:updated_time" content="2025-07-08T17:17:19.326059079-07:00">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://www.smc.edu/spotlight244966/beta/index-square.txt">
<meta name="twitter:title" content="Student Spotlights">
<meta name="twitter:description" content="">
<?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/ou-alerts/alerts-config.css.html')) {
include($_SERVER['DOCUMENT_ROOT'] . '/ou-alerts/alerts-config.css.html');
}
?></head>
<body class=" ">
<div class="wrapper"><!-- OU Search Ignore Start Here --><!-- OU Search Ignore Start Here --><?php include($_SERVER['DOCUMENT_ROOT'] . "/_resources/includes/bodycode.inc"); ?><!-- OU Search Ignore End Here --><!-- OU Search Ignore Start Here --><?php include("/mnt/efs/smcwww/_resources/includes/header.inc"); ?><!-- OU Search Ignore End Here --><!-- OU Search Ignore Start Here --><?php include($_SERVER['DOCUMENT_ROOT'] . "/_resources/includes/analytics.inc"); ?><!-- OU Search Ignore End Here --><!-- OU Search Ignore End Here -->
<main role="main" id="main" class="main ">
<section class="full-hero-section" style="height: inherit; background-color: #fff;">
<div class="hero-section" style="background-color: #c6e9ec">
<div class="container">
<div class="text-holder"><span class="page-title"><a href="/spotlight244966/index.php">Spotlight on our Students</a></span><h1 class="slogan">Student Spotlights</h1>
<div class="hero-text">
<p> </p>
</div>
</div>
</div><img class="bg-img" src="/_resources/assets/img/backgrounds/hero-yellow.png" alt=""><button class="scroll-down-btn" style="bottom: 20%;"><span class="sr-only">scroll to content</span><span class="icon-arrow"></span></button></div>
</section>
<div class="main-content-wrapper">
<div class="aside-panel" role="navigation" aria-label="Section"><button class="aside-nav__opener mobile-only" aria-expanded="false"><span>IN THIS SECTION</span></button><div class="aside-nav__holder" aria-hidden="true">
<div class="aside-nav__title"><a href="/spotlight244966/beta/">Spotlights</a></div>
<nav class="aside-nav"><?php $nav = "/spotlight244966/beta/_nav.inc";
$current_page = "/spotlight244966/beta/index-square.txt";
?><?php include("/mnt/efs/smcwww/_resources/php/sitenav.php"); ?></nav>
</div>
</div>
<div class="main-content-holder">
<div class="container">
<div class="breadcrumbs">
<ul class="breadcrumbs-list">
<li class="breadcrumbs-list__item"><a href="https://www.smc.edu/">Santa Monica College</a><span class="icon-arrow"></span></li>
<li class="breadcrumbs-list__item"><a href="https://www.smc.edu/spotlight244966/">Spotlights</a><span class="icon-arrow"></span></li>
<li class="breadcrumbs-list__item">
Student Spotlights
</li>
</ul>
</div>
<p>Extra content above the search!</p>
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/_resources/dmc/php/spotlight244966.php");
$options = array();
$options["datasource"] = "spotlight";
$options["xpath"] = "item";
$options["type"] = "filters";
get_spotlight244966_dmc_output($options);
?>
<section class="section genimglist genimglist__news dataTables_wrapper no-footer">
<div id="listing-results" class="genimglist__wrap"><?php include_once($_SERVER['DOCUMENT_ROOT'] . "/_resources/dmc/php/spotlight244966.php");
$options = array();
$options["datasource"] = "spotlight";
$options["xpath"] = "item";
$options["type"] = "listing_json";
$options["items_per_page"] = "10";
$options["querystring_control"] = "true";
$options["sort"] = "sort-name asc";
get_spotlight244966_dmc_output($options);
?></div>
</section>
</div>
</div>
</div>
</main>
<!-- OU Search Ignore Start Here --><!-- OU Search Ignore Start Here --><?php include("/mnt/efs/smcwww/_resources/includes/footer.inc"); ?><!-- OU Search Ignore End Here --><!-- OU Search Ignore Start Here --><?php include($_SERVER['DOCUMENT_ROOT'] . "/_resources/includes/footcode.inc"); ?><!-- OU Search Ignore End Here -->
<div id="ou-hidden" style="display:none;"><!-- com.omniupdate.ob --><!-- /com.omniupdate.ob --></div><script>
if(document.getElementById("de") != null && document.getElementById("directedit")) {
var link = document.getElementById("de").parentNode.innerHTML;
document.getElementById("de").parentNode.innerHTML = "";
document.getElementById("directedit").innerHTML = link.replace(/^\s+|\s+$/gm,'');
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const department = document.getElementById('input-department');
const docType = document.getElementById('input-doc');
const searchInput = document.getElementById('input-search');
const resultContainer = document.getElementById('listing-results');
function fetchResults() {
// Get current query string params
const currentParams = new URLSearchParams(window.location.search);
// Update filter params
currentParams.set('interest', department.value);
currentParams.set('narrow', docType.value);
currentParams.set('search_phrase', searchInput.value.trim());
// Reset to first page
currentParams.set('page', '1');
// Build new query string and target URL
const queryString = currentParams.toString();
const targetUrl = `/spotlight244966/beta/index-square.php?${queryString}`;
// Update browser address bar without reloading the page
const newRelativeUrl = `?${queryString}`;
history.replaceState(null, '', newRelativeUrl);
// Perform AJAX fetch
fetch(targetUrl)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newContent = doc.getElementById('listing-results');
if (newContent) {
resultContainer.innerHTML = newContent.innerHTML;
} else {
console.error("No #listing-results found on fetched page.");
}
})
.catch(err => console.error("AJAX fetch failed:", err));
}
department.addEventListener('change', fetchResults);
docType.addEventListener('change', fetchResults);
searchInput.addEventListener('input', debounce(fetchResults, 400));
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
});
</script>
<?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/ou-alerts/alerts-config.alerts.html')) {
include($_SERVER['DOCUMENT_ROOT'] . '/ou-alerts/alerts-config.alerts.html');
}
?><!-- OU Search Ignore End Here --></div>
</body>
</html>