File: /home/memecom/domains/pchen.info/public_html/projects.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ===== Meta ===== -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== Favicon ===== -->
<link rel="icon" type="image/x-icon" href="./assets/imgs/favicon.svg">
<!-- ===== Title ===== -->
<title>Stag - Personal Portfolio HTML5 Template</title>
<!-- ===== LineAwesome ===== -->
<link rel="stylesheet"
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<!-- ===== Fonts ===== -->
<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=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,100;1,9..40,200&display=swap"
rel="stylesheet">
<!-- ===== Stylesheet ===== -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/swiper.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/responsive.css">
</head>
<body>
<main class="projects-page" id="top">
<!-- Sticky Sidebar
======================================= -->
<div class="sticky-sidebar">
<div class="sticky-sidebar-inner">
<div class="sidebar-top">
<div class="sidebar-logo">
<div class="left">
<a href="./index.html" class="logo-img">
<img src="./assets/imgs/logo.svg" alt="Logo">
</a>
<a href="./index.html" class="logo-text">STAG</a>
</div>
<div class="right">
<span id="current-time"></span>
<i class="las la-ellipsis-v"></i>
</div>
</div>
<div class="sidebar-me">
<div class="sidebar-me-inner">
<div class="img-box">
<img src="./assets/imgs/me.png" alt="Me">
</div>
<div class="content">
<h3>David Henderson</h3>
<p>Back End Developer</p>
<span class="location"><i class="ph-duotone ph-map-pin"></i> San francisco</span>
</div>
</div>
</div>
<div class="sidebar-menu">
<nav class="menu-lists">
<ul>
<li>
<a href="./index.html"><span class="icon"><i class="ph-duotone ph-house"></i></span> <span class="title">Home</span></a>
</li>
<li class="active-menu">
<a href="./projects.html"><span class="icon"><i class="ph-duotone ph-squares-four"></i></span> <span class="title">Projects</span></a>
</li>
<li>
<a href="./about.html"><span class="icon"><i class="ph-duotone ph-fingerprint"></i></span> <span class="title">About</span></a>
</li>
<li>
<a href="./gallery.html"><span class="icon"><i class="ph-duotone ph-camera"></i></span> <span class="title">Gallery</span></a>
</li>
<li>
<a href="./contact.html"><span class="icon"><i class="ph-duotone ph-paperclip"></i></span> <span class="title">Contact</span></a>
</li>
<li>
<a href="./blog.html"><span class="icon"><i class="ph-duotone ph-swatches"></i></span> <span class="title">Blog</span></a>
</li>
</ul>
</nav>
<div class="responsive-mode sidebar-bottom">
<div class="social-link-wrap">
<ul class="social-links">
<li><a href="https://dribbble.com/"><i class="lab la-dribbble"></i></a></li>
<li><a href="https://twitter.com"><i class="lab la-xing"></i></a></li>
<li><a href="https://instagram.com"><i class="lab la-instagram"></i></a></li>
<li><a href="https://youtube.com"><i class="lab la-youtube"></i></a></li>
</ul>
</div>
<p class="copyright-text">
© 2024
</p>
</div>
</div>
<div class="humberg-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="sidebar-bottom">
<div class="social-link-wrap">
<ul class="social-links">
<li><a href="https://dribbble.com/"><i class="lab la-dribbble"></i></a></li>
<li><a href="https://twitter.com"><i class="lab la-xing"></i></a></li>
<li><a href="https://instagram.com"><i class="lab la-instagram"></i></a></li>
<li><a href="https://youtube.com"><i class="lab la-youtube"></i></a></li>
</ul>
</div>
<p class="copyright-text">
© 2024
</p>
</div>
</div>
</div>
<!-- End Sticky Sidebar -->
<div class="page-content-wrapper">
<!-- Project
======================================= -->
<section class="project2-area">
<div class="custom-container">
<div class="project-header section-header">
<a href="projects.html" class="theme-btn common-box">
<span>
<span class="normal">Projects <i class="las la-arrow-right"></i></span>
<span class="hover">Projects <i class="las la-arrow-right"></i></span>
</span>
</a>
<div class="animation-texts-wrap">
<div class="animation-text-inner">
<ul>
<li>⌘ It is a long established fact that a reader will distracted by the readable content of a page when looking an its readable ⌘</li>
<li>It is a long established fact that a reader will distracted by the readable content of a page when looking an its readable ⌘</li>
<li>It is a long established fact that a reader will distracted by the readable content of a page when looking an its readable ⌘</li>
</ul>
</div>
</div>
</div>
<div class="project-lists">
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-1.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Retro Remix</h3>
<p>Ux Design</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-2.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Mystical Meodows</h3>
<p>Web Development</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-3.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Cybernetic Dreams</h3>
<p>Brand Marketing</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-4.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Light Play</h3>
<p>SEO</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-5.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Synthwave Sympony</h3>
<p>Social Media</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-6.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Mindscapes</h3>
<p>Robotic Automation</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-7.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Retro Remix</h3>
<p>Ux Design</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-8.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Mystical Meodows</h3>
<p>Web Development</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-9.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Cybernetic Dreams</h3>
<p>Brand Marketing</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-10.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Light Play</h3>
<p>SEO</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-11.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Synthwave Sympony</h3>
<p>Social Media</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-12.png" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Mindscapes</h3>
<p>Robotic Automation</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-13.jpg" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Retro Remix</h3>
<p>Ux Design</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-14.jpg" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Mystical Meodows</h3>
<p>Web Development</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
<div class="project-slider-box">
<a href="project-detail.html" class="overlay-link"></a>
<div class="project-img">
<img src="./assets/imgs/project-15.jpg" alt="Project">
<span class="badge-year">
<span class="badge-inner">
<span>2024</span>
<span>2024</span>
</span>
</span>
</div>
<div class="project-content">
<h3>Cybernetic Dreams</h3>
<p>Brand Marketing</p>
<a href="project-detail.html" class="theme-btn common-box">
<span>
<span class="normal"><i class="las la-angle-right"></i></span>
<span class="hover"><img src="./assets/imgs/right-arrow.svg" alt="icon"></span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End Project -->
<!-- Footer
======================================= -->
<footer class="footer-area">
<div class="left">
<p>© 2024 All rights reserved by <a href="https://themeforest.net/user/wordpressriver/portfolio">WordPressRiver Themes</a></p>
<p class="mid"><span class="circle-icon"></span>Template by <a href="https://themeforest.net/user/wordpressriver/portfolio">WordPressRiver</a><span class="circle-icon"></span>
</p>
<a href="#">Buy Template</a>
</div>
<a href="#top" class="backto-top">Scroll to top <i class="las la-arrow-up"></i></a>
</footer>
<!-- End Footer -->
</div>
</main>
<!-- JQuery
======================================= -->
<script src="https://unpkg.com/@phosphor-icons/web@2.0.3"></script>
<script src="./assets/js/jquery-3.7.1.js"></script>
<script src="./assets/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/swiper.min.js"></script>
<script src="./assets/js/moment.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>