Skip to content

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.

License

Notifications You must be signed in to change notification settings

madhurimarawat/Portfolio-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Screenshot 2024-07-13 212656

Screenshot 2024-07-13 212716

Screenshot 2024-07-13 212801

Screenshot 2024-07-13 212831

Technology Used πŸ’»

πŸ›   Languages and Tools :

CSS   HTML   JavaScript    Bootstrap 

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.

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/colorSwitcher.js: Script to dynamically change the primary color of the website.
  • js/visibility_colorSwitcher.js: Script to manage the visibility of the color switcher dropdown.
  • 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++  Netlify

Notepad++

  • To begin, visit the official website   Notepad++

  • 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 : 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: 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 πŸ˜„