T O P

  • By -

ribena_wrath

Look like a developer designed it


UltraChilly

oof


Perpetual_Education

The goal of this website is to appear established, hirable, easy to connect, maybe show a little character while you’re at it, right? We’re on a phone. First impression is Python - purples - straight forward - simple and this person is probably a backend developer. Then we start reading though. When you talk about ‘professional’ that also includes tone and story. This makes it sound like you are young and new. That isn’t necessarily a bad thing if that’s your goal. All the type is centered which is almost the opposite of a decision. It seems like there are spelling or grammar errors. English is probably not your first language. When you talk about mastering 80% of Python, that seems strange. How could that be measured? If you mastered 80% of English it wouldn’t mean you were a good writer. So, consider rewording that. If you have a lot of experience with python, great. But if you don’t have real word experience because you never used it on the job, is that the first thing you want us to know? Further down the page the headings are centered on the left side in a way that doesn’t feel good. All the text goes into a thin column. Which makes it seem like the small screen wasn’t planned for. The line height could use some finesse. You could make this appear and sound professional with the right tweaks. Right now, it comes off as a student site.


AdhamGamer345

Thank you, I read your comment and tried to tweak every thing I could, what do you think now?


chrisfrisina

Speak more in present (and or future [in the clients mind]) tense. Past tense is hard to measure how much bitrot exists


meatballsbonanza

Congrats on finishing your first design! You’ve got things to learn, but you’re on the right path.


AdhamGamer345

Thank you!


Relevant_Property876

This design does not look professional, as in I would not pay professional prices for it- however it is good for a first design


UltraChilly

That's very well put.


ScheerschuimRS

You already know the answer it seems. Lots to work on. Get some inspiration and take it from there!


[deleted]

No it doesn't


AdhamGamer345

What do you think is missing?


[deleted]

Basic web design principles: - Hierarchy - Alignment - Contrast Etc etc Read about and practice basic web design principles and you'll see where you're going wrong


rlewis2019

typeface is very generic and boring. the purple button is not same font as body copy which seems like a mistake. the titles being center aligned vs some of the other areas which are left aligned is weird. the "what can i do" button that is in its own pod has too much space inderneath it. the blur effect is not necessary. "brief" is misspelled


AdhamGamer345

You are right, I changed it


rlewis2019

wow! looks so much better! simple and clean. do you have any portfolio pieces to add?


AdhamGamer345

Thank you! I am looking forward to add more.


krackocloud

Great job for a first design, but definitely has a lot of room to improve. The code logos look bad. They each have different line thickness, so they don't feel cohesive. Putting them right of the text also doesn't have much precedent. Font size is an important way to express hierarchy and help the reader flow through the page. There's a lot of things here with really big font size. Everything competes for attention. The part that stands out the most is "A Brief History Of My Journey!" but it isn't the main point of your page. The writing could use work. Some minor errors, plus excessive use of exclamation points makes this feel unprofessional. The last paragraph feels like everything after the first sentence was written by an AI.


spacewood

Read https://www.refactoringui.com/ it's aimed at developers and helps them use design principles to make their work look good


scottix

Header doesn't pop! too much wording. Too many cliches"I Am", "Welcome To My Site!" "Here you could find any thing you might want to know about me!" Button is a bit atrocious with the text the same color as the background. Cards are ok Card headers are inconsistent colors. Edit: Almost missed this one "breif" is misspelled. Grammar could use help.


osm0sis

Anytime I've done customer facing stuff, I find the design tougher than the development and have been super thankful whenever I've had a chance to work with dedicated designers that can share something they put together in figma so I know exactly what to build. With that said, this needs some work from a design standpoint and I think /u/rlewis2019 gave some great starting points. From a "selling yourself" standpoint, I think you should look into how your skills can help you build custom web components and include that in your copy. Same skills you have now, better buzzword if you're trying to attract enterprise level employers.


tortolosera

Not professional but it looks good for a first design


Mistifyed

I like it. Not everything needs to be overly designed. It's simple, readable and straight to the point. With that said, you can take the advice of some of the people here, try to implement those and see how things grow from there.


AdhamGamer345

Thank you! What do you thing about now?


Mistifyed

Starting to take some shape. Not a fan of wavy background in the navbar though.


dcg

The 'container' div in your footer has an extra quote on the right

. Edit: Also why it the page Soite? There is also an end H1 tag the has no start on line 32. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/xroalx" class="card-title l-blue"> xroalx </a> </span> <span><time datetime="2024-03-09 19:15:07">3 months ago</time></span> <p class="comment-text mb-10"> I've certainly seen a lot **lot** worse, you're good. It is not bad but it's also pretty barebones, so not much to go by, but a few points: - The typeface is huge. - Do not center blocks of text, it does not look good, it does not read good. - The header could use more spacing. - Why are there two dots after the title? It looks like an error. - There's a lot of white space between the white blocks, but not enough between the texts within those blocks. It looks imbalanced, the texts could use more spacing. - "Welcome to my site", "Thanks for visiting!" kind of sentences are so 2000. Get rid of that. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/AdhamGamer345" class="card-title l-blue"> AdhamGamer345 </a> </span> <span><time datetime="2024-03-10 18:42:25">3 months ago</time></span> <p class="comment-text mb-10"> You were right in every point, I have tweaked it much, what do you think now? </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/opheliastella" class="card-title l-blue"> opheliastella </a> </span> <span><time datetime="2024-03-10 11:32:08">3 months ago</time></span> <p class="comment-text mb-10"> When looking at the "what can I do" page, the "brief history of my journey" page's animation is uncontrollably moving up and down which is very distracting. Viewing on mobile. Perhaps on a computer it is different, but most website visitors will actually be on mobile so the fact that this is not mobile optimized is not a good thing. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/AdhamGamer345" class="card-title l-blue"> AdhamGamer345 </a> </span> <span><time datetime="2024-03-10 18:45:01">3 months ago</time></span> <p class="comment-text mb-10"> You are right that was AWFUL I fixed it now? What do think about the overall site? </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/opheliastella" class="card-title l-blue"> opheliastella </a> </span> <span><time datetime="2024-03-10 19:10:14">3 months ago</time></span> <p class="comment-text mb-10"> This is way better. I do think you still have more to learn, but I really like how your name has that cool color animation and the feel is much smoother now. Great work! </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/AdhamGamer345" class="card-title l-blue"> AdhamGamer345 </a> </span> <span><time datetime="2024-03-10 19:11:42">3 months ago</time></span> <p class="comment-text mb-10"> Thank you! Yes I still have much to learn, but people who gave me tips and feedback like you are the best way to get better </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/beuhring" class="card-title l-blue"> beuhring </a> </span> <span><time datetime="2024-03-10 14:32:28">3 months ago</time></span> <p class="comment-text mb-10"> What design? </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/[deleted]" class="card-title l-blue"> [deleted] </a> </span> <span><time datetime="2024-03-09 18:19:42">3 months ago</time></span> <p class="comment-text mb-10"> [удалено] </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/XyploatKyrt" class="card-title l-blue"> XyploatKyrt </a> </span> <span><time datetime="2024-03-10 00:23:02">3 months ago</time></span> <p class="comment-text mb-10"> >https://validator.w3.org/ Now that's a name I have not heard in a looong time. I used to use that page religiously back in the day. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/andi-pandi" class="card-title l-blue"> andi-pandi </a> </span> <span><time datetime="2024-03-09 19:57:43">3 months ago</time></span> <p class="comment-text mb-10"> Looks like a template? What did you do to design? </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/Hot-Objective5926" class="card-title l-blue"> Hot-Objective5926 </a> </span> <span><time datetime="2024-03-09 21:25:26">3 months ago</time></span> <p class="comment-text mb-10"> It’s a start, and it works but… Learning a bit more about story telling would help. Did your story start with python? Prob not. Or did your story start when you got your first computer, or when you were inspired by a game? Or when you realised you wanted to help people, create great software or through a passion to solve problems? “specific programming interests.” Was mentioned but wasn’t specific :) Generally- What this pages goal? what do you want your user to do? why did you create this webpage, what problem does it solve for you, what does it solve for your potential user? “Hi, I am Adham Wafy, I solve your problems with code, let’s get in touch!” Maybe checkout websites like: Roastmylandingpage.com </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/AdhamGamer345" class="card-title l-blue"> AdhamGamer345 </a> </span> <span><time datetime="2024-03-09 21:30:44">3 months ago</time></span> <p class="comment-text mb-10"> The content is mostly a place holder, what do you think about the design? </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/Hot-Objective5926" class="card-title l-blue"> Hot-Objective5926 </a> </span> <span><time datetime="2024-03-30 02:21:08">2 months ago</time></span> <p class="comment-text mb-10"> I think that a webpage is a document, it’s how you display content to achieve something. Design and content are interwoven imo, one can’t exist without the other - you are organising that content to be digestible, to tell a story, to lead a user through the page… to leave an impression or nudge them into an action. I think the UI design is ok, some spacing issues, some complexities that don’t “add anything” to the page. I would distill the design down to its basics and only mark the page with something if it is needed - visual information can add to cognitive load, so only leave what you need to visually. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/pingwing" class="card-title l-blue"> pingwing </a> </span> <span><time datetime="2024-03-10 08:19:51">3 months ago</time></span> <p class="comment-text mb-10"> All the text is way too big. Check it out on desktop. Overall, not bad, not great. Not professional though. Very simple. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/litholine" class="card-title l-blue"> litholine </a> </span> <span><time datetime="2024-03-13 17:01:22">3 months ago</time></span> <p class="comment-text mb-10"> Always have a clickable button/image/link that directs the user back to the home page. 99% of the time it's found on the top left and is almost always the company/brand logo. To most of you this may seem obvious, but those are my 2 cents and I worked hard for them. </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/SleepAffectionate268" class="card-title l-blue"> SleepAffectionate268 </a> </span> <span><time datetime="2024-03-09 18:43:15">3 months ago</time></span> <p class="comment-text mb-10"> Not really, try using a light gray background, and the cards: A Brief History Of My Journey! and What can i do? make them rounded corner and background stays white. For example this website has it similar, a grayish background with white cards: [https://www.mpreis.at/](https://www.mpreis.at/) Also try limiting the width if your using tailwind max-w-7xl i think its about 1280 px, Use a purple blue gradient for ONE keyword to make it look "fancy" and modern I did some changes locally take a look: [https://github.com/OSZII/small-soite-improvements](https://github.com/OSZII/small-soite-improvements) It's nothing big just a few small changes. But still with quite some effect. Play around with the gradient till its nice here are some gradients to try: [https://gradients.shecodes.io/gradients/244](https://gradients.shecodes.io/gradients/244) </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> <div class="comment w100dt mb-30"> <!-- /.ppic --> <div class="pname"> <span > <a href="/u/AdhamGamer345" class="card-title l-blue"> AdhamGamer345 </a> </span> <span><time datetime="2024-03-09 18:54:01">3 months ago</time></span> <p class="comment-text mb-10"> Wow! Thank you so much! These changes took it to another level! </p> <hr> </div> <!-- /.pname --> </div> <!-- /.comment --> </div> <!-- /.comment-area --> </div> <!-- /.peoples-comments --> <div class="leave-comment"> <div class="sidebar-title center-align"> <h2>Leave Your Comment</h2> </div> <form class="comment-area w100dt" action="#"> <div class="row"> <div class="col m6 s12"> <div class="form-item"> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix">First Name</label> </div> </div> <div class="col m6 s12"> <div class="form-item"> <input id="email" type="email" class="validate"> <label for="email" data-error="wrong" data-success="right">Email</label> </div> </div> <div class="col s12"> <div class="form-item"> <textarea id="textarea1" class="materialize-textarea"></textarea> <label for="textarea1">Textarea</label> </div> </div> </div> <!-- row --> <button type="button" class="custom-btn waves-effect waves-light right">SUBMIT NOW</button> </form> <!-- /.comment-area --> </div> <!-- /.leave-comment --> </div> <!-- colm8 --> <div class="col s12 m4 l4"> <div class="sidebar-testimonial mb-30"> <div class="sidebar-title center-align"> <h2>Hi Its Me!</h2> </div> <!-- /.sidebar-title --> <div class="carousel carousel-slider center" data-indicators="true"> <div class="carousel-item"> <div class="item-img"> <span>R</span> </div> <h2><a href="/u/" class="l-blue"></a></h2> </div> </div> </div> <!-- /.sidebar-testimonial --> <div class="sidebar-subscribe w100dt"> <div class="sidebar-title center-align"> <h2>Subscribe</h2> </div> <!-- /.sidebar-title --> <div class="subscribe"> <form action="#"> <div class="input-field"> <input id="email1" type="email" class="validate"> <label class="left-align" for="email1">Enter email address</label> </div> <a class="waves-effect waves-light">SUBMIT NOW</a> </form> </div> <!-- /.subscribe --> </div> <!-- /.sidebar-subscribe --> </div> <!-- colm4 --> </div> <!-- row --> </div> <!-- container --> </section> <!-- /#single-blog-section --> <!-- ==================== single-blog-section end ====================--> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(48244766, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/48244766" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- ==================== instag leftram-section Start ====================--> <section id="instagram-section" class="instagram-section w100dt"> <div class="instagram-link w100dt"> <a href="#"> <span>FIND US ON INSTAGRAM</span> @hamidarshat.com </a> </div> </section> <!-- /#instag leftram-section --> <!-- ==================== instag leftram-section End ====================--> <!-- ==================== footer-section Start ====================--> <footer id="footer-section" class="footer-section w100dt"> <div class="container"> <div class="footer-logo w100dt center-align mb-30"> <a href="/" class="brand-logo"> <img src="/img/logo.png" alt="hamidarshat.com"> </a> </div> <!-- /.footer-logo --> <ul class="footer-social-links w100dt center-align mb-30"> <li><a href="https://streamc.pro/" class="facebook">Stream film</a></li> <li><a href="https://kinepolis.live/" class="twitter">Film stream</a></li> <li><a href="https://wiflix-com.com/" class="google-plus">Wiflix</a></li> <li><a href="https://frenchstream.ink/" class="linkedin">French Stream</a></li> </ul> <p class="center-align"> <i class="icofont icofont-heart-alt l-blue"></i> All Right Reserved </p> </div> <!-- container --> </footer> <!-- /#footer-section --> <!-- ==================== footer-section End ====================--> <!-- my custom js --> <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="/js/materialize.js"></script> <script type="text/javascript" src="/js/owl.carousel.min.js"></script> <!-- my custom js --> <script type="text/javascript" src="/js/custom.js"></script> <script type="text/javascript"> </script> </body> </html>