This project is a professsional portfolio skeleton. There is a section for a quick intro, skills, projects and contact. Both mobile and desktop version are available.

  • By Tracy Musongole
  • Last update: Dec 1, 2022
  • Comments: 10

Thy Portfolio

This is a skeleton of a professional portfolio. This would best suit a software developer. The main features are the intro section, the skills section, the project section and the contact section. All projects have live demos. Both mobile and desktop version are available.

.

Built With

  • HTML & CSS
  • Javascript
  • Github

Live Demo

https://elfin-git.github.io/Thy-Portfolio/

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • Github flow knowledge. -Intermediate CSS, HTML and Javascript. -Installation of linter files. -install webpack

Setup

Usage

  • This can be used as a software developer portfolio.

Install

  • Set up Github Actions
  • Set up linter > Lighthouse , Webhint ,Stylelint , Eslint.

Authors

👤 Tracy Musongole

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Shout out to the contributors of this project

👤 Momanyi Hassan

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.

Github

https://github.com/elfin-git/Thy-Portfolio

Comments(10)

  • 1

    Js: Add modal popup with Javascript

    • I updated the main page so that the projects section is created dynamically using the information stored in that JavaScript object.
    • I created the modal popup dynamically using javascript.
    • I styled the popup with a new stylesheet popup.css.
    • I made sure the modal pops up every time the a "See Project" button is clicked and closed when the X is clicked.
  • 2

    Peer to peer code review: techEmpress_Recillah_Eva

    POSITIVE THOUGHTS

    • Well-organized code
    • Use of HTML5 semantic elements
    • Good use of classes and ids
    • Layout model fully abided

    SUGGESTIONS

    • It would be better to take out all the stylesheet rules for the mobile dimensions from the @media query conditional rule, as they would be applied to the mobile devices regardless of them being conditioned or not by a "max-width" criterion.
    • I would suggest the usage of more (preferably all) relative measurement units (em, rem, vw, vh, %) instead of px
    • It would be better if you would reconsider having a floating point dimension associated with the px unit, as a px is the smallest unit a monitor can display - hence it can't be further fractioned in a decimal place number
  • 3

    Bugs: hide-and-seek

    • Good workflow
    • project working as it should.

    suggestion

    on your index.js, line 44 as below, names: fullName.value, kindly consider defining the variable before adding value to it.

  • 4

    Form js: Save the form data in the local storage

    My partner and I created a javascript object to hold the input values of the form. We then used stringify and parse methods to preserve the data in the browser local storage. This means whenever the page is reloaded, all the inputs will remain the same, except for those which will be modified.

  • 5

    Form js: Validate form with javascript

    My coding partner and I did client side form validation. I declared constants to hold the values of the form and email My partner added an event listener to ensure that if the email is not in lower case, the form will not be submitted I made sure that the error message was styled correctly.

  • 6

    Js: Add Toggle menu with javascript

    I first added an X bootstrap icon. I then added a class "large" that would toggle once the hamburger menu is pressed. I also added another list of nav-links to be displayed when the menu is clicked. I made sure the href of each link is corresponding to the correct website section. I made sure the toggle menu will and the X icon will not be displayed once a user clicks on one of the page links or on the X icon.

  • 7

    Accessibility PR:

    -Page tittle: No issues found

    • Image text alternatives: No issues found
    • Text Headings: No issues found
    • Color contrast: No issues found
    • Resize: No issues found.
    • Interaction: Labels added to form fields
    • Moving Content: No issues found
    • Multimedia: No issues found
    • The basic structure of the page: No issues found.
  • 8

    Desktop version: Create the desktop version of Thy portfolio

    I created the desktop version using a screen media query. These are some of the changes I made in comparison to the mobile version.

    • I added page-links to the nav-bar and removed the hamburger menu.
    • I added added different background images.
    • Changed the layout of my work cards.
    • Adjusted the responsive width of my supporting texts. My form, however, remained the same. There were few additional elements, but many layout changes.
  • 9

    Works section: Add grids, style project images and supporting text, add background images too.

    I made a grid lay out to be used by all the works. I added the project image, supporting text and the button. I multiplied the same section 3 times in the html. I then added the background images.

  • 10

    Mobile skeleton ABOUT SECTION: Added linters, JSON packages, HTML, CSS & .gitignore

    I updated the READme file, ignored node_modules in git ignore, set up html-css linters and some JSON packages first. I then added the first section of the project. That is the About section. This consisted of the navbar, a short introduction, Skills, frameworks and programming languages. At the end of the section I added social media links & icons, then lastly, a link to the Work section.

Popular Tag

Related