Help Finding Images for Personal Portfolio

Hi all. I’m working on the personal portfolio project, and I was wondering if someone would be willing to help me find images for the project tiles. The projects I’m including are the tribute page, survey form, product landing page, and technical documentation page. I could look for images myself but they can be hard to find as a blind person. I know small screenshots of the projects can be used, but I wouldn’t know how to get them to the right size. Can anyone either help me take small screenshots if I send you links to the projects, or help me find images for each tile? I was thinking maybe a picture of a statue of Helen Keller would work for the tribute page since that’s who my tribute is to, a picture of a paper form could work for the survey form, and a picture of a computer or something like that would work for the technical documentation page. I honestly have no idea about the product landing page. Thanks.

Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
or
https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)

  • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
1 Like

I don’t use CodePen because of accessibility issues. I use an alternative called CodeSandbox. You can find it at https://www.codesandbox.io

I’m sure if you link to the projects we can help you get the project screenshots.


Not sure how hard this is would be for you but you are able to use the last part of the Sandbox URL and plug it into this URL https://codesandbox.io/api/v1/sandboxes/replace-with-sandbox-url-end-part/screenshot.png

As an example, with this sandbox URL

https://codesandbox.io/s/lottie-demo-1fepp

It would become this image URL

https://codesandbox.io/api/v1/sandboxes/1fepp/screenshot.png

1 Like

I think I can manage that, but the URLs for the projects are:
Technical Documentation Page: Technical Documentation Page - CodeSandbox
Product Landing Page: Product Landing Page - CodeSandbox
Survey Form: Survey Form - CodeSandbox
Tribute Page: Tribute Page - CodeSandbox

Hi @Living4God1991 !

I was able to create screenshots for all of your projects.
I was also able to temporarily remove the test suite for 3 out of the 4 projects since the test suite blocks a lot of the screenshot.

Tribute page
Survey Form
Product landing page
Technical Document page

Happy coding !

2 Likes

Hi. Thanks for your help. I didn’t even think about this. It’s just one line of code to add the test suite. I could temporarily remove it or fork the sandbox and remove it from the fork if it’s still blocking part of the screenshot for one of the projects.

1 Like

It was only for the tribute page where I couldn’t fork the project.
But all of the other ones have the test suite removed.

I forked the project and removed the test suite. Would you mind doing another screenshot of that one for me? Here’s a link to the fork: Tribute Page (forked) - CodeSandbox

Here is the new tribute page one.
tribute page

1 Like

Thanks so much for your help. I can do my project now. You’ll probably see another topic from me later asking for help with the CSS though. I have a hard time with that part since it’s so visual.

1 Like

Glad to help.

You might also consider reaching out to Florian Beijers.
He is a professional developer who is also blind.
He might have some tips on how he works with css.

1 Like

@jwilkins.oboe I talked to Florian like you suggested and he was able to give me some tips. After I said I preferred coding locally like he does, he suggested the move to GitHub Pages. I exported my projects from CodeSandbox and now have all of them there. I had to learn a lot about GitHub before I could do this but so far it seems worth it. Now I’ll be going back to coding my portfolio. I’ll use the screenshots from CodeSandbox since they should show the same thing as the GitHub Pages site and since they’ve already been created.

Actually, after using my screen reader’s OCR functions on one of the screenshots, I think the new project sites might look somewhat different since it’ll just show the webpage and none of the CodeSandbox interface. If I create copies of each site that don’t have the test suite, would someone be willing to help me get screenshots again?

If you share the urls for the new projects we can make screenshots for you.

I tried to fork the projects so I could remove the test suite but it wouldn't let me. I'll share the repo links and the links to the sites themselves and maybe you can fork them and remove the code or something.

Here are the new screenshots.

FCC Tribute Page

FCC Survey Page

FCC Product Landing Page

FCC Technical Page

Have fun with the portfolio project! :grinning:

1 Like