✨An overview of the project

This project is a recent Computer Science graduate's engaging online portfolio showcasing their coding projects, skill and experience to potential employers. The portfolio includes interactive features, a mobile responsive design, and integrated SEO optimization. Also designed to demonstrate coding abilities and understanding of web development best practices.

✨Tree - Project Directory

📂root
    -index.html
    -readme.md
    -robot.txt
    -sitemap.xml
    📂 assets
       📂bgs
        -images*.*
       📂icons
        -images*.*
       📂project1
        -images*.*
       📂project2
        -images*.*
       📂project3
        -images*.*
    📂css
      -styles.css
    📂js
      -script.js

✨Instructions for running the project locally

To run this webpage locally, please read and follow instructions on this readme.txt file.

1. Extract the files included in the zip file named 'portfolioproject.zip'.
2. Open the index.html file using your preferred browser e.g. google chrome or Firefox. No need to run a dedicated http server for running locally.
3. To change and customize the contents of this project such as the Profile Name, Profile Picture, Paragraphs, etc. You can edit the desired content on the corresponding elements in the index.html file.
4. To change the images of the lightboxModal, please update the entries of the gallery display on the javascript file manually.
5. Make sure that the links on the javascript points correctly to the desired images to be used.
6. To change the design elements, you can edit the css file according to your preference.
7. Don't forget to change the content values on the meta tags for SEO optimization.

✨A description of interactive features implemented

Hover Effects

• Cursor change appearance when hovered over clickable elements such as buttons, section-titles and links.
• Color change to clickable elements such as buttons, section-titles and links.

Hamburger button / Header Menu

• Hamburger button only appears on mobile devices with screen width less than or equal to 768 pixels.
• Header menu appears on desktop browsers and hides when viewed on mobile devices with screens less than or equal to 768 pixels.

Lightbox

• Lightbox activates when thumbnail images for Projects is clicked.
• Lightbox has close button on upper right-side.

Slideshow

• Slideshow is enabled with both on screen button(mouse click) and keyboard controls.
• Images shows snippets of the codes(html, css, js) for each project showcased.

Animations

• Hamburger button and Heaeder Menu show/hide.
• Section content show/hide options.
• Section-title transformation when activated.

✨Technologies used

• Project was coded using Phoenix Code, an open source coding application.
  • Phoenix Code 🔗
• Testing done on Desktop and mobile device using the chrome browser.
• Project and associated project samples are uploaded to Github public repositories.
  • Portfolio Project 🔗
  • Showcased Projects
    1. To-do Web App Project 🔗
    2. Weather Update App Project 🔗
    3. Blog Site Project 🔗
• Project published on Netlify
  • Portfolio Live Site 🔗

✨SEO strategies implemented

• Basic SEO meta tags.
• Robots & Crawlers meta tags for googlebot and bingbot.
• Implement alt attributes for images for better search engine optimization.
• Implement robot.txt and sitemap.xml files.
• SEO meta tags for Open Graph / Facebook.
• SEO meta tags for Twitter.