Portfolio-Website

This portfolio showcases my work with creative emoji elements, a harmonious blend of professional colors, and a dedicated section for career highlights, presenting my technical skills.

Website Design

Technology Used 💻

🛠  Languages and Tools :

           

Description

• This portfolio showcases a creative blend of emojis to enhance visual appeal and expressiveness.
• The design features a harmonious blend of professional colors for a polished, attractive look.
• A dedicated section highlights career achievements, making it easy to see professional milestones.
• The website is user-friendly, with an intuitive interface that is simple to navigate.
• Responsive design ensures the portfolio looks great and functions well on all devices and screen sizes.
• Added a new dropdown for dynamically changing website colors with options for Autumn, Summer, Rainy, and Winter. Upon selection, the website color changes instantly. Refreshing the website restores it to its default color scheme.
• Added a dynamic wheel animation for the social links section, where each link rotates into the center sequentially. The animation loops continuously, reversing direction after every three links. The central icon and title update with each link. Additionally, I’ve placed the social links logo on the main page and corresponding Font Awesome icons on the career highlights page.

Directory Structure

Portfolio-Website/
├── index.html                # Main landing page of the portfolio website
├── career-highlights.html    # Page dedicated to career highlights and achievements
│
├── css/
│   ├── index.css             # Stylesheet for index.html
│   └── career-highlights.css # Stylesheet for career-highlights.html
│
├── js/
│ ├── index.js                # Script to dynamically change the primary color of the website
│ └── career-highlights.js    # Script to manage the visibility of the color 
│
├── images/                   # Folder containing all images used in the website
│
├── LICENSE                   # MIT License file
│
└── README.md                 # Documentation file for the repository

Files and Folders

• index.html: Main landing page of the portfolio website.
• career-highlights.html: Page dedicated to career highlights and achievements.
• css/index.css: Stylesheet for index.html.
• css/career-highlights.css: Stylesheet for career-highlights.html.
• js/index.js: Script to dynamically change the primary color of the website.
• js/career-highlights.js: Script to manage the visibility of the color switcher dropdown for the career highlights page.
• images/: Folder containing all images used in the website.
• LICENSE: MIT License file.
• README.md: Documentation file for the repository.

---

Mode of Execution Used  

Notepad++

• To begin, visit the official website  
  
  
• Download according to the platform being used like Linux, MacOs or Windows.
  
  
• Follow the setup wizard.
  
  
• After setup, we can write code in HTML and also in other languages.
  
  
• To see the output of HTML code open document in any browser.
  

Hosting With Netlify

1. Visit the official website of Netlify :
   
   
2. Now make an account with GitHub.
   
   
3. Now add all the code in Github repository.
   
   
4. Go to netlify and there is an option for new deployment.
   
   
5. Link with your Github repository name and make sure you have the index.html file for homepage. If you name your file as index it will directly access it else you have to specify the path.
   
   
6. We can also do manual deployment of our website by uploading in netlify manual uploads.
   
   
7. If everything went well our website will be deployed on web and you can share the link and access the app from all browsers.
   
   
8. Now netlify only supports static website. It does not have a server and it does not support websites with server requirement.
   
   
9. We can upload HTML, CSS and JS files in netlify.

Hosting With GitHub Pages

1. Visit the official website of GitHub Pages:
   
   
2. Make sure you have a GitHub account. If not, create one at GitHub.
   
   
3. Create a new repository on GitHub and upload your project files (index.html, CSS, JS, etc.).
   
   
4. Go to the repository settings by clicking on the "Settings" tab.
   
   
5. Scroll down to the "Pages" section in the settings.
   
   
6. Under "Source," select the branch you want to use for GitHub Pages (usually "main" or "master").
   
   
7. If your index.html file is in the root directory of the repository, select the root as the source folder. Otherwise, select the appropriate folder where your index.html is located.
   
   
8. Click "Save" to publish your site.
   
   
9. GitHub Pages will provide a link to your live site. You can share this link and access your site from any browser.
   
   
10. GitHub Pages also supports Jekyll, a static site generator, if you want to use it for more advanced site features.
    

By following these steps, you can host your static website using GitHub Pages and Netlify. Both platforms provide easy-to-use interfaces and are great for deploying static websites.

---

Website Link

I have hosted this Website using Netlify and Github Pages. Click on the Link to have a look at my Website.

---

Additional Resources

For more Frontend Development codes visit my repository: https://github.com/madhurimarawat/Website-Frontend-Developement

---

Thanks for Visiting 😄

• Drop a 🌟 if you find this repository useful.
  
  
• If you have any doubts or suggestions, feel free to reach me.
  
  📫 How to reach me:      
  
  
• Contribute and Discuss: Feel free to open issues 🐛, submit pull requests 🛠️, or start discussions 💬 to help improve this repository!