Skip to content

My Website #46

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

My Website #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 15 additions & 0 deletions img/blob.svg
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 img/perfil.png
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.
191 changes: 191 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--==================== UNICONS ====================-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!--==================== SWIPER CSS ====================-->
<link rel="stylesheet" href="">

<!--==================== CSS ====================-->
<link rel="stylesheet" href="style.css">

<title>Responsive Portfolio Website</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav_logo">Nanami Inaba</a>

<div class="nav_menu" id="nav_menu">
<ul class="nav_list grid">
<li class="nav_item">
<a href="#home" class="nav_link">
<i class="uil uil-estate nav_icon"></i> Home
</a>
</li>
<li class="nav_item">
<a href="#about" class="nav_link">
<i class="uil uil-user nav_icon"></i> About
</a>
</li>
<li class="nav_item">
<a href="#skills" class="nav_link">
<i class="uil uil-file-alt nav_icon"></i> Skills
</a>
</li>
<li class="nav_item">
<a href="#services" class="nav_link">
<i class="uil uil-briefcase-alt nav_icon"></i> Services
</a>
</li>
<li class="nav_item">
<a href="#portfolio" class="nav_link">
<i class="uil uil-scenery nav_icon"></i> Portfolio
</a>
</li>
<li class="nav_item">
<a href="#contact" class="nav_link">
<i class="uil uil-message nav_icon"></i> Contactme
</a>
</li>
</ul>
<i class="uil uil-times nav_close" id="nav-close"></i>
</div>

<div class="nav_btns">
<div class="nav_toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</nav>
</header>

<!--==================== MAIN ====================-->
<main class="main">
<!--==================== HOME ====================-->
<section class="home section" id="home">
<div class="home_container container grid">
<div class="home_content grid">
<div class="home_social">
<a href="https://www.linkedin.com/" target="_blank" class="home_social-icon">
<i class="uil uil-linkedin-alt"></i>
</a>

<a href="https://dribbble.com/" target="_blank" class="home_social-icon">
<i class="uil uil-dribbble"></i>
</a>

<a href="https://github.com/" target="_blank" class="home_social-icon">
<i class="uil uil-github-alt"></i>
</a>
</div>

<div class="home_img">
<svg class="home_blob" viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="mask0" mask-type="alpha">
<path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547
130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775
97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666
0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
</mask>
<g mask="url(#mask0)">
<path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346
165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403
129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028
-0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>

<image class="home_blob-img" xlink:href="img/perfil.png"/>
</g>
</svg>
</div>

<div class="home_data">
<h1 class="home_title">Hi, I am Nanami</h1>
<h3 class="home_subtitle">Student at John Jay College</h3>
<p class="home_description">My goal is to protect people from cybercrime and improve people’s cybersecurity literacy. I am passionate about programming. I love to challenge myself to new things. </p>
<a href="#contact" class="button button--flex">
Contact Me <i class="uil uil-message button_icon"></i>
</a>
</div>
</div>

<div class="home_scroll">
<a href="#about" class="home_scroll-button button--flex">
<i class="uil uil-mouse-alt home__scroll-mouse"></i>
<span class="home__scroll-name">Scroll down</span>
<i class="uil uil-arrow-down home__scroll-arrow"></i>

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

<!--==================== ABOUT ====================-->
<section class="about section" id="about">


</section>

<!--==================== SKILLS ====================-->
<section class="skills section" id="skills">


</section>

<!--==================== QUALIFICATION ====================-->
<section class="qualification section">


</section>

<!--==================== SERVICES ====================-->
<section class="services section" id="services">


</section>

<!--==================== PORTFOLIO ====================-->
<section class="portfolio section" id="portfolio">


</section>

<!--==================== PROJECT IN MIND ====================-->
<section class="project section">


</section>

<!--==================== TESTIMONIAL ====================-->
<section class="testimonial section">


</section>

<!--==================== CONTACT ME ====================-->
<section class="contact section" id="contact">


</section>
</main>

<!--==================== FOOTER ====================-->
<footer class="footer">


</footer>

<!--==================== SCROLL TOP ====================-->


<!--==================== SWIPER JS ====================-->
<script src=""></script>

<!--==================== MAIN JS ====================-->
<script src="main.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*==================== MENU SHOW Y HIDDEN ====================*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}

/*==================== REMOVE MENU MOBILE ====================*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*==================== ACCORDION SKILLS ====================*/


/*==================== QUALIFICATION TABS ====================*/


/*==================== SERVICES MODAL ====================*/


/*==================== PORTFOLIO SWIPER ====================*/


/*==================== TESTIMONIAL ====================*/


/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/


/*==================== CHANGE BACKGROUND HEADER ====================*/


/*==================== SHOW SCROLL UP ====================*/


/*==================== DARK LIGHT THEME ====================*/
Loading