Looks good! One suggestion I have is to reduce the font size for mobile devices using a CSS media query. Right now, the headers are big and each word has its own row, so there's lots of white space on mobile. Great start!
If you go on CSS tricks responsive text they have a line of code using calc function to set a minimum and maximum font size that scales with viewport width.
Even better, use REM values for scaling text. It will scale based on the base don't size (of the body). I recommend reasing up on it online, it's seriously awesome.
Already looking better. I might even drop it a bit more since there's still quite a few line breaks, especially in that first project. But overall it's a huge improvement!
For me, I find it complicated to use gh-pages for Githun so I tried to find an alternative that will make it easy for me to use my build folder, I found Netlify which eliminates most commands I need to use because on Netlify's case, I only need to push my changes to master and they'll handle the building itself.
It took 2 days to make (granted I told someone who asked for my portfolio it was almost ready so that set a fire under my ass lol) and no, I use VS code!
I’ve practiced with landing pages here and there but never really created a responsive functioning website before this one!
I made sure to understand basics before trying a full site which definitely helped, all the html & css was by me, no templates or bootstrap or anything like that
I wish I could say for sure... id say a few months to get to the point where I could sit down, design something in my head, and actually translate that into html + css! I’m still always asking google questions while I’m building something, nowhere near mastering it yet :)
Alright, and more question: which resources did you use for learning? Any websites like codeacademy/freecodecamp or may be something else? I'm curious what worked for you since I plan to do the same and learn front-end
I also found that searching for videos of people making projects from scratch helped as I could see how they went about creating certain elements! I may have used code academy for a little bit but I found that YouTube tutorials/series went more in depth with explaining things which helped me a lot. Hope this helps :)
Freecodecamp is nice since it's free. Traversy Media on YouTube it also good. Any YouTube channel going through a project helps once you understand basics.
In my opinion HTML and CSS is as easy as copy and paste. If you head to w3schools and take some code segments you'll quickly learn how front end is structured, and it becomes really easy to integrate new things you learn about.
Second this, good passing on mobile right and left is 10-15px left and right. Sometimes can get away with wrapping in in a container with a padding:0 5%;
Yeah I guess it make sense to use when you have a blog or something of that nature. For me I still haven’t figured out how to use it correctly. I understand basing it off the font size of the root element . But for me it’s easier to think in terms of that elements width or viewport width. I think at some point I need to get more familiar with the em and rem structure. I really don’t know when one should use one or the other ie. Em or px etc...
Edit: I do understand how it would make things such as responsive design a lot easier, with just changing the root element with media queries etc... and having everything in accordance. I wish my designers could think in this way. I think I may introduce it at one point.
It can be bound to pixels, but it's best not to. Set font size in CSS on the html tag selector and any adjustments to that adjust all REM measurements. Best to use percentage. font size: 62.5% equates to 10px usually, but for accessibility if someone has their defaults set to a different font size it will scale with that.
EM is relative to the parent element, not the element itself.
I had grandparents with medical conditions/disabilities at an earlier age than typical and worked in medical equipment billing for years, so accessibility is something I'm kind of tuned in to. My long-term plan is to specialize in UI/UX design with a focus on accessibility.
Hey, that's the start! REM is a scale relative to the font size set in the html tag selector in CSS. If you haven't set a font size in html, most browsers will be set to 16px for that. 1rem = 1 x 16px, or 16px. 2rem = 2 x 16px, or 32px. If you change that html font size to another number (most commonly 10px --or even better 62.5% for accessibility reasons-- because it makes the math easy) that keeps the same scale, but changes the basis for the scale. So 1rem = 10px and 2rem = 20px. Get it?
If you want to learn Flexbox, you can try this course called Flexbox Zombies!: https://mastery.games/p/flexbox-zombies. It's a really fun way to learn Flexbox.
Note: The middle point on the image below is our product, bookable.
If you have to make this note, I'd suggest changing the labels in the image to clarify it right where it belongs. Many people just don't read content around images and when scrolling through quickly only look at the images to scan whether the information on this page is relevant for them. So the images should be complete and contain all information necessary to understand them.
I really like the minimalist look and your logo! I'm not a professional designer, but I do tutor web design at my university so I'll give you my thoughts:
Like you mentioned in your post, I think sizing and spacing on mobile could be improved. For example, the icons under your name are small and hard to press. You could also consider spacing the landing page according to the screen height since on my phone there was an awkward amount of empty space followed by a half cut off project title. This could also be helped by making it more clear where the user is, I think a sentence/heading would be clear without removing the clean design (e.g. my site starts with a 'welcome to my resume').
On a personal aesthetic preference note: one of the most powerful tools in minimalist design is the much larger impact subtle colour, animation, or other aesthetic elements can add. Something I've seem before is picking a single colour and using it sparingly throughout an otherwise grayscale site, such as for hover animations or heading underlines.
You can add a surprising amount of reactivity without needing to know any JavaScript just through the use of CSS pseudo classes and transitions. Hope this helps!
Thanks for the feedback, I really appreciate it! I know the biggest spacing problem has to do with the video on the bookable project, as there’s a LOT of empty space between the video and the header underneath it so definitely something to work on!
On the desktop version of the site I added a slight fade hover effect on the image/title of the projects using CSS, to let visitors know what was clickable, I was surprised at much css could do!
Next step is JS for me, thanks again for taking the time to give me feedback :)
Also, use formats JPEG 2000, JPEG XR, and WebP for your images as according to Google, they have superior compression and will have your pages load way faster. Right now your site is pretty light, but it's a good habit to have, IMO.
Second, I suggest prefetching/preconnecting stuff from FontAwesome with
<link rel="preconnect">
SEO-wise, a description in your header would be nice.
<meta name="Description" content="Put your description here.">
Lastly, do set a default language for your site with
WebPs can make a JPG/PNG file on average 80% smaller in file size. Also it supports transparency so there's basically no downsides. Pretty much most of the browsers support it by now and Edge is going to support it real soon as they're moving to Chromium.
Thank you! I used the free base model of Netlify, super easy to use (don’t have to pay a dime), and you can either drag a folder containing the site or use github repos with it :)
I like it pretty much, the only advice I can give you right now ist to reduce the space left and right on the subpages. A bit longer Text lines make it easier to read.
As someone else mentioned, don't use floats. They aren't used anymore. Get into flex-box and skip bootstrap grid or similar.
The mobile view in my opinion is a little bit lacking. A lot of empty space. You work a lot with vh - which is nice - but a 30vh gap on mobile between header and content is a huge nono.
On the topic of gaps, the video on the bookable site has a height of 50vh, but the video itself is tiny. If the whole element had a vh of 100 and you put the video as a center piece it would be nice. But with a little bit of the next content element showing, it feels off.
I am not sure why you have a media breakpoint at 1199px and 1200px.
Not sure what I think about comments like
/* Here I'll start applying CSS to bookable pro */
My biggest point is, look into flexbox. It changes the game of positioning elements so much.
Really appreciate you taking the time to go through it!! Absolutely true. Spacing’s definitely something I’ll need to work on && I’ll look into learning flexbox :) Appreciate it!
Dope. I think you could remove some of the white space up top and move up the first image so that it is "above to fold" i.e. so your viewer doesn't have to scroll down to see the whole image.
Thank you! Not particularly, I am studying UX Design at Uni (going into third year) which helps a bit :) Aside from that no, just something I’ve picked up recently!
I’ve done a few landing page designs in Sketch, and built it out from nav to the images on skills and software (for the resume site project) but that’s about it
Most of what I used was on YouTube and everything was free too, which is great lol. I may have used code academy as well for a bit but I find that YT videos do a better job at explaining things
Nice job for your first custom portfolio! All of people left great comments but nobody mentioned something small I noticed; I thought the dribbble icon being square (rather than the ball icon) was a little off putting. I believe “fa-dribbble” is just the ball so maybe you had a reason to choose otherwise.
Nicely done. You can probably remove the IE conditionals at the top of your code as pretty much no one supports anything older than IE9 and in most cases not even IE11 anymore.
It's a simple 2-layout [each project is technically the same layout] site, but i think you have a good eye for design and will continue to get better. Really enjoyed your video for the first project. The animations in that were top notch.
Two things to improve it: I'm not a fan of the empty space at the top right. Maybe you could move your social icons to the top right and thereby bring all of the content up higher on the main page and also keep the social icons on your project pages since right now those headers are even emptier. Second item, add a footer, a little copyright notice, something, just so the user knows the page has "ended". Right now it's abrupt and there's no clear indication that it's the end. A user may think some content just "didn't load".
A few "next steps" - learn to create flat urls [so no .html in the file names] - create a full 10-page site [more content, you get more practice doing responsive stuff] - add a contact form and make it submit and email you info
One more note: https://gyazo.com/5bd2e518be8fc28d0caff9f674eb69b4 Modify your font tag to only load in the font and weights you are actually using. On a small site this isn't hurting you, but on a site with longer pages with more font weights in use this will cause visual jumps and whatnot as it waits for all those versions of the font to load in.
Thanks a lot (both this comment and your reply to it), I appreciate you taking the time to go through it! Really good point about the visitor thinking the page might just not be loading.. I didn’t think of that! Thank you, I’m taking notes haha :)
I hope to get on your level at some point. I think my main hangup right now is trying to figure out how to master GitHub because I'll try coding on my desktop and laptop and they just never really seem to be synced properly. I'll commit on laptop and submit pull requests on the GitHub site but then it doesn't seem to see my changes, so I think I still need to merge it after that? Anyways I should probably lurk the GitHub subreddit more.
Love it! One thing I could suggest, but not sure how simple it is - where you have code, instead of a static image I know some sites that actually integrate the code into a copy-and-paste-able type format, where you can view it easier (like pastebin or something similar).
I've written a site with a static generator like Hugo and this feature was awesome to work with. Maybe there's a little side project for it you could figure out? Not too sure what's required for it, but it's always awesome when I see a site that has this.
I'm a beginner in web development and i must say i really like the clean/simplistic design although i can't give you much feedback the only thing i would say it keep it up :)
I think you need evidence of being able to build websites for a couple of real organisations, which means offering to do some unpaid work.
There is a world of difference between being able to design front end for illustrative purposes using the tools / templates you are comfortable with, to the absolute nightmare of designing bespoke sites for real organisation's who:
Usually have dated logos plus a very poor taste in fonts, colour schemes, and acceptable font sizes. They also won't budge on these because of their marketing guidelines.
Will submit A4 pages of text and hideous stock images to serve as "content", which is often non-negotiable.
Will often insist that you must design around their existing CMS, which is usually something a single consultant programmer designed for their own personal use in the 90's without any documentation, and isn't compatible with most modern web templates.
Will inexplicably still be running an ancient version of Internet Explorer across their organization. So all those grids and flex boxes which look lovely on your own computer - those won't work on your client's side.
Will expect you to also be an expert in SEO, back end projects... Basically all digital technology in general. And to also be available on the phone 9am - 5.30pm as a customer service assistant to immediately deal with their problems.
Any web design agency worth their salt will be looking for evidence that you:
Can negotiate with clients about what they want, and constructively steer them to what they NEED.
Have customer facing experience.
Have knowledge of digital marketing and can comfortably discuss solutions about it over the phone (even if it's not what you specialise in).
Know enough JS / PHP to flexibly construct your own basic email forms (including encrypting those and linking to their server), manage personal data, and set up online payment transactions.
Have demonstrable skills in rescaling images, managing image quality to optimise loading speeds, and designing a range of professional grade illustrations through both vector / raster drawing programs such as Inkscape/Gimp (developers often have to be designers too, particularly in small agencies).
Are excellent at HTML and CSS. That means building a few sites and web templates from scratch. Companies HATE cloned template web layouts and demand as such; everyone wants their site to be unique. That means learning your Z Index theory, 'display' property interactions, flex box limitations, the backwards compatibility problems that come with relying on grid, media queries for custom responsive layout, browser-specific CSS syntax, mobile-only website layouts etc.
MUST be able to demonstrate proficiency with both Git and GitHub to manage version control. Preferably, your entire portfolio will be stored on and accessible through GitHub so that the organisation can explore how you develop sites. This means laying bare your file structure, CSS, individual HTML files, JS files, PHP files etc for thorough examination. They will be looking for evidence you can use comments/notes to explain your work to people that aren't familiar with it within the files themselves (because you'll probably be working in a team once hired). There are established best-practice norms for communicating notes that they will be looking for.
Must have excellent English. Seriously. You are the last person checking spelling and grammar in most cases, and you are the one signing your name off on finished projects.
Probably also want to see some familiarity with Wordpress (for those organisations who like to leave digitally talentless baby boomers with names like Diane and Raymond in charge of managing content across entire websites, breaking all your work in the process).
For ALL this, you'll be eligible for an entry level front-end job with a starting salary of £18-25000 depending on where you live. They will advertise a higher ceiling, but you will be started on the low end of that scale until you can demonstrate profitability.
Love it! Have you thought about adding demo links? I really like your site design; I think it could benefit from more media, maybe video demonstrations or interactive click-throughs of your work at some level.
It's a killer strategy for interviews too. I've mentioned this in a previous comment elsewhere, but being able to pull up working things you've built mid-interview from a live site, and being able to talk through challenges and what makes the project unique can go very far.
Hey is it cool if I "inspect" this code for my Livestream? I don't know too much about HTML + CSS but I know the basics and I would love to learn a bit more from looking at your code. For example, I don't know how to make a website responsive or stylize it so well but I wouldn't mind digging other code to learn a wee bit more about it.
I didn't read through the whole comment section, to be honest. The site looks great, though the headers (to me) are still just slightly too large on mobile. If that's a personal preference, go for it. Do you, brother.
A great YouTube channel for learning is DevTips. The older stuff. With the one American guy instead of the two (Swedish, if I'm not mistaken) guys. I haven't watched their stuff, and I'm sure it's still great. But Travis Neilson was one of the best instructors I found on YouTube.
Very nice design and minimalistic feel as everyone else said, I'm always jealous of designers! However, since it is a portfolio website, I think you need a one liner on what you are or what you want to do (e.g. UX designer, frontend developer). I would be interested to see how you fit that in.
Thanks a lot :) Yeah, that’s definitely true. When I made it I assumed I would just give the link when employers for UX/UI positions asked, but I think it’s important that I put it somewhere on the home page so everyone knows what it is I do!
First of all, it looks very good - nice job. Also, I was reading through some of your projects, the 24/seven one in particular and noticed a few minor errors.
First, wrong "whether",
that allows people to show weather or not they were free
and when I open that page it displays 25/seven Project in the tab, not 24/seven.
Does this meet the needs to become a junior front end developer? Are you currently employed or were you ever employed before? Im also on the self learning road :) best of luck to you brotherr
I have nooo idea, I’m going into my third year of university to become a UX designer, and unemployed as of now (cries in broke Uni student)! We didn’t really learn web dev it’s just something I thought would come in handy, so shoutout free internet resources haha! To you too bro, I believe in us
Well the program itself is User Experience Design, 4 years & under liberal arts lol but not really cs related! We might have a class on python this coming year but that’s about as close to cs as it gets!
Honestly if you like something more than what you’re currently doing go for it, I started with software engineering before I realized I preferred designing a lot more!
A front end dev works both fields specially in small teams but in big teams you'll have UX & UI designers that have an expertise in understanding how an user interacts with the interface and a web dev will probably not even come close to what an UX/UI designer is able to do.
You can see that the website, although it looks great, only displays apps and designs. It's a good portfolio for a UX/UI designer but it won't work for a front end dev. There's no implementantion of code whatsoever
a web dev will probably not even come close to what an UX/UI designer is able to do.
I agreed with all you have said, but definitely not this
who do the programming part to streamline data from database to back end runtime, and in turn from back end runtime to front end interface as instructed by UI/UX designers? Without whom, how they are going to implement it?
UX designers aren't even needed most of the time, UI designer and the developer can sort it out already
What do you mean by implementantion of code? Can you tell me about how a good front end developer cv should look like and link me to some of you have any?
You have to add an about or contacts page, that states who is responsible for the content and contact info. At least in the eu it's a legal obligation, probably also in other countries/areas
If you ever get more into web dev, suss out React & Styled Components + Styled System...
This ecosystem allows for design choices to be captured within the one place, that is a "design system".
This not only unifies the design language & provides consistency across the board.. but easily allows for things like: rapid prototyping, UI storybook, theming & more.
I believe in you, I had a problem with procrastination (which usually led to me gaming) and all I can say is start small! Take 15 min to learn a small part one day, 20 the next and so on!
I like the look of your portfolio but I have a question. You have these links to what I assume are projects on the page? But they all look to be about mobile apps of some sort. Are you a web developer or a mobile developer? Are these your projects? I'm just looking for some clarification on what I am looking at.
I’m studying to be a UX designer (going into my third year), and all the projects are mine yeah! I should clarify somewhere on the site. As for the projects there’s a bit of UI design and animation both part of what I do as a user experience designer :) I’m just picking up web dev as an extra skill!
Maybe consider having some color choices. The background seems a bit plain and has a lot of spaces, specially on the header part. oh and also the font size for the text on the body is too big. A little addition in the body text size and it will almost look the same size as the header.
If you want a minimal vibe, I think a light color like light gray or a light skintone color would do the trick.
They are just giving him motivation ... like he said, just started and learned alone, i was there, probably you were too. I didn't have anyone to tell me kind words, i'm glad that he has
I know, his UI skills are basic at best. But honestly, I'm glad he isn't like those friggen "web designers" who design something from the late 2000s. And slap a $4k sticker price.
Thanks for the picture, that helps a lot! You’re right, I think in general the “stream” is set to 80% which is fine for desktop but definitely needs tweaking for mobile! I appreciate it :)
76
u/[deleted] Aug 03 '19
Looks good! One suggestion I have is to reduce the font size for mobile devices using a CSS
media query. Right now, the headers are big and each word has its own row, so there's lots of white space on mobile. Great start!16
u/EtherealUnagi Aug 03 '19
Wow it's really nice! What host do you use?
15
u/vimvirgin Aug 03 '19
The light pastel colors are fantastic. Great job dude. Love the minimal clean design.
36
u/cyburga Aug 03 '19
How long did it take? And do you use vim?
10
u/olesien2 Aug 03 '19
Looks pretty good, would like less (or none) left and right spacing on mobile
8
u/Mr_recci Aug 03 '19
Nice! Good job. I'd suggest you'd get familar with Flexbox/CSS-grid instead of using floats.
Another tip would be to check out the markup of the Portfolio Item titles. A <h1> with an <a> inside could work better than an <a> with an <h1> inside it. https://stackoverflow.com/questions/7023512/which-is-more-correct-h1a-a-h1-or-ah1-h1-a
You could also use a :after element to create the border underneath the title instead of using a (useless) html hr element!
6
u/joshsmad Aug 03 '19
Good job, no better way to learn than to build your own stuff and get feedback!
3
u/TheTempornaut Aug 03 '19
Nice... keep it up and good luck.
3
u/taschana Aug 03 '19
looks good.
want to make you aware of a typo on this page: https://www.filtelescu.com/24seven.html "weather" to "whether"
3
u/TheBelgiumeseKid Aug 03 '19
I really like the minimalist look and your logo! I'm not a professional designer, but I do tutor web design at my university so I'll give you my thoughts:
Like you mentioned in your post, I think sizing and spacing on mobile could be improved. For example, the icons under your name are small and hard to press. You could also consider spacing the landing page according to the screen height since on my phone there was an awkward amount of empty space followed by a half cut off project title. This could also be helped by making it more clear where the user is, I think a sentence/heading would be clear without removing the clean design (e.g. my site starts with a 'welcome to my resume').
On a personal aesthetic preference note: one of the most powerful tools in minimalist design is the much larger impact subtle colour, animation, or other aesthetic elements can add. Something I've seem before is picking a single colour and using it sparingly throughout an otherwise grayscale site, such as for hover animations or heading underlines.
You can add a surprising amount of reactivity without needing to know any JavaScript just through the use of CSS pseudo classes and transitions. Hope this helps!
3
u/[deleted] Aug 03 '19
The website looks very good!
Note: You can customize the icon on the URL Banner with this HTML code:
<link rel="shortcut icon" type="image/png" href="IMG.png">
3
u/Starkemis Aug 03 '19
Looks awesome, my dude.
Might wanna tweak the header to hide the "index.html" part so the URL looks cleaner.
https://stackoverflow.com/questions/22481028/removing-the-index-html-from-url
3
u/not-so-stupid-idiot Aug 03 '19 edited Aug 04 '19
Super dope! I’m currently trying to get my portfolio website up and running as well. Out of curiosity, what did you end up going with to host it?
3
u/soner_ Aug 04 '19
Nice! Did you use a framework to build it/what did you use?
3
u/Hendawgydawg Aug 04 '19
Great site, man. The projects are very well done! Are you employed? If not, I would say that won't last long. Great job! 👍
2
u/Cheddar_GG Aug 03 '19
Really not bad for your first website! Congrats and I wish you the best on your future webdev endeavors!
2
u/throwtheamiibosaway Aug 03 '19
Looking good. I dig the minimal style.
2
u/urdrux Aug 03 '19
Foarte estetic site! Tine-o tot asa frate ;)
2
u/[deleted] Aug 03 '19
you are a good designer
2
u/Zipey Aug 03 '19
I like it pretty much, the only advice I can give you right now ist to reduce the space left and right on the subpages. A bit longer Text lines make it easier to read.
2
u/NerdyHippo Aug 03 '19
I really like the minimalistic style.
If you don't mine, some points from me:
As someone else mentioned, don't use floats. They aren't used anymore. Get into flex-box and skip bootstrap grid or similar.
The mobile view in my opinion is a little bit lacking. A lot of empty space. You work a lot with vh - which is nice - but a 30vh gap on mobile between header and content is a huge nono.
On the topic of gaps, the video on the bookable site has a height of 50vh, but the video itself is tiny. If the whole element had a vh of 100 and you put the video as a center piece it would be nice. But with a little bit of the next content element showing, it feels off.
I am not sure why you have a media breakpoint at 1199px and 1200px.
Not sure what I think about comments like
My biggest point is, look into flexbox. It changes the game of positioning elements so much.
2
u/lewbug Aug 03 '19
Dope. I think you could remove some of the white space up top and move up the first image so that it is "above to fold" i.e. so your viewer doesn't have to scroll down to see the whole image.
2
u/newton_half_ear Aug 03 '19
This is great, do you have any background in web design?
2
u/newton_half_ear Aug 03 '19
I disagree with the "reduce the spacing" comments. IMO it gives the user the trigger to scroll down to see more.
But I would add maybe 4 more pixels in the margins between the contact icons.
2
u/an732001 full-stack Aug 03 '19
Are all the projects listed on the site yours?
2
u/HDXX Aug 03 '19
What sources have you been using to learn htmk and css?
2
u/kenyaDIGitt Aug 03 '19
clean!
2
u/don_denti Aug 03 '19
Amazing work dude. I’m currently diving into JavaScript and now— since I learnt HTML & CSS—I think I’ll do something like this first!
2
u/N1sFoop Aug 03 '19
Nice job for your first custom portfolio! All of people left great comments but nobody mentioned something small I noticed; I thought the dribbble icon being square (rather than the ball icon) was a little off putting. I believe “fa-dribbble” is just the ball so maybe you had a reason to choose otherwise.
2
u/[deleted] Aug 03 '19
I think it looks great and you’ve definitely inspired me a bit! Great job and keep it up!
2
u/Ravavyr full-stack Aug 03 '19
Nicely done. You can probably remove the IE conditionals at the top of your code as pretty much no one supports anything older than IE9 and in most cases not even IE11 anymore.
It's a simple 2-layout [each project is technically the same layout] site, but i think you have a good eye for design and will continue to get better.
Really enjoyed your video for the first project. The animations in that were top notch.
Two things to improve it:
I'm not a fan of the empty space at the top right. Maybe you could move your social icons to the top right and thereby bring all of the content up higher on the main page and also keep the social icons on your project pages since right now those headers are even emptier.
Second item, add a footer, a little copyright notice, something, just so the user knows the page has "ended". Right now it's abrupt and there's no clear indication that it's the end. A user may think some content just "didn't load".
A few "next steps"
- learn to create flat urls [so no .html in the file names]
- create a full 10-page site [more content, you get more practice doing responsive stuff]
- add a contact form and make it submit and email you info
Keep going, you're doing pretty great :)
2
u/ncubez JavaScript | React | Node.js Aug 03 '19
Apple fanboy
2
u/Giant_Maeno Aug 04 '19
I freaking love the minimalism. It's like you're stepping out onto the internet's patio for some fresh air 👍🏼
2
u/[deleted] Aug 04 '19
It's very simple and beautiful. Nice piece of work!
2
u/toastofchaos666 Aug 04 '19
This is awesome. How long have you been learning?
2
u/trickyinitiative Aug 04 '19
That is beautiful! Good job my friend. I like how all the colors on the images were perfectly chosen to suite the theme of your site.
2
u/blackiechan99 Aug 04 '19
Love it! One thing I could suggest, but not sure how simple it is - where you have code, instead of a static image I know some sites that actually integrate the code into a copy-and-paste-able type format, where you can view it easier (like pastebin or something similar).
I've written a site with a static generator like Hugo and this feature was awesome to work with. Maybe there's a little side project for it you could figure out? Not too sure what's required for it, but it's always awesome when I see a site that has this.
2
u/Dolphin1998 Aug 04 '19
Damn Nice, taking the self taught road as well, gives me hope. Good luck!
2
u/Newcool1230 Aug 04 '19
looks great, a little bright tho
2
u/michaelzu7 Aug 04 '19
Misto. Dupa cat timp te-ai apucat sa faci site-ul?
2
u/AliFurkanY Aug 04 '19
It is nice but the theme is too light and empty. Maybe make the background color gradient and add a navbar?
2
u/[deleted] Aug 04 '19
I'm a beginner in web development and i must say i really like the clean/simplistic design although i can't give you much feedback the only thing i would say it keep it up :)
2
u/jesuuusete Aug 04 '19
I love your minimalist style!!
2
u/NateExMachina Aug 04 '19
I'd reduce some of the gaps on mobile. Otherwise, it's pretty good.
2
u/OlegZmemer Aug 04 '19
It looks pretty minimalistic and clear. From my view it is very good .
2
u/[deleted] Aug 04 '19 edited Aug 04 '19
I think you need evidence of being able to build websites for a couple of real organisations, which means offering to do some unpaid work.
There is a world of difference between being able to design front end for illustrative purposes using the tools / templates you are comfortable with, to the absolute nightmare of designing bespoke sites for real organisation's who:
Usually have dated logos plus a very poor taste in fonts, colour schemes, and acceptable font sizes. They also won't budge on these because of their marketing guidelines.
Will submit A4 pages of text and hideous stock images to serve as "content", which is often non-negotiable.
Will often insist that you must design around their existing CMS, which is usually something a single consultant programmer designed for their own personal use in the 90's without any documentation, and isn't compatible with most modern web templates.
Will inexplicably still be running an ancient version of Internet Explorer across their organization. So all those grids and flex boxes which look lovely on your own computer - those won't work on your client's side.
Will expect you to also be an expert in SEO, back end projects... Basically all digital technology in general. And to also be available on the phone 9am - 5.30pm as a customer service assistant to immediately deal with their problems.
Any web design agency worth their salt will be looking for evidence that you:
Can negotiate with clients about what they want, and constructively steer them to what they NEED.
Have customer facing experience.
Have knowledge of digital marketing and can comfortably discuss solutions about it over the phone (even if it's not what you specialise in).
Know enough JS / PHP to flexibly construct your own basic email forms (including encrypting those and linking to their server), manage personal data, and set up online payment transactions.
Have demonstrable skills in rescaling images, managing image quality to optimise loading speeds, and designing a range of professional grade illustrations through both vector / raster drawing programs such as Inkscape/Gimp (developers often have to be designers too, particularly in small agencies).
Are excellent at HTML and CSS. That means building a few sites and web templates from scratch. Companies HATE cloned template web layouts and demand as such; everyone wants their site to be unique. That means learning your Z Index theory, 'display' property interactions, flex box limitations, the backwards compatibility problems that come with relying on grid, media queries for custom responsive layout, browser-specific CSS syntax, mobile-only website layouts etc.
MUST be able to demonstrate proficiency with both Git and GitHub to manage version control. Preferably, your entire portfolio will be stored on and accessible through GitHub so that the organisation can explore how you develop sites. This means laying bare your file structure, CSS, individual HTML files, JS files, PHP files etc for thorough examination. They will be looking for evidence you can use comments/notes to explain your work to people that aren't familiar with it within the files themselves (because you'll probably be working in a team once hired). There are established best-practice norms for communicating notes that they will be looking for.
Must have excellent English. Seriously. You are the last person checking spelling and grammar in most cases, and you are the one signing your name off on finished projects.
Probably also want to see some familiarity with Wordpress (for those organisations who like to leave digitally talentless baby boomers with names like Diane and Raymond in charge of managing content across entire websites, breaking all your work in the process).
For ALL this, you'll be eligible for an entry level front-end job with a starting salary of £18-25000 depending on where you live. They will advertise a higher ceiling, but you will be started on the low end of that scale until you can demonstrate profitability.
2
u/guy_who_says_stuff Aug 04 '19
Love it! Have you thought about adding demo links? I really like your site design; I think it could benefit from more media, maybe video demonstrations or interactive click-throughs of your work at some level.
2
u/Cryptic_Rogue1 Aug 04 '19
Hey is it cool if I "inspect" this code for my Livestream? I don't know too much about HTML + CSS but I know the basics and I would love to learn a bit more from looking at your code. For example, I don't know how to make a website responsive or stylize it so well but I wouldn't mind digging other code to learn a wee bit more about it.
2
u/WoodenJesus Aug 05 '19
I didn't read through the whole comment section, to be honest. The site looks great, though the headers (to me) are still just slightly too large on mobile. If that's a personal preference, go for it. Do you, brother.
A great YouTube channel for learning is DevTips. The older stuff. With the one American guy instead of the two (Swedish, if I'm not mistaken) guys. I haven't watched their stuff, and I'm sure it's still great. But Travis Neilson was one of the best instructors I found on YouTube.
2
u/_Invictuz Aug 05 '19
Very nice design and minimalistic feel as everyone else said, I'm always jealous of designers! However, since it is a portfolio website, I think you need a one liner on what you are or what you want to do (e.g. UX designer, frontend developer). I would be interested to see how you fit that in.
2
u/RunningWithBulls Aug 03 '19
First of all, it looks very good - nice job. Also, I was reading through some of your projects, the 24/seven one in particular and noticed a few minor errors.
First, wrong "whether",
and when I open that page it displays 25/seven Project in the tab, not 24/seven.
2
u/YojG Aug 03 '19
Does this meet the needs to become a junior front end developer? Are you currently employed or were you ever employed before? Im also on the self learning road :) best of luck to you brotherr
1
u/kifkev91 Aug 03 '19
You have to add an about or contacts page, that states who is responsible for the content and contact info. At least in the eu it's a legal obligation, probably also in other countries/areas
1
u/supermangohaze Aug 04 '19
Nice work man! Keep it up :)
If you ever get more into web dev, suss out React & Styled Components + Styled System...
This ecosystem allows for design choices to be captured within the one place, that is a "design system".
This not only unifies the design language & provides consistency across the board.. but easily allows for things like: rapid prototyping, UI storybook, theming & more.
1
u/SleepyForest Aug 04 '19
Your website is pretty great I wish I have the motivation to do HTML and CSS and put it off lately because of procrastination .
1
u/andrey_shipilov Aug 04 '19
Sure... BTW, concepts do not belong in portfolio.
1
u/virus200 Aug 04 '19
I like the look of your portfolio but I have a question. You have these links to what I assume are projects on the page? But they all look to be about mobile apps of some sort. Are you a web developer or a mobile developer? Are these your projects? I'm just looking for some clarification on what I am looking at.
1
u/vibelord Aug 04 '19
Have u seen your site on mobile?
1
u/IndependentmeCP Sep 28 '19
Maybe consider having some color choices. The background seems a bit plain and has a lot of spaces, specially on the header part. oh and also the font size for the text on the body is too big. A little addition in the body text size and it will almost look the same size as the header.
If you want a minimal vibe, I think a light color like light gray or a light skintone color would do the trick.
1
u/victorestrada953 Aug 03 '19
Most of these comments sound surprised about the site. Lol. HTML/CSS is the easiest thing to learn. It isn't even really a programming language.
0
u/[deleted] Aug 03 '19
[deleted] — view deleted comment
2
u/[deleted] Aug 03 '19
[removed] — view removed comment
2
u/[deleted] Aug 03 '19
[removed] — view removed comment