Skip to content

Commit

Permalink
fixed animations 🎥
Browse files Browse the repository at this point in the history
  • Loading branch information
@lightlessdays
lightlessdays committed Nov 9, 2023
1 parent 30cca80 commit 4c24b77
Show file tree
Hide file tree
Showing 4 changed files with 325 additions and 23 deletions.
192 changes: 172 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cynthia Ugwu • Product Designer</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mobilestyle.css" />
<!-- FAVICON -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- ICONS -->
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
Expand All @@ -16,15 +17,31 @@
<link rel="stylesheet" href="locomotive.css" />
</head>
<body>
<div id="minicircle"></div>
<!-- CODE FOR NAVIGATION BAR
<div class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">Home</a>
<a href="#">The Plug</a>
<a href="#">Ixperience</a>
<a href="#">Hudu</a>
</div> -->

<!-- THIS MINI CIRCLE WILL FOLLOW THE MOUSE POINTER ON DESKTOP -->
<div id="minicircle">
<div id="minicircle-text">VISIT</div>
</div>

<!-- DESKTOP CODE STARTS FROM HERE. IT WILL NOT BE VISIBLE ON MOBILE DEVICES -->
<div id="main">
<div id="hero">
<div id="nav">
<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a href="#">Cynthia Ugwu</a>
<!-- </div></div> -->
<!-- <span onclick="openNav()"><a href="" onclick="openNav()"> -->
<h4>MENU +</h4>
<!-- </a></span> -->
</div>
<div id="heading">
<div class="bounding">
Expand All @@ -49,32 +66,161 @@ <h5 class="boundingtext">Work from May 23'</h5>
</div>
<div id="herofooter">
<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a href=""
>previously worked at yml <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- <div class="boundingtext"> -->
<a
href="https://dhruvbadaya.com/cynthiaugwu/"
class="hover-underline-animation"
>previously worked at yml <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- </div> -->

<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a href=""
>protopie ambasssador <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- <div class="boundingtext"> -->
<a
href="https://dhruvbadaya.com/cynthiaugwu/"
class="hover-underline-animation"
>protopie ambasssador <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- </div> -->
<div id="icon-set">
<div id="circle"><i class="ri-arrow-down-line"></i></div>
<div id="circle"><i class="ri-arrow-down-line"></i></div>
</div>
</div>
</div>
<div id="second">
<a href=""
><div class="elem">
<img src="assets/plug.png" alt="" />
<h1>The Plug</h1>
<h5>2022</h5>
</div></a
>
<a href=""
><div class="elem">
<img src="assets/ixperience.png" alt="" />
<h1>Ixperience</h1>
<h5>2022</h5>
</div></a
>
<a href=""
><div class="elem elemlast">
<img src="assets/hudu.png" alt="" />
<h1>Hudu</h1>
<h5>2022</h5>
</div></a
>
<br />
</div>
<div class="about">
<img src="assets/cynthia.png" alt="" />
<div id="textabout">
<h5>(About Me)</h5>
<p>
I'm a product designer with a passion for creating products that not
only look good but also solve real problems. When I'm not sketching
ideas on paper, you can find me binge-watching a Netflix series or
playing video games. My design philosophy is simple: make it
visually appealing, functional, and bring a smile to people's faces.
I'm the designer you want on your team if you want to make people
say 'I need that in my life!'.
</p>
<a href="https://dhruvbadaya.com/cynthiaugwu/">Let's Talk</a>
</div>
</div>
<div class="subscribe">
<h5>(forgot to mention)</h5>
<a href="https://dhruvbadaya.com/cynthiaugwu/"
><h3 class="hover-underline-animation">
Subscribe to my YouTube Channel
<i class="ri-arrow-right-up-line"></i></h3
></a>
</div>
<div class="footer">
<div class="footer-left">
<h5>2023 &copy;</h5>
<h5>00:05 AM EST</h5>
</div>
<div class="footer-right">
<a href="https://dhruvbadaya.com/cynthiaugwu/">DRIBBBLE</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">INSTAGRAM</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">LINKEDIN</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">TWITTER</a>
</div>
</div>
</div>

<!-- MOBILE CODE STARTS FROM HERE AND IS INDEPENDENT OF THE DESKTOP CODE -->
<div id="mainmobile">
<!-- <div id="main"> -->
<div id="hero">
<div class="mobile-banner">
This website is better on a desktop / laptop. 🧑‍💻
</div>
<div id="nav">
<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a href="#">Cynthia Ugwu</a>
<!-- </div></div> -->
<a href="#"><h4 class="menu">MENU +</h4></a>
</div>
<div id="heading">
<div class="bounding">
<h1 class="boundingtext">Product</h1>
</div>
<div class="blocktext">
<div class="bounding">
<h1 id="secondh1" class="boundingtext">Designer</h1>
</div>
<div class="bounding">
<h5 class="boundingtext">Based in Toronto</h5>
</div>
</div>
</div>
<div id="chhoti-headings">
<div class="bounding">
<h5 class="boundingtext">Available for Freelance</h5>
</div>
<div class="bounding">
<h5 class="boundingtext">Work from May 23'</h5>
</div>
</div>
<div id="herofooter">
<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a
href="https://dhruvbadaya.com/cynthiaugwu/"
class="hover-underline-animation"
>previously worked at yml <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- </div> -->

