Skip to content

Commit

Permalink
main
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctemp48
ctemp48 committed Jul 30, 2024
0 parents commit 1e4e358
Show file tree
Hide file tree
Showing 4 changed files with 729 additions and 0 deletions.
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Raj Shekhar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
232 changes: 232 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Portfolio" />
<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@400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/fa62c117c7.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="styles.css" />
<title>Raj Shekhar</title>
</head>
<body class="light" id="top">
<header class="header center">
<h3>
<a href="https://rjshkhr.github.io/cleanfolio-minimal" class="link"
>RS.</a
>
</h3>

<nav class="nav center">
<ul class="nav__list center">
<li class="nav__list-item">
<a class="link link--nav" href="#projects">Projects</a>
</li>
<li class="nav__list-item">
<a class="link link--nav" href="#skills">Skills</a>
</li>
<li class="nav__list-item">
<a class="link link--nav" href="#contact">Contact</a>
</li>
</ul>

<button type="button" aria-label="toggle theme" class="btn btn--icon">
<i aria-hidden="true" id="btn-theme" class="fas fa-moon"></i>
</button>

<button
type="button"
aria-label="toggle navigation"
class="btn btn--icon nav__hamburger"
>
<i aria-hidden="true" class="fas fa-bars"></i>
</button>
</nav>
</header>

<main>
<!-- About -->
<div class="about center">
<h1>Hi, I am <span class="about__name">Christian Templin.</span></h1>
<h2 class="about__role">A Front end Developer.</h2>
<p class="about__desc">
Consectetur neque sed quam molestiae consectetur nesciunt sit alias
Vitae libero perferendis reprehenderit optio veritatis Accusantium at
voluptatum cumque temporibus et Explicabo iste porro quis numquam
distinctio Repellendus adipisci nam perferendis amet eaque hic
Voluptates
</p>

<div class="about__contact center">
<a href="https://example.com">
<span class="btn btn--outline">Resume</span>
</a>

<a
href="https://github.com/rjshkhr"
aria-label="github"
class="link link--icon"
>
<i aria-hidden="true" class="fab fa-github"></i>
</a>

<a
href="https://linkedin.com/in/rjshkhr"
aria-label="linkedin"
class="link link--icon"
>
<i aria-hidden="true" class="fab fa-linkedin"></i>
</a>
</div>
</div>

<!-- Projects -->
<section id="projects" class="section projects">
<h2 class="section__title">Projects</h2>

<div class="projects__grid">
<div class="project">
<h3>Project 1</h3>
<p class="project__description">
Ipsum accusamus ea excepturi aliquid eligendi amet. Explicabo
sapiente debitis labore sed ipsam Mollitia repellat illum quod
unde beatae Quis
</p>
<ul class="project__stack">
<li class="project__stack-item">SASS</li>
<li class="project__stack-item">TypeScript</li>
<li class="project__stack-item">React</li>
</ul>

<a
href="https://github.com"
aria-label="source code"
class="link link--icon"
>
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a
href="https://example.com"
aria-label="live preview"
class="link link--icon"
>
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>

<div class="project">
<h3>Project 2</h3>
<p class="project__description">
Ipsum accusamus ea excepturi aliquid eligendi amet. Explicabo
sapiente debitis labore sed ipsam Mollitia repellat illum quod
unde beatae Quis
</p>
<ul class="project__stack">
<li class="project__stack-item">SASS</li>
<li class="project__stack-item">TypeScript</li>
<li class="project__stack-item">React</li>
</ul>

<a
href="https://github.com"
aria-label="source code"
class="link link--icon"
>
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a
href="https://example.com"
aria-label="live preview"
class="link link--icon"
>
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>

<div class="project">
<h3>Project 3</h3>
<p class="project__description">
Ipsum accusamus ea excepturi aliquid eligendi amet. Explicabo
sapiente debitis labore sed ipsam Mollitia repellat illum quod
unde beatae Quis
</p>
<ul class="project__stack">
<li class="project__stack-item">SASS</li>
<li class="project__stack-item">TypeScript</li>
<li class="project__stack-item">React</li>
</ul>

