1177 lines
32 KiB
HTML
1177 lines
32 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">Software Dev </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:+12133522795" 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>Portfolio</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">
|
|
<p>
|
|
I'm a Software Developer and Master's Student in Cal Poly Pomona, CA.
|
|
I make an array of software projects and worked on many interesting and rewarding internships.
|
|
</p>
|
|
|
|
<p>
|
|
I love to see software be better integrated into daily lives.
|
|
My focus lies in cloud solutions with scalability and performance.
|
|
</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">
|
|
Currently Pursuing a Master's Degree in Computer Science.
|
|
</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">
|
|
Finished my Bachelor of Technology Degree in Computer Science 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">
|
|
Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
|
|
molestias
|
|
exceptur.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Art director</h4>
|
|
|
|
<span>2013 — 2015</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
|
quas molestias
|
|
exceptur.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Web designer</h4>
|
|
|
|
<span>2010 — 2013</span>
|
|
|
|
<p class="timeline-text">
|
|
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
|
quas molestias
|
|
exceptur.
|
|
</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">Web design</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">Graphic design</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">Branding</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">WordPress</h5>
|
|
<data value="50">50%</data>
|
|
</div>
|
|
|
|
<div class="skill-progress-bg">
|
|
<div class="skill-progress-fill" style="width: 50%;"></div>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #PORTFOLIO
|
|
-->
|
|
|
|
<article class="portfolio" data-page="portfolio">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Portfolio</h2>
|
|
</header>
|
|
|
|
<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/project-1.jpg" alt="finance" loading="lazy">
|
|
</figure>
|
|
|
|
<h3 class="project-title">Finance</h3>
|
|
|
|
<p class="project-category">Web development</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-2.png" alt="orizon" loading="lazy">
|
|
</figure>
|
|
|
|
<h3 class="project-title">Orizon</h3>
|
|
|
|
<p class="project-category">Web development</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">Fundo</h3>
|
|
|
|
<p class="project-category">Web design</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">Brawlhalla</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>
|
|
</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!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd"
|
|
width="400" height="300" loading="lazy"></iframe>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="contact-form">
|
|
|
|
<h3 class="h3 form-title">Contact Form</h3>
|
|
|
|
<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>
|