This is repo of my Portfolio Website. You can open the website by clicking on: https://varun-kolanu-portfolio.netlify.app/ or by following this method:
- Fork and clone the repository.
- Install NodeJS on your system.
- Run
npm i - You can view the site on http://localhost:3000/
Html, CSS, Tailwind CSS, Javascript, React JS.
- Hovering state of navbar.
- Indication of the Section where you are present by color of navbar elements (By window.positionOffsetY).
- Change of Contact Me button's position on scrolling (Manipulating height, width, text size on scrolling).
- Smooth Scrolling (by react-scroll).
- Scrolling animation - elements appear as animation as you scroll (By Intersection Observer).
- Github, Codeforces, Codechef account links in About Me section.
- Linking Website and Github repos to buttons in My Projects section.
- I-frame elements to show projects in My projects section.
- Form element to contact with clients.
- Hover states of buttons.
- Can send Gmail and Whatsapp to me directly by clicking on the Send Mail, Send Messages respectively.
- Linked In, Facebook, Instagram profiles in Contact Section.
- Can jump into a section by clicking on navigation menu.
- Used react-icons
- Gradients done by tailwind css.
- Used Shadows by tailwind css.
- Responsive
- In small screens, navbar replaced with hamburger, dropdown.
- When you click on hamburger, you can see it animating to a cross.
- Used 60-30-10 rule. Major portion is Bluish shades, Medium portion for white, Minimal portion for Orange, Pink.
- Heirarchy maintained. Firstly, Image attracts a person then "Myself Varun", "Contact Me" are observed, then small description, navigation menu is seen.
- Width of the main content is limited to 1000px(in desktop) so that one can read comfortably without moving the head much.
- Blue Color is Major since Blue denotes Security, trust, responsibility which are expected in a developer by clients. White: New beginnings, purity Orange: Optimistic, Sociable, Cheerful. Pink: Nurturing hope.
- Font: Mono