Help on portfolio

HTML-CSS
1

Please does anyone know how i can make my technical documentation project appear in form of image like i did for my tribute page so when i click or hover on the image, it takes me directly to the project link…Here’s what i’m talking about below…

IMG_6905
IMG_69051920×2560 432 KB

2

I’m stucked & i need help on this please anyone??

3

I need Help on portfolio

4

Hello.
It’s kinda hard to help you without code and only with screenshot. Do you have opportunity to provide some more info?

5

Yes I can share my code but I just thought I already explained what I need help on

6

Well, I agree.
However, maybe it’s just me, but
I have no idea what can be fixed if I don’t have code which needs to be fixed.

7

Sure i agree with you 100

8

What I’m trying to fix is that, I want to have my other projects in my portfolio like I have for my tribute page in form of image so that when i click or hover on it, it will automatically take me to my project page…Here’s my code in html structure below & link to codepen

<!DOCTYPE html>
<html>
<nav id="navbar" class="nav-link">
  <ul class="nav-link">
    <li>
      <a href="#welcome_section">About</a>
    </li>
    <li>
      <a href="#projects">Work</a>
    </li>
    <li>
      <a href="#contact">contacts</a>
    </li>
  </ul>
</nav>

<!-- END NAV -->

<!-- START WELCOME SECTION -->

<section id="welcome-section" class="welcome-section">
  <div class="selfwriting-text">
    <h1>Hello, I'm Abraham</h1>
    <p>I’m a relentless optimist freelance web developer...This site is my personal blog where I like to post unique information, practical suggestions and honest viewpoints on front-end web development.I currently live in Lagos, Nigeria & I’ve been involved in the web development industry in various forms since year 2020. Although, I did technically begin my career with some formal web design training online, most of what I now know is self-taught development through reading, blogging & learning from those I’ve worked with.
      Although I am usually extremely busy, I do consider serious offers for freelance projects and you can use the contact form to ask for a quote or make an inquiry about my services.</p>
  </div>
</section>

<!-- END WELCOME SECTION -->

<!-- START PROJECTS SECTION -->

<section id="projects" class="projects-section">
  <h2 class-"projects-section-header">These are some of my projects</h2>

  <div class="projects-grid">
    <a href="https://codepen.io/Hechter-/pen/xxYGZxL" target="_blank" class="project-tile">
      <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="project" style="max-width:40%" />
      <p class="project-title">

        Tribute Page

      </p>
    </a>

    <a href="https://codepen.io/Hechter-/pen/vYdPpGq" target="_blank" class="project-tile">
      <img class="project-image" src="https://images.pexels.com/photos/206064/pexels-photo-206064.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="project" style="max-width:40%" />
      <p class="project-title">

        Dropp's Survey Form

      </p>
    </a>

    <a href="https://codepen.io/Hechter-/pen/vYRGVaG" target="_blank" class="project-tile">
      <img class="project-image" src="" alt="project" style="max-width:40%" />
      <p class="project-title">

        Technical Documentation Page

      </p>
    </a>

    <a href="https://codepen.io/Hechter-/pen/ExEvYNq" target="_blank" class="project-tile">
      <img class="project-image" src="" alt="project" style="max-width:40%" />
      <p class="project-title">

        Product Landing Page

      </p>
    </a>
  </div>

  <a href="https://codepen.io/your-work" class="btn-show-all" target="_blank">Show all</a>
</section>

<section id="contacts" class="contacts-section">
  <h2 class="contacts-header">You can find me</h2>
  <div class="contacts-container">
9

Some of images have empty src attribute
this link - I went there with chrome, it gives me 404 error

https://images.pexels.com/photos/206064/pexels-photo-206064.jpeg?auto=compress&cs=tinysrgb&w=1600

I am not sure if it will be enough, but try to add relevant sources for images for the start

10

Yes I know I didn’t specify the src for it because I don’t have an img element in my other projects & I want to have that particular project in my portfolio

11

tbh, I didn’t play around images, icons and stuff like that too much, so you may wanna wait help from someone else for the better advice. Now, when you have actual code in this thread, there is good chance that folks will provide cool advice.

12

Okay thank you I appreciate

13

So you want like a mini screenshot of your individual projects? Well, if you already know how to take a screenshot, save it in PNG maybe for a smaller file size, then upload it to a cloud service (I used Cloudinary (there are others) which also resizes it as it’s delivered to your portfolio page). The img src links point to the cloudinary location. You already did the anchor tag with hrefs, so that’s that.

Unfortunately, I have not yet uploaded my own portfolio page. I want to beautify it further.

14

You mean I should take a screenshot using my phone ?

15

No on your PC. Using some image editing program or something. I use XNView. Go to your projects on a browser, make it full screen then grab a screenshot using an app (like XNView.)

16

So I gotta download an app called XN view

Please how do I use it ?

17

You might not need to do that.

If your projects are on codepen, then you can get screenshots directly from codepen.

1 Like
18

Yes it’s on code pen & please how do I take a screenshot from codepen I have never done that!!!

19

Codepen automatically generates screenshots for your pens.

Just click on the link I gave you to find out how to access them.

20

I already clicked on it and when I saved my code just now I don’t know where the generated screenshot is saved ?