Skip to content

Commit

Permalink
Merge pull request #15 from Uzair-Manzoor/mobile-menu
Browse files Browse the repository at this point in the history 
Mobile Menu Pull Request
  • Loading branch information
@Uzair-Manzoor
Uzair-Manzoor committed Jun 27, 2023
2 parents 5364f55 + c8cc1e3 commit cf2a812
Show file tree
Hide file tree
Showing 9 changed files with 2,721 additions and 140 deletions.
25 changes: 25 additions & 0 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"extends": ["airbnb-base"],
"rules": {
"no-shadow": "off",
"no-param-reassign": "off",
"eol-last": "off",
"import/extensions": [ 1, {
"js": "always", "json": "always"
}]
},
"ignorePatterns": [
"dist/",
"build/"
]
}
18 changes: 16 additions & 2 deletions .github/workflows/linters.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
# - name: Setup Webhint
# run: |
# npm install --save-dev hint@7.x
# [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
# [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
# - name: Webhint Report
# run: npx hint .
stylelint:
Expand All @@ -43,9 +43,23 @@ jobs:
- name: Setup Stylelint
run: |
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
[ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
[ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
- name: Stylelint Report
run: npx stylelint "**/*.{css,scss}"
eslint:
name: ESLint
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: "18.x"
- name: Setup ESLint
run: |
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
[ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
- name: ESLint Report
run: npx eslint .
nodechecker:
name: node_modules checker
runs-on: ubuntu-22.04
Expand Down
103 changes: 53 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,46 @@
<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>Personal Portfolio</title>
<title>Uzair's Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<nav class="header-nav">
<div>
<a href="#"><img src="resources/images/Logo.png" alt="my logo"></a>
</div>
<div class="header-manu">
<img class="manu-icon" src="resources/icon/menu.png" alt="menu icon">
</div>
<ul class="nav-items">
<li class="nav-item">
<a class="nav-item-action" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#contact">Contact</a>
</li>
</ul>
<ul class="mobile-nav-items">
<li class="nav-item">
<a class="nav-item-action" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#contact">Contact</a>
</li>
</ul>
<header class="header">
<nav class="header-nav">
<div class="header-logo">
<a class="blue" href="#">Uzair Manzoor</a>
</div>
<div class="header-manu">
<img class="manu-icon" src="resources/icon/menu.png" onclick="openmenu()" alt="menu"/>
</div>
<ul class="nav-items">
<li class="nav-item">
<a class="nav-item-action" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-item-action" href="#contact">Contact</a>
</li>
</ul>
<ul class="mobile-nav-items" id="mobile-nav-items">
<span class="toggle-cross">
<img src="resources/icon/cross-icon-01.png" onclick="closemenu()" alt="X"/>
</span>
<li class="nav-item" onclick="closemenu()">
<a id="m-nav" class="nav-item-action" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item" onclick="closemenu()">
<a id="m-nav" class="nav-item-action" href="#about">About</a>
</li>
<li class="nav-item" onclick="closemenu()">
<a id="m-nav" class="nav-item-action" href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
</header>
<main>
<!-- Banner -->
<section class="headline-container">
<article class="article">
<div class="article-item1">
Expand Down Expand Up @@ -83,7 +85,7 @@ <h3 class="scale-para"><a class="social-title" href="#">LET'S CONNECT</a></h3>
</article>
</section>
<!-- work section -->
<section class="work-section">
<section class="work-section" id="portfolio">
<div class="work-card">
<div class="work-preview">
<img class="project-img" src="resources/images/Snapshoot Portfolio 5.jpg" alt="Project 1">
Expand Down Expand Up @@ -173,41 +175,41 @@ <h2 class="work-title">Multi-Post Stories</h2>
</div>
</div>
</section>
<section class="about">
<section class="about" id="about">
<div class="about-myself">
<h2 class="headline-title">About Myself</h2>
<p class="headline-content">
<h2 class="headline-title scale-para">About Myself</h2>
<p class="headline-content scale-para">
Hello I'm a software developer! I can help you build a product ,
feature or website Look through some of my work and experience! If
you like what you see and have a project you need coded, don't
hestiate to contact me.
</p>
<div class="headline-social">
<a class="social-title" href="#">LET'S CONNECT</a>
<h3 class="scale-para"><a class="social-title" href="#">LET'S CONNECT</a></h3>
<ul class="social-links">
<li class="social-links">
<li class="social-link">
<a href="#">
<img src="resources/icon/twitter.svg" alt="Twitter">
</a>
</li>
<li class="social-links">
<li class="social-link icon">
<a href="#">
<img src="resources/icon/Linkedin icon.svg" alt="Linkedin">
<img class="social-icon" src="resources/icon/Linkedin icon.svg" alt="Linkedin">
</a>
</li>
<li class="social-links">
<li class="social-link">
<a href="#">
<img src="resources/icon/github.svg" alt="Github">
<img class="social-icon" src="resources/icon/github.svg" alt="Github">
</a>
</li>
<li class="social-links">
<li class="social-link">
<a href="#">
<img src="resources/icon/Vector.svg" alt="vector">
<img class="social-icon" src="resources/icon/Vector.svg" alt="vector">
</a>
</li>
<li class="social-links">
<li class="social-link">
<a href="#">
<img src="resources/icon/VectorM.svg" alt="vectorm">
<img class="social-icon" src="resources/icon/VectorM.svg" alt="vectorm">
</a>
</li>
</ul>
Expand Down Expand Up @@ -262,10 +264,10 @@ <h3 class="sub-title">
</ul>
</div>
</section>
<section class="contact_form">
<section class="contact_form" id="contact">
<div class="contact_container">
<h2 class="title">Contact me</h2>
<p class="contact_form_des">
<p class="form_dis">
If you have an application you are interested in developing, a
feature that you need built or a project that needs coding. I'd
love to help with it
Expand Down Expand Up @@ -307,6 +309,7 @@ <h2 class="title">Contact me</h2>
</form>
</div>
</section>
</main>
</main>
<script src="script.js"></script>
</body>
</html>
Loading

0 comments on commit cf2a812

Please sign in to comment.