<!-- <div class="bounding"> -->
<!-- <div class="boundingtext"> -->
<a
href="https://dhruvbadaya.com/cynthiaugwu/"
class="hover-underline-animation"
>protopie ambasssador <i class="ri-arrow-right-up-line"></i
></a>
<!-- </div> -->
<!-- </div> -->
<div id="icon-set">
<div id="circle"><i class="ri-arrow-down-line"></i></div>
<div id="circle"><i class="ri-arrow-down-line"></i></div>
</div>
</div>
</div>

<div id="second">
<div class="elem">
<img src="assets/plug.png" alt="" />
<h1>The Plug</h1>
<h5>2022</h5>
</div>

<div class="elem">
<img src="assets/ixperience.png" alt="" />
<h1>Ixperience</h1>
Expand All @@ -100,28 +246,34 @@ <h5>(About Me)</h5>
I'm the designer you want on your team if you want to make people
say 'I need that in my life!'.
</p>
<a href="">Let's Talk</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">Let's Talk</a>
</div>
</div>
<div class="subscribe">
<h5>(forgot to mention)</h5>
<h3>
Subscribe to my YouTube Channel <i class="ri-arrow-right-up-line"></i>
</h3>
<a href="https://dhruvbadaya.com/cynthiaugwu/"
><h3 class="hover-underline-animation">
Subscribe to my YouTube Channel
<i class="ri-arrow-right-up-line"></i></h3
></a>
</div>
<div class="footer">
<div class="footer-left">
<h5>2023 &copy;</h5>
<h5>00:05 AM EST</h5>
</div>
<div class="footer-right">
<a href="">DRIBBBLE</a>
<a href="">INSTAGRAM</a>
<a href="">LINKEDIN</a>
<a href="">TWITTER</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">DRIBBBLE</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">INSTAGRAM</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">LINKEDIN</a>
<a href="https://dhruvbadaya.com/cynthiaugwu/">TWITTER</a>
</div>
</div>
<!-- </div> -->
</div>

<!-- SCRIPTS BELOW -->

<!-- GSAP -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
Expand Down
34 changes: 34 additions & 0 deletions mobilestyle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*HIDING THE DESKTOP CODE ON MOBILE*/
@media (max-width: 767px) {
#main {
display:none;
}
#mainmobile{
display:revert;
}
#minicircle{
display:none;
}

.elem img{
display: none;
}
}

/*MODIFYING THE DESKTOP ELEMENTS*/
@media (max-width: 767px) {
.menu {
font-size: 14px !important;
}
}

/* CSS FOR MOBILE ONLY ELEMENTS */

.mobile-banner{
background-color: rgba(255,255,255,0.8);
color:black;
text-align: center;
padding: 12px;
margin-bottom: 10px;
font-size: 14px;
}
41 changes: 41 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,3 +207,44 @@ document.querySelectorAll(".elem").forEach(function(elem){

// showImageInElem();

//SIDE BAR CODE
/* Set the width of the side navigation to 250px */
// function openNav() {
// document.getElementById("mySidenav").style.width = "250px";
// document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
// }

// /* Set the width of the side navigation to 0 */
// function closeNav() {
// document.getElementById("mySidenav").style.width = "0";
// document.body.style.backgroundColor = "black";
// }



var elemlist = document.getElementsByClassName("elem")

for(var i=0;i<elemlist.length;i++){
elemlist[i].addEventListener("mouseenter",mouseEnter)
elemlist[i].addEventListener("mouseleave",mouseExit)
}


function mouseEnter() {
var minicirclestyle = document.getElementById("minicircle").style;
minicirclestyle.width = "100px"
minicirclestyle.height = "100px"
minicirclestyle.opacity = 1

document.getElementById("minicircle-text").style.display = "revert";
}

function mouseExit(){
// document.getElementById("elemfirst").style.color = "black"
var minicirclestyle = document.getElementById("minicircle").style;
minicirclestyle.width="15px"
minicirclestyle.height = "15px"
minicirclestyle.opacity = 0.5
document.getElementById("minicircle-text").style.display = "none";
}

Loading

0 comments on commit 4c24b77

Please sign in to comment.