A community maintained open source project aimed at making a personal portfolio

  • By Smaranjit Ghose
  • Last update: Jan 9, 2023
  • Comments: 16

Awesome Portfolio Website

A community maintained open source project aimed at making personal portfolio for researchers, developers and analysts simple, fast and less cumbersome. We make sure you have a full-fledged website to showcase your work while you can spend time on your learning and innovative endeavours.

A sneak peek into what we have here πŸ™ˆ :

Home Page:

Experience Page:

Project Page:

Research Page:

Education Page:

How to use this? πŸ› 

Check out our awesome Documentation

Contribution Guidelines πŸ—

Are we missing any of your favorite features, which you think you can add to it ❓ We invite you to contribute to this project and improve it further.

Click on the image below to set up and contribute to the project or Click here

Project Maintainers πŸ‘¨ 🏫 :

Smaranjit Ghose Anush Bhatia

Our valuable Contributors πŸ‘©β€πŸ’» πŸ‘¨β€πŸ’» :

Open Source Programs we have been a part of:

Github

https://github.com/smaranjitghose/awesome-portfolio-websites

Comments(16)

  • 1

    Micro animations for social media icons

    Reference

    Please use your creativity

    For example:

    • GitHub: the octocat moves the hand. A rough exampleβœ…
    • Twitter: the tweety flaps wings βœ…
    • LinkedIN: the dot over I bounces like a ball
    • Medium:
    • Kaggle:
    • Codeforces:
    • Google Scholar:
    • Dribble:
    • Instagram:
  • 2

    Animate the SVG at the top of Project Page

    Sample:

    sample

    Credits lie with original creators

    Specifications

    • Please do not use the above reference directly. It is given for giving a clear idea of what can be done

    • We expect you to modify some open source illustration to achieve this

    • In your PR description, do not forget to add a reference to the place from where you took it

    • openpeeps has some great stuff for our use case

    • Another alternative is undraw.co

    • For the animation itself, either write the svg animation from scratch or use anime.js

  • 3

    Repository OpenGraph Card

    • Create a promotional card with dimensions 1280Γ—640px for the repository (This appears when the link to the repository is shared across various social media, even WhatsApp!)
    • The Name of the project should be prominent.
    • The background should resonate well with the goal of the project

    Sample Reference

  • 4

    Modifications to social media icons

    • [ ] Add a Social Media icon (with relevant transition) for Google Scholar, Instagram, Codeforces and Leetcode
    • [ ] Modify the code so that the user can display any combination of social media as per their needs.
    • [ ] Input the links of the same using a JSON in main.js or home.js
    • [ ] Replace the email id in the footer with a corresponding βœ‰ icon
    • [ ] Footer Bug: footer_bug
  • 5

    Education Page

    ** Do Improvements in the UI, Add Animations

    Suggested Features

    • [ ] Formal Education Section [ Try to have it in a timeline or branches of a tree theme]
    • [ ] Summer Schools and MOOCs Section
    • [ ] Badges Section
  • 6

    Resume

    Development

    • Build the resume from scratch using Pure LaTeX
    • Use Overleaf for this.
    • Do one section at a time to keep it simple.
    • Whoever is working on this, ping me on Slack for the template
    • Resources to get started with LaTeX: Vincet Knight's Youtube Videos , LaTeX Documentation, Overleaf Guides,Overleaf Tutorials
    • Give the PRs to a branch called resume_latex ( Before you do it remind me or any of the mentors to create the branch for you)
    • Humble Suggestion: Do not run LaTeX files locally

    Integration

    • [ ] To be added to the Navbar once complete
    • [ ] On clicking, the pdf should start downloading
  • 7

    Home Page

    Features:

    • [ ] Try to improve the particle effect in the background
    • [ ] Improve the documentation of the particle script with detailed explanations
    • [x] Terminal Like effect for the professions
    • [ ] About Section
    • [ ] Dark mode for the section containing: particle effect, social media icons, terminal effect and the name
  • 8

    Particle Effect Component to be used in the background of all the pages[React]

    • This has to be built using three.js
    • Reference video
    • We just need the dark background with the particles so that any card or other objects can be placed infront of it for the various pages
    • The geometric shape is not required.
  • 9

    Contact Page

    Suggestions:

    • Illustration on the left
    • Form on the right |--First Name** |--Last Name** |--Phone Number* |--Email** |--Message** |--Captcha
    • Use formspree for now
    • Also, put the social icons on the left
    • Work on the dark mode
    • Make this mobile responsive
    • Update the navbar only when complete and approved
  • 10

    Conference Highlight Page Template

    Reference

    Footer Wave Reference

    Instructions

    • Make the cards square in shape
    • The title and subtitle text should be present at the bottom of the cards rather than the center
    • All the images should be placed inside ./assets/images/events/conf1/
    • Name the images properly
    • The images to be used for the purpose of the demo page are to be taken from here
    • Do not add a tab in the Nav Bar. The page would be accessed directly with ./conf_temp.html
    • The CSS file should be ./assets/css/conf_temp.css and the Js should be ./assets/js/conf_temp.js
    • To add or remove cards and the details for the same, it should be done from a JSON variable inside conf_temp.js. Check out research.js for reference.
  • 11

    Navbar UI Enhancement ( Hover Transition)

    The header section has buttons like home, experience, etc. Hover effect along with shadows could be added to the item and an onclick effect could be added as well

  • 12

    How to add more social media icons

    I would like to add the following social media icons to my profile:

    • Google Scholar
    • YouTube
    • (Orcid https://orcid.org/)
    • (Researchgate https://www.researchgate.net/)

    They have often been the topic in other issues and discussions but I never learned how I can actually add them. It would be great if this option would be provided! The first two (Google Scholar and YouTube) are especially important.

    This is already discussed in #316 but since this issue is closed I opened a new one.

  • 13

    Project page preview and GitHub link not visible in all browser window sizes

    image

    No preview link or GitHub link visible when expanding or full screen my browser window size. It becomes visible again when I shrink the browser window size.

    image

  • 14

    Dark and Light Mode Toggling

    For me, When I tried toggling the dark mode in one page, the effect is not visible in the other pages/tabs. It is working weirdly. Sometimes the title bar is staying black even after toggling the switch. Please refer to the video attached.

    https://user-images.githubusercontent.com/56507553/197467946-b06a20c0-8976-4c57-9592-d55bfedf4707.mp4

  • 15

    University logos do not appear in education page

    The doc gives the instructions:

    To change the formal education details : Add your institute images to assets -> images -> education-page folder

    I added an image "TU.png" to 'assets -> images -> education-page folder' and updated education.html:

    `

      <div class="timeline-img"></div>
    
      <div class="timeline-content timeline-card js--fadeInRight">
        <div>
            <div class="timeline-img-header" style="background-image: url('assets/images/education-page/TU.png'); background-repeat: no-repeat; background-size: auto; background-position: center top"></div>
        </div>
        <div class="date date2">2017-2020</div>
        <div class="alignment">
            <h3 class="timelineHeading2">Technische UniversitΓ€t Berlin</h3>
            <h6>Master of Science, Physics</h6>
            <li>Nonlinear dynamics and control</li>
            <li>Master's thesis on simulation of epileptic seizures</li>
        </div>
      </div>
    </div>`
    

    However, the logo does not appear on my website: image

    How can I add the logos?

  • 16

    Unavailability of Description and Tags in Project Page?

    Description and Tags are not available for the project-cards in the project page anymore. Please look into it. In the below example the description and tags field is filled but it doesn't show up. On looking into the recent commits to project.js it seems like that has been removed from the function generating cards. Can you bring back the feature? Screenshot 2022-08-02 at 10 20 47 AM