1166 lines
34 KiB
HTML
1166 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Priyatham's Portfolio</title>
|
||
|
||
<!--
|
||
- favicon
|
||
-->
|
||
<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
|
||
|
||
<!--
|
||
- custom css link
|
||
-->
|
||
<link rel="stylesheet" href="./assets/css/style.css">
|
||
|
||
<!--
|
||
- google font link
|
||
-->
|
||
<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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!--
|
||
- #MAIN
|
||
-->
|
||
|
||
<main>
|
||
|
||
<!--
|
||
- #SIDEBAR
|
||
-->
|
||
|
||
<aside class="sidebar" data-sidebar>
|
||
<div class="sidebar-info">
|
||
|
||
<figure class="avatar-box">
|
||
<img src="./assets/images/my-avatar.png" alt="Priyatham Sai Chand" width="80">
|
||
</figure>
|
||
|
||
<div class="info-content">
|
||
<h3 class="name" title="Priyatham Sai Chand">Priyatham Sai Chand</h3>
|
||
<p class="title">CS Graduate Student</p>
|
||
</div>
|
||
<button class="info_more-btn" data-sidebar-btn>
|
||
<span>Show Contacts</span>
|
||
<ion-icon name="chevron-down"></ion-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="sidebar-info_more">
|
||
<div class="separator"></div>
|
||
<ul class="contacts-list">
|
||
<li class="contact-item">
|
||
<div class="icon-box">
|
||
<ion-icon name="mail-outline"></ion-icon>
|
||
</div>
|
||
<div class="contact-info">
|
||
<p class="contact-title">Email</p>
|
||
<a href="mailto:pbazaru@cpp.edu" class="contact-link">pbazaru@cpp.edu</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="contact-item">
|
||
<div class="icon-box">
|
||
<ion-icon name="phone-portrait-outline"></ion-icon>
|
||
</div>
|
||
|
||
<div class="contact-info">
|
||
<p class="contact-title">Phone</p>
|
||
<a href="tel:+16262067901" class="contact-link">+1 (626) 206-7901</a>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="contact-item">
|
||
|
||
<div class="icon-box">
|
||
<ion-icon name="calendar-outline"></ion-icon>
|
||
</div>
|
||
|
||
<div class="contact-info">
|
||
<p class="contact-title">Expected Graduation</p>
|
||
<time datetime="1982-06-23">May 1, 2024</time>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="contact-item">
|
||
|
||
<div class="icon-box">
|
||
<ion-icon name="location-outline"></ion-icon>
|
||
</div>
|
||
|
||
<div class="contact-info">
|
||
<p class="contact-title">Location</p>
|
||
|
||
<address>Los Angeles, California, USA</address>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<div class="separator"></div>
|
||
|
||
<ul class="social-list">
|
||
|
||
<li class="social-item">
|
||
<a href="#" class="social-link">
|
||
<ion-icon name="logo-facebook"></ion-icon>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="social-item">
|
||
<a href="https://www.linkedin.com/in/priyatham-sai-chand/" class="social-link" target="_blank">
|
||
<ion-icon name="logo-linkedin"></ion-icon>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="social-item">
|
||
<a href="https://github.com/Priyatham-sai-chand" class="social-link"target="_blank">
|
||
<ion-icon name="logo-github"></ion-icon>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
<!--
|
||
- #main-content
|
||
-->
|
||
|
||
<div class="main-content">
|
||
|
||
<!--
|
||
- #NAVBAR
|
||
-->
|
||
|
||
<nav class="navbar">
|
||
|
||
<ul class="navbar-list">
|
||
|
||
<li class="navbar-item">
|
||
<button class="navbar-link active" data-nav-link>About</button>
|
||
</li>
|
||
|
||
<li class="navbar-item">
|
||
<button class="navbar-link" data-nav-link>Resume</button>
|
||
</li>
|
||
|
||
<li class="navbar-item">
|
||
<button class="navbar-link" data-nav-link>Projects</button>
|
||
</li>
|
||
|
||
<li class="navbar-item">
|
||
<button class="navbar-link" data-nav-link>Blog</button>
|
||
</li>
|
||
|
||
<li class="navbar-item">
|
||
<button class="navbar-link" data-nav-link>Contact</button>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</nav>
|
||
|
||
|
||
<!--
|
||
- #ABOUT
|
||
-->
|
||
|
||
<article class="about active" data-page="about">
|
||
|
||
<header>
|
||
<h2 class="h2 article-title">About me</h2>
|
||
</header>
|
||
|
||
<section class="about-text">
|
||
<ul>
|
||
<li>👨💻 I'm a Master's Student in Cal Poly Pomona, CA. I study Computer Science.</li>
|
||
<li>💾 I worked as an intern in Cognizant at the latest on data engineering</li>
|
||
<li>💻 I make an array of software projects and worked on many interesting and rewarding internships.</li>
|
||
<li>☁ I love to see software be better integrated into daily lives. My focus lies in cloud solutions with scalability and performance.</li>
|
||
<li>I currently work on interdisciplinary software with aerospace projects such as UMBRA and Northrop Grumman Collaboration project</li>
|
||
|
||
|
||
</ul>
|
||
<p>
|
||
|
||
|
||
|
||
</p>
|
||
|
||
</section>
|
||
|
||
|
||
<!--
|
||
- service
|
||
-->
|
||
|
||
<section class="service">
|
||
|
||
<h3 class="h3 service-title">What I'm doing</h3>
|
||
|
||
<ul class="service-list">
|
||
|
||
<li class="service-item">
|
||
|
||
<div class="service-icon-box">
|
||
<img src="./assets/images/icon-cloud.svg
|
||
" alt="design icon" width="40">
|
||
</div>
|
||
|
||
<div class="service-content-box">
|
||
<h4 class="h4 service-item-title">Cloud Solutions</h4>
|
||
|
||
<p class="service-item-text">
|
||
Proposing high performing and cost effective architecture for cloud services.
|
||
</p>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="service-item">
|
||
|
||
<div class="service-icon-box">
|
||
<img src="./assets/images/icon-dev.svg" alt="Web development icon" width="40">
|
||
</div>
|
||
|
||
<div class="service-content-box">
|
||
<h4 class="h4 service-item-title">Web development</h4>
|
||
|
||
<p class="service-item-text">
|
||
High-quality development of sites at the professional level.
|
||
</p>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="service-item">
|
||
|
||
<div class="service-icon-box">
|
||
<img src="./assets/images/icon-app.svg" alt="mobile app icon" width="40">
|
||
</div>
|
||
|
||
<div class="service-content-box">
|
||
<h4 class="h4 service-item-title">Mobile apps</h4>
|
||
|
||
<p class="service-item-text">
|
||
Professional development of cross platform applications.
|
||
</p>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="service-item">
|
||
|
||
<div class="service-icon-box">
|
||
<img src="./assets/images/icon-research.svg" alt="research icon" width="40">
|
||
</div>
|
||
|
||
<div class="service-content-box">
|
||
<h4 class="h4 service-item-title">Research</h4>
|
||
|
||
<p class="service-item-text">
|
||
Trying new solutions to existing problems in a scientific and methodology.
|
||
|
||
</p>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
|
||
<!--
|
||
- testimonials
|
||
-->
|
||
|
||
<section class="testimonials">
|
||
|
||
<h3 class="h3 testimonials-title">Testimonials</h3>
|
||
|
||
<ul class="testimonials-list has-scrollbar">
|
||
|
||
<li class="testimonials-item">
|
||
<div class="content-card" data-testimonials-item>
|
||
|
||
<figure class="testimonials-avatar-box">
|
||
<img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
|
||
</figure>
|
||
|
||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Akash Jami</h4>
|
||
|
||
<div class="testimonials-text" data-testimonials-text>
|
||
<p>
|
||
The way he manages his team, taking responsibility in each and every stage of the development process was fabulous. He never takes a back step in educating his colleagues "
|
||
I have learnt many things which are unrelated to my domain because of him. It was a great time working with you. Thank you!!!
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<!--
|
||
<li class="testimonials-item">
|
||
<div class="content-card" data-testimonials-item>
|
||
|
||
<figure class="testimonials-avatar-box">
|
||
<img src="./assets/images/avatar-2.png" alt="Jessica miller" width="60" data-testimonials-avatar>
|
||
</figure>
|
||
|
||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Jessica miller</h4>
|
||
|
||
<div class="testimonials-text" data-testimonials-text>
|
||
<p>
|
||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||
lot of experience
|
||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||
consectetur adipiscing
|
||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<li class="testimonials-item">
|
||
<div class="content-card" data-testimonials-item>
|
||
|
||
<figure class="testimonials-avatar-box">
|
||
<img src="./assets/images/avatar-3.png" alt="Emily evans" width="60" data-testimonials-avatar>
|
||
</figure>
|
||
|
||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Emily evans</h4>
|
||
|
||
<div class="testimonials-text" data-testimonials-text>
|
||
<p>
|
||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||
lot of experience
|
||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||
consectetur adipiscing
|
||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<li class="testimonials-item">
|
||
<div class="content-card" data-testimonials-item>
|
||
|
||
<figure class="testimonials-avatar-box">
|
||
<img src="./assets/images/avatar-4.png" alt="Henry william" width="60" data-testimonials-avatar>
|
||
</figure>
|
||
|
||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Henry william</h4>
|
||
|
||
<div class="testimonials-text" data-testimonials-text>
|
||
<p>
|
||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||
lot of experience
|
||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||
consectetur adipiscing
|
||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
!-->
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
|
||
<!--
|
||
- testimonials modal
|
||
-->
|
||
|
||
<div class="modal-container" data-modal-container>
|
||
|
||
<div class="overlay" data-overlay></div>
|
||
|
||
<section class="testimonials-modal">
|
||
|
||
<button class="modal-close-btn" data-modal-close-btn>
|
||
<ion-icon name="close-outline"></ion-icon>
|
||
</button>
|
||
|
||
<div class="modal-img-wrapper">
|
||
<figure class="modal-avatar-box">
|
||
<img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
|
||
</figure>
|
||
|
||
<img src="./assets/images/icon-quote.svg" alt="quote icon">
|
||
</div>
|
||
|
||
<div class="modal-content">
|
||
|
||
<h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
|
||
|
||
<time datetime="2021-06-14">14 June, 2021</time>
|
||
|
||
<div data-modal-text>
|
||
<p>
|
||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||
lot of experience
|
||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||
consectetur adipiscing
|
||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<!--
|
||
|
||
<section class="clients">
|
||
|
||
<h3 class="h3 clients-title">Clients</h3>
|
||
|
||
<ul class="clients-list has-scrollbar">
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-1-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-2-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-3-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-4-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-5-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
<li class="clients-item">
|
||
<a href="#">
|
||
<img src="./assets/images/logo-6-color.png" alt="client logo">
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
-->
|
||
</article>
|
||
|
||
|
||
|
||
<!--
|
||
- #RESUME
|
||
-->
|
||
|
||
<article class="resume" data-page="resume">
|
||
|
||
<header>
|
||
<h2 class="h2 article-title">Resume</h2>
|
||
</header>
|
||
|
||
<section class="timeline">
|
||
|
||
<div class="title-wrapper">
|
||
<div class="icon-box">
|
||
<ion-icon name="book-outline"></ion-icon>
|
||
</div>
|
||
|
||
<h3 class="h3">Education</h3>
|
||
</div>
|
||
|
||
<ol class="timeline-list">
|
||
|
||
<li class="timeline-item">
|
||
|
||
<h4 class="h4 timeline-item-title">California State Polytechnic University, Pomona</h4>
|
||
|
||
<span>2022 — 2024</span>
|
||
|
||
<p class="timeline-text">
|
||
A 2-year Master of Science Degree in Computer Science, working
|
||
towards a Master’s Thesis by performing research in the areas
|
||
of interest stated.
|
||
</p>
|
||
|
||
</li>
|
||
|
||
<li class="timeline-item">
|
||
|
||
<h4 class="h4 timeline-item-title">Mahatma Gandhi Institute of Technology</h4>
|
||
|
||
<span>2018 — 2022</span>
|
||
|
||
<p class="timeline-text">
|
||
A 4-year comprehensive bachelors study which I successfully completed with First class Distinction.
|
||
</p>
|
||
|
||
</li>
|
||
|
||
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</section>
|
||
|
||
<section class="timeline">
|
||
|
||
<div class="title-wrapper">
|
||
<div class="icon-box">
|
||
<ion-icon name="book-outline"></ion-icon>
|
||
</div>
|
||
|
||
<h3 class="h3">Experience</h3>
|
||
</div>
|
||
|
||
<ol class="timeline-list">
|
||
|
||
<li class="timeline-item">
|
||
|
||
<h4 class="h4 timeline-item-title">Programmer Analyst Trainee</h4>
|
||
|
||
<span>Feb 2022 — Jul 2022</span>
|
||
|
||
<p class="timeline-text">
|
||
Finished 100% of training on Data Engineering and Cloud operations. Implemented various Data Engineering concepts of Apache Spark with various internal evaluations. Communicated various business solutions on cloud practices and services provided by Google Cloud Platform;
|
||
</p>
|
||
|
||
</li>
|
||
|
||
<li class="timeline-item">
|
||
|
||
<h4 class="h4 timeline-item-title">Cyber Security Intern</h4>
|
||
|
||
<span>July 2021 — August 2021</span>
|
||
|
||
<p class="timeline-text">
|
||
Identified flaws in common network configurations across the 40% of the campus by finding vulnerabilities by penetrating the network. Recommended security measures and created threat models, documented a more secure network model with better advantages using existing hardware.
|
||
</p>
|
||
|
||
</li>
|
||
|
||
<li class="timeline-item">
|
||
|
||
<h4 class="h4 timeline-item-title">Web Development Intern</h4>
|
||
|
||
<span>Feb 2021 — July 2021</span>
|
||
|
||
<p class="timeline-text">
|
||
Helped increase user visits to the web application by 66% from previous implementations. Minimized operational costs by offering cloud based solutions for hosting and deployment on AWS. Led development team of size 10 in mapping business requirements to internal and external products
|
||
</p>
|
||
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</section>
|
||
|
||
<section class="skill">
|
||
|
||
<h3 class="h3 skills-title">My skills</h3>
|
||
|
||
<ul class="skills-list content-card">
|
||
|
||
<li class="skills-item">
|
||
|
||
<div class="title-wrapper">
|
||
<h5 class="h5">Full stack development</h5>
|
||
<data value="80">80%</data>
|
||
</div>
|
||
|
||
<div class="skill-progress-bg">
|
||
<div class="skill-progress-fill" style="width: 80%;"></div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="skills-item">
|
||
|
||
<div class="title-wrapper">
|
||
<h5 class="h5">Machine Learning</h5>
|
||
<data value="70">70%</data>
|
||
</div>
|
||
|
||
<div class="skill-progress-bg">
|
||
<div class="skill-progress-fill" style="width: 70%;"></div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="skills-item">
|
||
|
||
<div class="title-wrapper">
|
||
<h5 class="h5">Python Programming</h5>
|
||
<data value="90">90%</data>
|
||
</div>
|
||
|
||
<div class="skill-progress-bg">
|
||
<div class="skill-progress-fill" style="width: 90%;"></div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li class="skills-item">
|
||
|
||
<div class="title-wrapper">
|
||
<h5 class="h5">Cloud Services</h5>
|
||
<data value="50">70%</data>
|
||
</div>
|
||
|
||
<div class="skill-progress-bg">
|
||
<div class="skill-progress-fill" style="width: 70%;"></div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
<!--
|
||
- #Projects
|
||
-->
|
||
|
||
<article class="projects" data-page="projects">
|
||
|
||
<header>
|
||
<h2 class="h2 article-title">Projects</h2>
|
||
</header>
|
||
|
||
<h2 class="h2 article-title">Fitting them in shortly.</h2>
|
||
<section class="projects">
|
||
|
||
|
||
<!--
|
||
<ul class="filter-list">
|
||
|
||
<li class="filter-item">
|
||
<button class="active" data-filter-btn>All</button>
|
||
</li>
|
||
|
||
<li class="filter-item">
|
||
<button data-filter-btn>Web design</button>
|
||
</li>
|
||
|
||
<li class="filter-item">
|
||
<button data-filter-btn>Applications</button>
|
||
</li>
|
||
|
||
<li class="filter-item">
|
||
<button data-filter-btn>Web development</button>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
-->
|
||
|
||
<div class="filter-select-box">
|
||
|
||
<button class="filter-select" data-select>
|
||
|
||
<div class="select-value" data-selecct-value>Select category</div>
|
||
|
||
<div class="select-icon">
|
||
<ion-icon name="chevron-down"></ion-icon>
|
||
</div>
|
||
|
||
</button>
|
||
|
||
<!--
|
||
<ul class="select-list">
|
||
|
||
<li class="select-item">
|
||
<button data-select-item>All</button>
|
||
</li>
|
||
|
||
<li class="select-item">
|
||
<button data-select-item>Web design</button>
|
||
</li>
|
||
|
||
<li class="select-item">
|
||
<button data-select-item>Applications</button>
|
||
</li>
|
||
|
||
<li class="select-item">
|
||
<button data-select-item>Web development</button>
|
||
</li>
|
||
|
||
</ul>
|
||
-->
|
||
|
||
</div>
|
||
|
||
<ul class="project-list">
|
||
|
||
<li class="project-item active" data-filter-item data-category="web development">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/architect.png" alt="finance" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Serverless Bulk Email Management</h3>
|
||
|
||
<p class="project-category">Web development</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="web development">
|
||
<a href="https://www.github.com/customer-personality-analysis">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Customer Personality Analysis</h3>
|
||
|
||
<p class="project-category">Machine Learning</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="web design">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Decentralized Rental System</h3>
|
||
|
||
<p class="project-category">Distributed systems</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="applications">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Alz.</h3>
|
||
|
||
<p class="project-category">Applications</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<!--
|
||
<li class="project-item active" data-filter-item data-category="web design">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">DSM.</h3>
|
||
|
||
<p class="project-category">Web design</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="web design">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">MetaSpark</h3>
|
||
|
||
<p class="project-category">Web design</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="web development">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-7.png" alt="summary" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Summary</h3>
|
||
|
||
<p class="project-category">Web development</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="applications">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Task Manager</h3>
|
||
|
||
<p class="project-category">Applications</p>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="project-item active" data-filter-item data-category="web development">
|
||
<a href="#">
|
||
|
||
<figure class="project-img">
|
||
<div class="project-item-icon-box">
|
||
<ion-icon name="eye-outline"></ion-icon>
|
||
</div>
|
||
|
||
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
|
||
</figure>
|
||
|
||
<h3 class="project-title">Arrival</h3>
|
||
|
||
<p class="project-category">Web development</p>
|
||
|
||
</a>
|
||
</li>
|
||
--!>
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
<!--
|
||
- #BLOG
|
||
-->
|
||
|
||
<article class="blog" data-page="blog">
|
||
|
||
<header>
|
||
<h2 class="h2 article-title">Blog</h2>
|
||
<h2 class="h2 article-title">Writing my first one on RSS Feeds. Stick around!!</h2>
|
||
</header>
|
||
|
||
<section class="blog-posts">
|
||
|
||
<!--
|
||
<ul class="blog-posts-list">
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-1.jpg" alt="Design conferences in 2022" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">Design conferences in 2022</h3>
|
||
|
||
<p class="blog-text">
|
||
Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-2.jpg" alt="Best fonts every designer" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">Best fonts every designer</h3>
|
||
|
||
<p class="blog-text">
|
||
Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-3.jpg" alt="Design digest #80" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">Design digest #80</h3>
|
||
|
||
<p class="blog-text">
|
||
Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-4.jpg" alt="UI interactions of the week" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">UI interactions of the week</h3>
|
||
|
||
<p class="blog-text">
|
||
Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-5.jpg" alt="The forgotten art of spacing" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">The forgotten art of spacing</h3>
|
||
|
||
<p class="blog-text">
|
||
Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="blog-post-item">
|
||
<a href="#">
|
||
|
||
<figure class="blog-banner-box">
|
||
<img src="./assets/images/blog-6.jpg" alt="Design digest #79" loading="lazy">
|
||
</figure>
|
||
|
||
<div class="blog-content">
|
||
|
||
<div class="blog-meta">
|
||
<p class="blog-category">Design</p>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||
</div>
|
||
|
||
<h3 class="h3 blog-item-title">Design digest #79</h3>
|
||
|
||
<p class="blog-text">
|
||
Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
-->
|
||
|
||
</section>
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
<!--
|
||
- #CONTACT
|
||
-->
|
||
|
||
<article class="contact" data-page="contact">
|
||
|
||
<header>
|
||
<h2 class="h2 article-title">Contact</h2>
|
||
</header>
|
||
|
||
<section class="mapbox" data-mapbox>
|
||
<figure>
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d105764.75604036126!2d-117.8399825224143!3d34.065704085242686!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c32def799fa121%3A0x5209947000caa933!2sPomona%2C%20CA!5e0!3m2!1sen!2sus!4v1673994570714!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="contact-form">
|
||
|
||
<h3 class="h3 form-title">Contact Form</h3>
|
||
|
||
<h5 class="h5 form-title">Kindly Email: <u>pbazaru@cpp.edu</u> for now. I am building a robust backend to handle contact form between school and work I am delaying it. 😅</h5>
|
||
<!--
|
||
<form action="#" class="form" data-form>
|
||
|
||
<div class="input-wrapper">
|
||
<input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
|
||
|
||
<input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
|
||
</div>
|
||
|
||
<textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
|
||
|
||
<button class="form-btn" type="submit" disabled data-form-btn>
|
||
<ion-icon name="paper-plane"></ion-icon>
|
||
<span>Send Message</span>
|
||
</button>
|
||
|
||
</form>
|
||
|
||
</section>
|
||
-->
|
||
|
||
</article>
|
||
|
||
</div>
|
||
|
||
</main>
|
||
|
||
|
||
<!--
|
||
- custom js link
|
||
-->
|
||
<script src="./assets/js/script.js"></script>
|
||
|
||
<!--
|
||
- ionicon link
|
||
-->
|
||
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||
|
||
</body>
|
||
|
||
</html>
|