<a
href="https://github.com"
aria-label="source code"
class="link link--icon"
>
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a
href="https://example.com"
aria-label="live preview"
class="link link--icon"
>
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</section>

<!-- Skills -->
<section class="section skills" id="skills">
<h2 class="section__title">Skills</h2>
<ul class="skills__list">
<li class="skills__list-item btn btn--plain">HTML</li>
<li class="skills__list-item btn btn--plain">CSS</li>
<li class="skills__list-item btn btn--plain">SCSS</li>
<li class="skills__list-item btn btn--plain">JavaScript</li>
<li class="skills__list-item btn btn--plain">TypeScript</li>
<li class="skills__list-item btn btn--plain">React</li>
<li class="skills__list-item btn btn--plain">Redux</li>
<li class="skills__list-item btn btn--plain">Git</li>
<li class="skills__list-item btn btn--plain">Material UI</li>
<li class="skills__list-item btn btn--plain">Jest</li>
<li class="skills__list-item btn btn--plain">Enzyme</li>
<li class="skills__list-item btn btn--plain">CI/CD</li>
</ul>
</section>

<!-- Contact -->
<section class="section contact center" id="contact">
<h2 class="section__title">Contact</h2>
<a href="mailto:[email protected]">
<span class="btn btn--outline">Email me</span>
</a>
</section>
</main>

<footer class="footer">
<a
href="https://github.com/rjshkhr/cleanfolio-minimal"
class="link footer__link"
>
Created By Raj Shekhar
</a>
</footer>

<div class="scroll-container">
<div class="scroll-top">
<a aria-label="Scroll up" href="#top">
<i aria-hidden="true" class="fas fa-arrow-up"></i>
</a>
</div>
</div>

<script src="./script.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
const body = document.body

const btnTheme = document.querySelector('.fa-moon')
const btnHamburger = document.querySelector('.fa-bars')

const addThemeClass = (bodyClass, btnClass) => {
body.classList.add(bodyClass)
btnTheme.classList.add(btnClass)
}

const getBodyTheme = localStorage.getItem('portfolio-theme')
const getBtnTheme = localStorage.getItem('portfolio-btn-theme')

addThemeClass(getBodyTheme, getBtnTheme)

const isDark = () => body.classList.contains('dark')

const setTheme = (bodyClass, btnClass) => {

body.classList.remove(localStorage.getItem('portfolio-theme'))
btnTheme.classList.remove(localStorage.getItem('portfolio-btn-theme'))

addThemeClass(bodyClass, btnClass)

localStorage.setItem('portfolio-theme', bodyClass)
localStorage.setItem('portfolio-btn-theme', btnClass)
}

const toggleTheme = () =>
isDark() ? setTheme('light', 'fa-moon') : setTheme('dark', 'fa-sun')

btnTheme.addEventListener('click', toggleTheme)

const displayList = () => {
const navUl = document.querySelector('.nav__list')

if (btnHamburger.classList.contains('fa-bars')) {
btnHamburger.classList.remove('fa-bars')
btnHamburger.classList.add('fa-times')
navUl.classList.add('display-nav-list')
} else {
btnHamburger.classList.remove('fa-times')
btnHamburger.classList.add('fa-bars')
navUl.classList.remove('display-nav-list')
}
}

btnHamburger.addEventListener('click', displayList)

const scrollUp = () => {
const btnScrollTop = document.querySelector('.scroll-top')

if (
body.scrollTop > 500 ||
document.documentElement.scrollTop > 500
) {
btnScrollTop.style.display = 'block'
} else {
btnScrollTop.style.display = 'none'
}
}

document.addEventListener('scroll', scrollUp)
Loading

0 comments on commit 1e4e358

Please sign in to comment.