Skip to content

halimkhaldi/me

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About me website


Technologie used

-HTML5

-CSS3 and CSS3 animations

-Jquery for dom manipulation

-mailchimp Api for email sending


Processes

-I started by doing a wayframe on how my website would look

-Did some google search on existings portfolios

-Because i suck at design,i want to show more my javascript skills so i thought of making a cool background effect on the first section of the lending page , i took my inspiration from this guy ('https://codepen.io/nashvail/pen/wpGgXO').

-After deciding of what i want and where i wanted it , i started from the basic page structer (only html)

-Started adding content

-Then Started adding some CSS to it , part by part from top to bottom (only basic css).

-Then i made the background effects (basic effects).

-Then after finished the estentiel , i started tweeking thing a little bit , animation , fonts , colors ....etc

-Fixed any bugs in the Desktop version

-At the End i started to worry about the mobile version


Unsolved Problems

-Mail api not fully working i need to register the domain on the api website

-Background effect width goes a bit more then the VW

-Need to work a lot more on the responsive version .


Biggest wins

-after finishing the background effect i wanted to make a small animation on the button , i added a hover trigger on it that turns it to a circle and because the width was reducing as it transforme to a cercle the mouse pointer made it go through an infinite loop where it goes from button to circle and from circle to button .To fix that i added the trigger on the parent container

-Navbar animation on color change , from midle all the way to the edges

-the skills bar , was reloading everytime i pass through that section , i fixed that by adding a control variable to make sure that the animation section executes only one

-Separatin clicks from window click

-fixing a navbar when scrolling to a certain point on the page

-Synchonosing the animnations.


Code Snippet

navbar animation

Background effect

Button to circle

this snippet is not compleate couldn't link the arrow from font awesome but I added the animation keyframe.

Loading bar

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages