Personal Portfolio - breathing

Hello everyone!

I’ve finished the personal portfolio page project. I tried to use different CSS tricks in this project and learned a lot from it. I particularly like the ::before and ::after pseudo-elements now. There are some animations and hover stuff on this page that may not be suitable for mobile devices but I tried to make it as responsive as I could.

I would appreciate your comments and suggestions.

https://codepen.io/Pendar-/full/BaLjWmN

6 Likes

Hi @Pejman!

I think your portfolio looks good.

You do have some errors in your code. Please run your code through the html and css analyzers to find those errors.

As for the animations, I think they look cool but as you mentioned it is not it is not obvious that I need to hover my mouse over to see the content. Especially for the phone.

Also remember to keep the test script on the page for submission.

2 Likes

@Pejman Nice CSS effects on your page.
You have an error on your page.


I do not know why that error message popped up. I refreshed the page and it was okay.

I think the project images should be showing. I have to hover the mouse over the rectangles to see the images.

2 Likes

Hey @jwilkins.oboe.

Thank you for your time. I fixed those errors and added the test script. changed the navbar behavior since it couldn’t pass the test script.

I think I knew the animations could cause some problems, I wanted to try them anyway :wink:

Something weird happens in codepen. When I hit the save button it duplicates the pen!

1 Like

Thank you @brandon_wallace

I don’t know what’s happening with codepen.org. It seems that the website is buggy right now.

About the image, you’re right. I didn’t want the portfolio section to be messy. But maybe I have to find another way to make it both minimal and more obvious that you have to hover on them. :slight_smile:

1 Like

I get the idea of having placeholders that are then filled with the content (on some event), it’s a neat idea.

But I would suggest triggering the animations on scroll, not on hover, at least for the about me section. For the project section, you might do a staggering reveal (on scroll) and still have some hover effect as well.

If you need a little help with triggering the transitions/animations on scroll there are libraries like AOS.

2 Likes

Great ideas @lasjorg :).

About the about me section, my initial idea was to make something like an envelope that you click or hover on, and then it expands.

About the project section, the images for different projects have different colors that don’t go well together!. So I was looking for a way to hide the images!. Maybe I could use some color overlay or something.

Your ideas and the link you’ve sent are great, and I think some JavaScript is needed, right? I’ll come back to this project later :wink:

Thank you again.

1 Like

Hi @Pejman

There are some really cool touches in this page and I liked the layout, animations are something I need to spend more time on.

One comment from me was the text box about yourself. In order to see it I had to hover the mouse over a dotted line, on my screen at least this was a 2D object and the contrast wasn’t great so it might not be easy for some people to find this.

Regards,
Craig.

2 Likes

Hi @craig.lunney

Thank you for your encouraging comment ;). I spent a good amount of time on some details of this project ;). You probably already know, but there are some really cool tutorials on YouTube.

I like this thing about getting feedback. Now, I know that the hover thing in the about me section isn’t obvious. I will definitely change it but the codepen behaves strangely right now!

Thank you again :heart:

2 Likes

@Pejman Getting feedback from other developers and non-developers is important because they will see your project through their eyes. People have their own perspective on how things could be improved. I always post my projects and ended up making a bunch of improvements thanks to the comments of others.

1 Like

Hi, I like your portfolio allot. I’m a very beginner in coding( i just finished my tribute page, and that is all). So I was wandering, how long did you study to get at this point, how many weeks-months-years? Thank you

1 Like

@brandon_wallace. You’re absolutely right and I’m thankful for this opportunity that FCC gives us. :slightly_smiling_face:

Hey @tina.timofte94 I’m happy that you liked my page. I’m not that professional but maybe I can give you a hint.

I have some experience in programming. Mostly for university projects (and no it’s not directly related to computer science, I studied mechanical engineering :smiley:), and maybe two or three online courses (python, c, c++). But I’m not sure if you can consider HTML or CSS programming languages so you don’t need past experiences in coding to be good at them.

According to codepen, I did my first project (tribute page) about 2.5 months ago and consider that I tend to spend too much time doing things :smiley:. However, I recommend that along with FCC tutorials look for other free tutorials that are available on YouTube or other websites. (I think I watched almost all of Kevin Powell’s videos on youtube.)

Note that you can do a lot with just HTML/CSS and as far as I know. A solid understanding of HTML/CSS will massively help you in learning future stuff like frameworks etc. so take your time. :slightly_smiling_face:

Have fun!

Very Nice and beautiful project.
Do you know JavaScript before?
How long did you stick with css and HTML

1 Like

Hey @abdulrahman.mhd.anas

Thank you :heart:. No I didn’t know JavaScript, I’m learning know :). There’re a couple of lines of JS in this but it’s not that important. I started CSS/HTML maybe about 3 months ago :).

Have fun.

It’s a really cool and original take on the project. It’s responsivene enough I guess just remember mobile users can’t hover so get rid of the on-hover animations for mobile and just display the content upfront. Nice Lotr landing page!

1 Like

Hello @ashraf-othman and welcome to our community.
Yes ask for help!
If I can help you I will :smiley:

1 Like

sometimes i need help because i weak in english “thanks” abdo

1 Like

All those animations! HOW COOL IS THAT!!! :smiley: :star_struck: :open_mouth:

1 Like

Could I know some of those? These animations you’ve got are super cool.

1 Like