Project Description: Pursuing a Master’s in Interaction and Experience Design from U.L., Ranisha Das’s UX portfolio website certainly demonstrates her skills as an innovative strategist. She’s crafted a well-defined visual language for her site, which is sweet and simple. The website is developed using HTML, CSS and Javascript that resulting in a website made up of shades of turquoise, graphical icons, shapes, and PLENTY of white space. In addition, subtle touches like a dark mode feature, really gives the portfolio an edge. Last but not least, Ranisha has brought all her work experience and project works together by incorporating a striking visual on her site page.
Table of contents:
- Home page: Here, the candidate is on spotlight. You can download resume, navigate to her work links, and see the candidate through a profile picture display.
- About: Here, the candidate’s information and work experience are show-cased.
- Skills: This section is to highlight candidate’s expertise area along with her background qualifications with some hints of life experiences.
- Works: This section displays a total of five project works worked upon by the candidate either individually or as a team.
- Contact Me: A form with basic input fields to connect with the candidate, either for hiring/freelance purposes or to share feedback/critique the project works displayed in (4).
List of References Used for development of Personal Portfolio:
- Contact Form saved in google sheets, code sourced from https://github.com/jamiewilson/form-to-google-sheets
- Contact form saved in g-drive, link here: https://docs.google.com/spreadsheets/d/17MPkJRg3bfvUsKX_vuGwrDZi5sl7awg6cYori9CpknU/edit#gid=0
- Form deployed using Google Apps Script, link here: https://script.google.com/u/0/home/projects/19y-NaYAzV9Pa-oaytNaKtyXZKubgBXU7vFXo4d5Q6AnY88UEejspH-RR/edit
- Google Apps Script Details: deployment ID: AKfycbz4IcA-cynbg7VvkPY4AXx5S3z2k5K3fC9msHhO0dwaprNOEf8iDL4gLzvBtxnaKvRv
- Stack overflow references used for debugging: • https://stackoverflow.com/questions/50796220/error-invalid-css-after-body-expected-selector-or-at-rule-was-on-line
- Learning New IDE shortcuts from https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
- Understanding CSS grid-template-columns property from https://css-tricks.com/almanac/properties/g/grid-template-columns/
- Photography Portfolio displayed using Carousel, learning source from https://newtodesign.com/pure-css-carousels/
- Icons sourced from https://boxicons.com/?query=twi
- Existing portfolio that was used for sourcing content for new portfolio, https://ranishadas-portfolio.my.canva.site/
- Tutorial: Dark mode inspiration from https://www.youtube.com/watch?v=xV7S8BhIeBo
- Tutorial: download CV and contact form learning from https://www.youtube.com/watch?v=0YFrGy_mzjY
- Tutorial: Quick revision of html tags, classes, CSS properties from https://www.youtube.com/watch?v=27JtRAI3QO8
- Physical Computing Project Video compressed from 135MB to 42MB using https://www.freeconvert.com/video-compressor/download
- Git Learnings: • https://stackoverflow.com/questions/927358/how-do-i-undo-the-most-recent-local-commits-in-git • https://www.edgoad.com/2021/02/using-personal-access-tokens-with-git-and-github.html • https://docs.github.com/en/developers/overview/managing-deploy-keys • https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account • https://careerkarma.com/blog/git-fatal-remote-origin-already-exists/#:~:text=The%20Git%20fatal%3A%20remote%20origin%20already%20exists%20error%20is%20caused,git%20remote%20set%2Durl%20command • https://www.edgoad.com/2021/02/using-personal-access-tokens-with-git-and-github.html • https://www.geeksforgeeks.org/how-to-set-git-username-and-password-in-gitbash/ • https://www.youtube.com/watch?v=3Tn58KQvWtU • https://stackoverflow.com/questions/18565876/cannot-access-remote-git-repository/31010578#31010578 •
- Tutorial, CSS property: https://www.w3schools.com/cssref/css3_pr_transform.php