Skip to content

th done #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zuhayb-Gardaf wants to merge 3 commits into
base: main
Choose a base branch
from
Open

th done #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f4d78c
inital commit
Zuhayb-Gardaf Nov 4, 2022
dea10db
inital commit
Zuhayb-Gardaf Nov 4, 2022
bcc0d0d
the done
Zuhayb-Gardaf Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 1.jpg
View file
Open in desktop
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 3.jpg
View file
Open in desktop
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 4.jpg
View file
Open in desktop
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 5.jpg
View file
Open in desktop
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 6.jpg
View file
Open in desktop
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 7.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
310 changes: 304 additions & 6 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,311 @@
<!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>Document</title>
<link rel="stylesheet" href="style/style.css" />
<meta charset="utf-8" />
<meta name="viewpoet" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>My Portfolio</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
/>
</head>
<body>
<!-- start here -->
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-witdh">
<div class="logo">
<a href="#home">Suhayb <span>Gardaf</span></a>
</div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#Service" class="menu-btn">Service</a></li>
<li><a href="#skills" class="menu-btn">Skill</a></li>
<li><a href="#teams" class="menu-btn">Team</a></li>
<li><a href="#contact" class="menu-btn">contact</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>

<!-- home section -->

<section class="home" id="home">
<div class="max-witdh">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Suhayb Abdikariim</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
<a href="#about"> Hire Me</a>
</div>
</div>
</section>

<!-- about section -->

<section class="about" id="about">
<div class="max-witdh">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column left">
<img src="1.jpg" />
</div>
<div class="column right">
<div class="text">
I'm Suhayb and I'm a <span class="typing-2"></span>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut
voluptatum eveniet doloremque autem excepturi eaque, sit
laboriosam voluptatem nisi delectus.
</p>
<a href="#">Download CV</a>
</div>
</div>
</div>
</section>

<!-- service section -->

<section class="Service" id="Service">
<div class="max-witdh">
<h2 class="title">My Services</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fas fa-paint-brush"></i>
<div class="text">Web Design</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-chart-line"></i>
<div class="text">Advertising</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">App Design</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</div>
</div>
</div>
</div>
</section>

<!-- skills section -->

<section class="skills" id="skills">
<div class="max-witdh">
<h2 class="title">My Skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My Creative Skills & Expriences</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#"> Read More</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Html</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Css</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>Javascript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Php</span>
<span>50%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>MySql</span>
<span>70%</span>
</div>
<div class="line sql"></div>
</div>
</div>
</div>
</div>

<!-- teams section -->
</section>
<section class="teams" id="teams">
<div class="max-witdh">
<h2 class="title">My Teams</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="3.jpg" alt="" />
<div class="text">SomeOme Name</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="4.jpg" alt="" />
<div class="text">SomeOme Name</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="5.jpg" alt="" />
<div class="text">SomeOme Name</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="6.jpg" alt="" />
<div class="text">SomeOme Name</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="7.jpg" alt="" />
<div class="text">SomeOme Name</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</div>
</div>
</section>

<!-- contact section -->

<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos harum corporis fuga corrupti. Doloribus quis soluta
nesciunt veritatis vitae nobis?
</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">Suhayb Gardaf</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">Somaliland,Hargeisa,Goljano</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">Hajigardaf0@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required />
</div>
<div class="field email">
<input type="email" placeholder="Email" required />
</div>
</div>
<div class="field">
<input type="text" placeholder="Subject" required />
</div>
<div class="field textarea">
<textarea
cols="30"
rows="10"
placeholder="Message.."
required
></textarea>
</div>
<div class="button">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>
-->
<footer>
<span>
Created By <a href="#about">Suhayb Abdikariim</a
><span class="far fa-copyrigth"></span> 2022 All Right Reserved</span
>
</footer>

<script src="style.js"></script>
</body>
</html>
72 changes: 72 additions & 0 deletions style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
$(document).ready(function(){
$(window).scroll(function(){
// sticky navbar on scroll script
if(this.scrollY > 20){
$('.navbar').addClass("sticky");
}else{
$('.navbar').removeClass("sticky");
}

// scroll-up button show/hide script
if(this.scrollY > 500){
$('.scroll-up-btn').addClass("show");
}else{
$('.scroll-up-btn').removeClass("show");
}
});

// slide-up script
$('.scroll-up-btn').click(function(){
$('html').animate({scrollTop: 0});
// removing smooth scroll on slide-up button click
$('html').css("scrollBehavior", "auto");
});

$('.navbar .menu li a').click(function(){
// applying again smooth scroll on menu items click
$('html').css("scrollBehavior", "smooth");
});

// toggle menu/navbar script
$('.menu-btn').click(function(){
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});

// typing text animation script
var typed = new Typed(".typing", {
strings: ["Developer", "Designer", "Blogger", "Freelancer", "YouTuber"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

var typed = new Typed(".typing-2", {
strings: ["Developer", "Designer", "Blogger", "Freelancer", "YouTuber"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

// owl carousel script
$('.carousel').owlCarousel({
margin: 20,
loop: true,
autoplayTimeOut: 2000,
autoplayHoverPause: true,
responsive: {
0:{
items: 1,
nav: false
},
600:{
items: 2,
nav: false
},
1000:{
items: 3,
nav: false
}
}
});
});
Binary file added style/2.JPG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading