Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@unbeeyt
unbeeyt authored May 26, 2024
1 parent 132b609 commit 47d6b68
Show file tree
Hide file tree
Showing 11 changed files with 676 additions and 14 deletions.
1 change: 1 addition & 0 deletions assets/icons/copyright.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/heart.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/instagram.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/magnifying-glass-plus.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/mastodon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/pfp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
227 changes: 213 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,214 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Jay Lilith | Portfolio</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,700"rel="stylesheet'><link rel="stylesheet" href="./style.css">

<html>
<head>
<title>UNBEE Portfolio</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script type="text/javascript" src="index.js">
</script>
<div id="console"></div>

</script>
</body>
</html>
</head>
<body>
<div class="menu-responsive">
<nav>
<ul>
<li><a class="scroll" href="#about">About</a></li>
<li><a class="scroll" href="#skills">Skills</a></li>
<li><a class="scroll" href="#portfolio">Portfolio</a></li>
<li><a class="scroll" href="#contact">Contact</a></li>
</ul>
</nav>
</div>

<header>
<div class="container">
<div class="row">
<div class="header__top">
<div class="col-md-6 header__top-brand">
<h1><span class="bold">Jay</span> Lilith</h1>
<hr>
</div>
<nav class="col-md-6 header__top-nav hidden-md-down">
<ul>
<li><a class="scroll" href="#about">About</a></li>
<li><a class="scroll" href="#skills">Skills</a></li>
<li><a class="scroll" href="#portfolio">Portfolio</a></li>
<li><a class="scroll" href="#contact">Contact</a></li>
</ul>
</nav>
<nav class="col-md-6 header__top--responsive hidden-lg-up">
<ul>
<li><a class="menu-bars" href="#"><i class="fa fa-bars" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>

<div class="header__content">
<p class="bold">Hello !</p>
<p>I'm a German <span class="bold">Front-end Developer</span> & <span class="bold">Web Designer</span></p>
<a class="btn scroll" href="#portfolio">See My Work</a>
</div>

<div class="header__arrow">
<a class="scroll" href="#about"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
</div>

</div>
</header>

<section id="about">
<div class="container">
<h2>Who I Am</h2>
<hr>
<img src="assets/img/pfp.png" alt="ProfilePicture" class="pfp">
<p class="lead">Designer & Developer</p>
<p>I'm <span class="bold">Jay Lilith</span>, a <strong>Designer</strong> and <strong>Front-end Developer</strong> from Heinsberg, Germany.</p>
<p>I love <strong>helping businesses</strong> of all size to build and improve their online presence.</p>
<p>I <strong>Design</strong> and <strong>Develop</strong> modern and responsive website.</p>
<p>Aside from development, I like learning languages, playing and waching sports.</p>
</div>
</section>

<section id="skills">
<div class="container">
<h2>My Skills</h2>
<hr>
<div class="row">
<div class="skill col-12 col-lg-6">
<div class="skills__percent">95%</div>
<div class="progress-container">
<strong>HTML / CSS</strong>
<div class="progress">
<div class="progress-bar" style="width: 95%"></div>
</div>
</div>
</div>
<div class="skill col-12 col-lg-6">
<div class="skills__percent">80%</div>
<div class="progress-container">
<strong>JavaScript</strong>
<div class="progress">
<div class="progress-bar" style="width: 80%"></div>
</div>
</div>
</div>
<div class="skill col-12 col-lg-6">
<div class="skills__percent">90%</div>
<div class="progress-container">
<strong>Photoshop</strong>
<div class="progress">
<div class="progress-bar" style="width: 90%"></div>
</div>
</div>
</div>
<div class="skill col-12 col-lg-6">
<div class="skills__percent">85%</div>
<div class="progress-container">
<strong>Wordpress</strong>
<div class="progress">
<div class="progress-bar" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="portfolio">
<h2>Portfolio</h2>
<hr>
<div class="container">
<div class="portfolio__projects">
<div class="row">
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
<div class="col-lg-4 col-md-6">
<figure>
<figcaption>
<h3>Project Name</h3>
<p>Coming Soon</p>
<a href="#"><img src="assets/icons/magnifying-glass-plus.svg" alt="searchglasses" class="icon"></a></a>
</figcaption>
<img src="http://via.placeholder.com/300x250">
</figure>
</div>
</div>
</div>
</div>
</section>

<section id="contact">
<div class="container">
<p class="lead">Do you like what you see ?</p>
<p>Need a <span class="text-animate">web designer ?</span></p>
<a class="btn" href="mailto:[email protected]">Contact Me</a>

<div class="contact__social">
<a href="https://github.com/unbeeyt" target="_blank">
<img src="assets/icons/github.svg" alt="Github" class="icon"></a>
<a href="https://mastodon.de/@unbee" target="_blank">
<img src="assets/icons/mastodon.svg" alt="Mastodon" class="icon" /></a>
<a href="https://www.instagram.com/unbee_yt/" target="_blank">
<img src="assets/icons/instagram.svg" alt="GitHub" class="icon"></a>

</div>
</div>
</section>

<section id="footer">
<p>Made with <img src="assets/icons/heart.svg" alt="heart" class="icon"></i>by <a href="https://www.cyr" target="_blank">Jay Lilith Kusznierz</a> <img src="assets/icons/copyright.svg" alt="cc" class="icon"></i>2024</p>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
<script src='https://unpkg.com/scrollreveal/dist/scrollreveal.min.js'></script><script src="./script.js"></script>

</body>
</html>
41 changes: 41 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
$(function() {

// Menu Responsive
$(".menu-responsive").toggle();

$(".menu-bars").on("click", function() {
$(".menu-responsive").toggle("slow");
});


// Scroll click on menu
$(".scroll").on("click", function() {
$(this).each(function() {
const sectionTop = $(this.hash).offset().top;
$("html, body").animate({
scrollTop: sectionTop
}, 1500);
});
});


// Progress Bar Animate
window.sr = ScrollReveal();
sr.reveal(".progress-bar", {
origin: "left",
duration: 2000,
distance: "100%"
});


// Contact Text Animate
const sentences = ["web designer ?", "web developer ?"];
let i = 0;

setInterval(function() {
$(".text-animate").fadeOut(function() {
$(this).text(sentences[i = (i + 1) % sentences.length]).fadeIn();
});
}, 2500);

});
Loading

0 comments on commit 47d6b68

Please sign in to comment.