About: I’m a full stack developer who has experience with several front-end tools like Reactjs, Vuejs, and jQuery as well as some back-end tools like PHP, Laravel, Node, and Express.
My portfolio site has gone through several different iterations. It started as a plain html site, then moved to WordPress when I learned how to build themes. For the past few years, my portfolio has been built with Gatsby and has been served by Netlify.
How is your portfolio site built? Show me your portfolio!
My Portfolio: https://www.iamtimsmith.com
I recently built mine with Jekyll and hosted it on GitHub Pages. I'm using Pixyll as my theme; it's simple, bold, has beautiful typography and no JavaScript.
I love how you can get something up and running with Jekyll without much fuss but can also tweak every part of it if you so decide. It's as simple or powerful as you want it to be.
Here's my blog: rohitawate.github.io/
Oh boy. I remember when I have gotten the idea of my portfolio being a shell terminal where you could use cli to navigate around and access everything in a matter of seconds. This ended up not as great as I thought. I wanted it to be as light and fast as possible, so I wasted a full night making a "terminal emulator" that will fulfill my needs (everything else was very massive and bloated). Then I had an idea of of an optional "X session" you could start with a command and get an access to the "pretty" version of the site.
Then I have adopted the process of having my resume in JSON and building/publishing it in every imaginable format, instantly accessible from my "cli". Had some plans on getting my roadmap and other things there, but had work to do so it kind of hang up for a while.
Does this showcase my work? Nope. Can I show this at HR interview? Not really. Was it fun to build? Hell yes, and I still use it from time to time, just for the sake of sharing my contacts, giving my SSH keys to someone or cloning dotfiles.
And it's just as small as 11kb!
I expected ls to show me the contents but I had to use help to get that. Potential feature maybe?
Yeah, I wasn't real sure what commands to even try. It might be cool to build in some custom functionality with a list of commands at the top. For instance, if you type $ projects and hit enter it shows a list of projects.
Yeah, when a user goes to the site they either work with the terminal or not. If they don't, worst case is they'll enter a random command and be greeted with the help message. But if they use the terminal then imo, the most intuitive command would be ls.
Yeah, I actually had a lot of Unix commands baked in initially but I removed them because I didn't have the time to implement them properly. Well, it's time to commit, I guess!
Definitely, another cool instance of something similar would be the jobs page at repl.it
From the description I can't say I thought it would be very good but after clicking the link I found myself poking around for while and enjoying it. For the right audience it works – nice.
Such a great idea. One problem I had on mobile was that my keyboard automatically capitalizes the first letter. Happening on Android. I don't know if this is a problem other people have.
Wow looks great. I had a similar idea once for my friend. His name was subash (su bash). But i couldn't persuade him to make his portfolio like a terminal.
Oh my god, please do, with a name like this he MUST have a terminal portfolio.
Oh gosh, when I have write 'about', my name at first shows up and I thought: Wow, getting some information about me xD ahuhaua (but then I have read the rest and... well, it was interesting).
Interesting portfolio
I built mine using React and hosted on Github pages.
Link: sureshmurali.github.io
Can you recommend any resources for UI design or front-end development to get to your level? Some cool stuff man!
UI design inspirations: Awwwards, Dribbble, Uplabs and Pinterest
Front-end resources: FrontendMasters (for JS and React), Developer.Mozilla.org (for CSS) and YouTube
They help to kill fps too ;) I dont remember last time ive seen frontend portfolio skipping frames while scrolling ;)
It does look great indeed, but there's a little glitch for me on Chrome (2560 * 1080) : thepracticaldev.s3.amazonaws.com/i...
I like it! It looks nice. At first I thought the icons at the bottom were too big, but it's a style choice.
You can optimize your site by doing a Google Chrome Audit; specifically some tips:
-Meta description, Apple favicon, viewport size; that's easy!
-Resize your images in Photoshop. If you're only showing a small version anyways you don't need a full-size image. If you want, use both and have the small-png have a link to the large-png.
-Optimize your images when exporting.
-There's no navbar, which helps for screen-readers. (Style vs accessibility.)
-A few others, you'll have to go through them.
Also there are some freaky image movements if you open the console then resize it up & down.
I Really liked your site! Loved your choices for the design. =)
I opened it in both my phone and an old computer that i use at work (Windows 7 x86 with Chrome 78.0.3904.108), and the waving hand emoji doesn't want to render on the PC though, but i think this have to do with the fonts i have (or don't have) installed on this PC, don't know.
Pic related:
imgur.com/a/ah96ip5
Very nice, simple and unique...and the smile. Seriously, it can be difficult creating something unique in the world of many interesting designs.
I checked yours out because I'm a fan of React.
Nice looking site!
I use Jekyll for mine. It went through a few iterations of different front end frameworks before I decided on Bulma. I ended up building a Jekyll theme in the end so others could use it too.
Here’s the link to the theme:
csrhymes.com/bulma-clean-theme/
Thanks! I ❤️ Bulma. I use it all the time! I like your site, it’s minimalistic and easy to navigate.
Thanks. After looking at others sites I’m thinking about experimenting with some css animations to make it a bit more interesting.
I know what you mean. I do little transitions and things, but nothing crazy. The things some people can do with javascript and css to make a website come to live is just amazing to me. I don't get it.
Noob Here.
Any reason for not using bootstrap
Or, is it just merely interesting
It really depends on your project. The biggest turnoffs for me are the popularity (easy to spot without a lot of modifications) and the fact that it needs jquery. Burma is css only which means that it doesn’t have all of the interactivity, but it also means I’m not importing a bunch of stuff if I’m not going to use it.
Thanks for the reply, man.
Understood the interconnectivity and unnecessary stuff. That sometimes also bugs me.
But Popularity? I thought more popular means more stable. And there is a lot more Bootstraps theme than Bulma.
Perhaps popularity isn’t the right word. Popularity generally does mean more stable. I was simply referring to being easily recognizable.
I quite like using Buefy for interactive pages. It’s a library that combines vue.js and Bulma so no need for jQuery.
My portfolio site is more like a personal landing page that I can link to other stuff.
It's aimed to be mimalistic so I designed it to look like a business card as that is how I intend to use it.
(Doesn't work well on mobile sadly :( )
I can see your "About Me" text through the "Home" text (and vice-versa)... making it all quite impossible to read :( Using Chrome on Win 10.
Sweet! Can confirm it's all fixed now :D
Is this supposed to be at the bottom of your About side? curl about.justind.me
Yes! It's my Json resume. Meant to be an Easter egg for people who notice :)
Hey Justin!
I love the look and feel of your website 👍🏽 You have a couple of typos though: "gradudate" in your cv and "I'm worked" in your About page.
I also really love the curl thing you have in your CV. Might steal the idea 😄
Hi Doaa, thank you very much! Making the curl thing is a lot of fun. Credit to where it due: I didn't come up with the idea, I learn it from this guy's blog: hugo.md/post/json-resume-curl/.
Hey Justin, when I visit your site in Chrome on a Chromebook, the reversed backside of the business card is visible. imgur.com/TwQBedv
The same issue occurs when viewing the backside. imgur.com/a/tc51D8j
When I look at the site in Chrome on mac, I'm seeing the same thing. I don't see it in Firefox though.
Thank you for the head up! Turn out the latest chrome version resulted in a bug with the jquery script I used.
For my part a simple wordpress custom installation for my blog. And a second wordpress for my photography that is linked to a s3 bucket for not taking crazy space on server Hard Drive
Main Site:
medericburlet.com
Blog:
medericburlet.com/blog/
Photography:
photography.medericburlet.com/
I like your primary site a lot. It looks like there’s some horizontal scrolling on the homepage on mobile. I suspect the culprit is the carousel.
Yes I saw it and been meaning to fix it but didn't have much time and kept procrastinating haha. Glad you like the site.
there is a state which lets you know when the website is still loading: varvy.com/performance/document-rea...
You can then couple that with some checks.
A good starting point would be too look at pace.js: github.com/HubSpot/pace/blob/maste...
When it comes to your proficiencies, what does it mean to have HTML + CSS + PHP at 80%? What is 100%?
I’ve seen this on a lot of portfolios and resumes. I always think it’s a bit odd because either it’s a percentage or grade, or it’s just hard to objectively rate ones skills against others. Just my opinion though.
I would put 100% at understanding completely the language and all of its quirks, functionalities and more. Some are easier to know than others take HTML there is a finite number of tags in HTML5 and it is easy to know them all. The rating also helps to show within all the skills and competencies which one you are more comfortable with and good with. This is however a personal take, some people might buff it up and when it comes to practical exam they will fail.
I liked your primary site.
would you share please What technology did you use in your timeline?
Very cool! I glanced at the concave readme but it’s definitely something I’ll have to dig into later.
Your portfolio is very neat, I like it, if you accept suggestions the "Hire me" button is very hard to read (at least from mobile)...
My portfolio is based on a template I've found on GitHub, but in the time it changed radically.
Thanks! The card to fix that has been in the to-do list for a while. Maybe I’ll get that moved to the top.
I loved your Experience Section.
Would you care to share How did you do this timeline?
Hey Tim, thank for this discussion thread! I opened your website and saw immediately, that your 'hire me' button is black on a very dark background on mobile ( Huawei P20), because it is placed on the waves of the background pickture by page scaling.
Maybe you want to fix this :)
Yeah I’ve noticed this too. It’s definitely a card that’s been sitting in the to-do column for a while. Just not totally sure how to fix it without it sticking out like a sore thumb. I’m thinking same styles but white, but I’m not sure if that would look weird.
I would try filling the button with a light colour, then lowering the opacity a bit to soften the contrast (but check that it's still readable). Give it a shot, see what you think.
My first one was very huge for what I had to display. It was more aimed to learn how to build it rather than what I wanted to show.
Then I reworked it a second time, playing with ParticlesJS, etc
Ultimatly, I decided to move to GitHub pages (for now, it was hosted on OVH) with a lighter version of it.
And the final version is just a small landing page with all the most basics information, here it is !
I like it and it’s simplicity. I would argue that from a UX perspective it may be good to put text under the icons. I knew what github and LinkedIn were, but I didn’t know what the bars or command line icons would do. I thought the bars would be a menu and the command line might be projects.
Mine's just plain HTML/CSS/JS :) No frameworks, no CMS. Just light and simple. ndw.one
Absolutely nothing wrong with that. I like the colors. I always think i should add more color to my site, but at the same time like the neutrals.
Never said there was anything wrong with doing it simple :P I didn't feel the need for anything else. I don't update it often, so why should I bloat it with a CMS.
Thank you for your compliments!
Agreed. Although I use gatsby, I had kind of the same feeling. I could use a CMS for “ease of use” but I’m the only one using it and I’m perfectly fine with markdown so why bother?
Thank you very much! It was inspired by the Firewatch website: firewatchgame.com/
Owl carousel was used for the individual portfolio items yes :)
For the parallax I used Rellax: github.com/dixonandmoe/rellax
Funny coincidence, I just launched my website, portfolio and blog yesterday 😉
I developed it with Gatsby and hosted it on Firebase.
I didn't used any themes, particular templates (beside the starter kit) or tools like Bootstrap. I developed everything from scratch, it's just Js and Css.
I had also a bit of more fun by including in this website two Web Components we have developed for DeckDeckGo respectively the slider and a component to lazy load external images.
Of course, I published the code as an open source project: github.com/peterpeterparker/davidd...
I like this site a lot. Great job! I’ve been working on improving my RSS feed lately to use with dev and Mailchimp.
Thx for the feedback, I'm really happy to hear that, specially as I just launched it 😃
It looks like we are really in phase, a friend of mine literally send me three days ago a msg telling me I should had a look to Publishing to dev.to from RSS 😉
If you implement something for that purpose I would be definitely be curious about the solution
I have implemented it and it is in use with dev.to. I used the gatsby-plugin-feed plugin since it’s made by the gatsby team and is relatively easy to set up. It’s worked pretty well so far although I can’t figure out how to create a media:content element into the xml to show an image for blog posts. I have it set up as an enclosure as a workaround for now.
Sounds super cool 👍
Two positive feedback on the same subject in a week, that ain't something I should ignore 😉
The intro section is very bold, I like it! On the other hand, on mobile it took some time to figure out to "hover" over the different projects to see their titles.
This is something that is also a problem on my site. I see it when I’m on mobile but forget to fix when I have the time.
Thx for the feedback. Yep agree with you, I still need to figure out a better design for the projects ":hover" on mobile
My solution for mine is to just make it visible on mobile (mine has a semi transparent background so the image is visible but also the text). maybe a semi transparent solution could work for you on mobile.
Really nice idea.
I was also thinking on having no hover on mobile but displaying the title, which appears on hover on desktop, under the icon of the project which should for that reason become a smaller size or something like that...
Therefore your solution seems to need less css, so better ;)
That also sounds good. It would prevent the image from being obscured, which is a good thing.
Done 😉
I went the way I explained above. On mobile no hover animation but the project's title displayed after its logo.
Thx for the brainstorming Tim 👍
I get a horizontal scrollbar on Firefox 68 on Mac. Don't think it's meant to be there 🤷♂️
Double checked, can't reproduce it with Firefox 67 and 68 on Mac. Are you on Windows maybe that's the difference?
Odd. Nope, I'm on Mac, like I said. Unreproducible bugs are the worst.
Changing 100vw to 100% for section.header seems to solve it for me. Something to do with the width of the vertical scroll bar not working well with 100vw maybe? Or whacking overflow-y: hidden; on the body to just nuke the problem away.
Thx for testing it again and even more for providing a possible solution, that's super cool, I mean I can't reproduce it so it helps a lot, really really cool 👍
So I've modified and deployed the section width from 100vw to 100%, if I may, could you retry and tell me if the scrollbar now doesn't appear in your Firefox?
Tried again in my Chrome, Safari and Firefox, for me same same, still ok
No worries. Just looked again and success – no horizontal scrollbar. And no other noticable effects from the change. 👍
Also, you may want to capitalise the languages listed on your about page.
Hooray 🎉
That was really strange, thx a lot for the support and help, really appreciated 👍
Could be a good idea, in any case I planned one day to rework that "about" section a day where I'll be a bit more in a "good writing mood" 😉
I can design and do backend but not really frontend. I wanted to see how far I could get with vanilla html/CSS/JS. You can see it in action at aadibajpai.me (clearnet) and clashkahznlvpwfg.onion (onion service)
The resume part is cool though, it's Dynamic LaTeX that autoupdates it with the latest numbers on click.
Hey Aadi
I love your website's design, especially the part with all the links that end with your name. That's a very neat trick I may use in my website 😄
Thanks! Remember when I said I'm not good at frontend but can design? The whole thing is actually an SVG but the trick is that SVGs are nothing but XML files so I was able to individually hyperlink each link and modify it when theme is toggled via JS.
I can literally say I've never seen anyone add a scrolling marquee to the address bar. I think I like it? Hah.
It's true, I can't really make nice websites haha. Felt it was tongue in cheek given the situation haha.
I was on mobile when I looked at this before so I didn't even see that. It's pretty cool. Interesting at the very least.
Yeah haha, I knew my frontend skills weren't going to make it stand out so I had to look elsewhere. If I'm going to do it then might as well make it interesting 🙂
The background gives it a lot of character. I look forward to seeing what you do with the projects page.
I built mine using good ol' PHP, with JSON files to help with the translation. You can check it out here
I like it. Cool photos too! On mobile, the “buy me a coffee button covers up your name though
Yeah I noticed that when I posted my comment 😅😅 i'll fix it when I get home haha. Thanks for the complimentn
I’ve revamped by portfolio using Gatsby recently and deployed to AWS S3/CloudFront. Initially, it was developed using Angular 6.
Here’s my simple black and white portfolio - chilupa.com
Looking forward to bring in more features in the coming releases.
My site/blog is built with React, StyledComponents and Gatsby. It's deployed to an S3 bucket using a CircleCI workflow.
I like it! Very minimalistic. How is that approach (S3 and CircleCi) working for you? I'm not real familiar CircleCI them but I keep hearing the term.
Thanks! I tried to keep it simple as I didnt want to pull in any UI library as a dependency. StyledComponents lets you write CSS in JS so there are no seperate CSS or SCSS files in the project at all.
CircleCI is a service that watches a branch in my sites Git repo for changes. When there is a change it automatically checks out the code, runs a gatsby build then uploads the built output to the S3 bucket. It works really well as I only have to push a commit to master, then within a few moments its live.
S3 is super cheap as well so it costs pretty much nothing to host the site.
So CircleCI is basically doing the same thing as Netlify? That's how my netlify setup works. Once I push or merge to master, netlify runs a gatsby build command and rebuilds the site before serving it.
You have updated your site since I looked at it last. I like it. It's very straightforward and has some nice colors without being "in your face".
Not so much a "portfolio" but an experiment in building an extremely minimal and BLAZING fast site:
All vanilla JS and custom styles. You can tell, it's built purely for speed :)
Built with gohugo.io deployed with/on netlify.com
Wow! This thing really is fast! I also like the animation when a blog post is hovered over. What did you use for styles? Normal CSS or something different?
The car and it's animation code is here: github.com/ahmed-musallam/ahmedmus...
Hugo supports SASS OOTB: gohugo.io/hugo-pipes/scss-sass/ which is recent and awesome
Here is a card demo: codepen.io/anon/pen/ZdwXOr
Well done! I've never used Hugo. I'll have to poke around later on and look at your code. Sounds interesting.
Mine went through a lot of versions and tech stacks.
From pure HTML and CSS -> HTML, Bootstrap and a bit of PHP
Currently it's built with MEAN stack + Bootstrap 4 + Ngrx. I know it's overkill with all the auth and everything, but it helps me manage new/old projects and adding and removing skill sets. You can have a look at it here
This is a super cool site. Great job!
As far as the overkill thing goes, I don't think that's necessarily a bad thing. The performance doesn't seem bad so I don't think it's a problem. I treat my portfolio as a space to try new things and adding features that I think would be cool (even if I don't know how to build them). If you're learning new things, challenging yourself, enjoying it, and it doesn't suck then who cares if it's overkill?
I completely agree. I'm basically using it as a playground, plus it's like a showroom of your skills.
Totally! I get that a portfolio site is a tool to help get jobs, meet people, and network in general, but is it really that useful if it's not something you enjoy working on? I don't think so.
This site looks super retro. It reminds me a lot of early mac or windows GUIs. It's pretty cool!
Just HTML, CSS and some JS. Built as it is delivered. No other tooling.
It's very minimal and updated rarely, so static code made sense. Hosted on the cheapest DigitalOcean droplet. Which also hosts some other sites and other crap that isn't public on my domain.
(Oh, I guess the blog is built on Ghost, because I wanted to try it. Using some really messy CSS there because I'm too lazy to fix it.)
Nice! The colors are there and vibrant without being overwhelming. I'm seeing a lot of developers who are also photographers. That's pretty cool.
Now that's wicked. Usually not a fan of wordiness - but I like your unique writing style. Yours is a blog I would subscribe to, but I don't see how to.
Thanks.
There's an RSS feed, but apart from that 🤷♂️ I didn't expect anyone to want to subscribe.
Oh, the circle image on the main page has stretched proportions. I found the class in the inspector and gave some code I think fixes it.
All Firebase back-end. Firestore, Storage, hosting, cloud functions, etc. Three separate front-ends. One in React, Angular, and Vue -all sharing the same back-end. Each with a subdomain for the other front-ends. "Framework traveling" makes me happy ;)
Are they all the same site or do they each look different? I thought about trying to build my portfolio in multiple frameworks to show that I could use both but never did.
They all have the same fundamental purpose of displaying blog posts, projects, and providing a contact form, but they're all implemented a bit differently because of the different frameworks.
It took me a while to come up with a way to make them all look slightly different, in a way that made sense. What I ended up doing is basing the UI and color schemes off of the docs pages for each. React, Vue, Angular -they all have docs that basically showcase a visual-style for the framework in terms of navigation, links, colors, cards, depth/shadows etc. So I've started to update them all to emulate the visuals of their own docs pages and to differentiate them visually in that way.
In the end one of the most important parts of the portfolios has become their existence. Showing an ability to implement a range of things in a range of ways -all with JS. As I slowly add content to the portfolio some of the blog posts have become about issues I had to solve to make the portfolio itself.
Very cool! I can definitely see how these would show of you skills with the various frameworks.
No portfolio, hasn't been necessary for my career.
I do however have a blog, that used to be Drupal from which I migrated to Ghost. It (like all other things on my server) runs in a docker container, and sits behind another docker container running lightify, which in turn sits behind another container running traefik.
I don't post very often.. keep telling myself I should do more, but it's not a high priority really.
Interesting. I've only dabbled in docker. That sounds intense. I like the site though. It really feels like a magazine or something.
Thanks.. It's mostly the default ghost theme, just tweaked a couple small things here and there.
Traefik makes everything really pretty trivial.. it is the first point of contact for basically everything hitting the server, at least http[s] wise, though it will happily handle basically any other protocol too.
The individual docker hosts behind it use internal ports and routing, that traefik does reverse proxy for..
So you can stand up a nodejs service on port 3000, for example, and expose that as a subdomain or whatever, like: foo.example.com Traefik will handle grabbing an ssl cert for you, automagically from letsencrypt, and internally route traffic coming in on port 443 for that domain to that container.
It's like vhosts, turned up to 11. :)
Cool thing about traefik is you can also attach things to specific routes so if you had main site running wordpress as mysite.com and wanted to setup a magento store, for example, you could just as easily expose it at mysite.com/store as at store.mysite.com ... pretty cool.
I'll definitely have to look into these technologies more. Thanks for all the info!
Wow. I haven't played with Docker all that much, but that sounds super interesting. If I had a dollar for every time I screwed up some virtual host config...
Definitely going to dive deeper, especially since I'm playing more with Node/JS
My website - isabelcosta.github.io/ - is built from Jekyll's minima template with some small tweaks.
From time to time I look up other templates, to see if I find one I enjoy more and feel it resonates with what I want for the website to be. I used this template for being really simple :)
It’s very easy to navigate and I’m a big fan of black text on white background since it’s so readable. Great job!
Simple fork of someone's Gatsby portfolio. Had something far more animated and complicated but wanted to simplify.
I think it'd be nice if the links on the main page had a way of leading where design and code in the navigation end up. Judging from the homepage, I wouldn't expect as much content; possibly the navigation jumping down to an anchor tag.
Mine is built using Gridsome using a premade template (acknowledged in the readme of the repo).
Deployed with Netlify.
I have played with gridsome. I’m not crazy about vue but gridsome is pretty awesome!
I like the purples!
Thanks! I found Vue easier to learn than React. A lot of React devs use Gatsby for their sites if you prefer React instead.
Yep. My site is built in Gatsby. I've used both Vue and React. I prefer React, although I can definitely see why Vue is so popular. At the end of the day, I think it just comes down to personal preference. I tried Gridsome which is like a Vue equivalent of Gatsby and it was pretty cool too.
I had several iteration of mine
Started on Wordpress but too heavy and too much maintenance, then Jekyll to move to static pages coupled with github Pages, to finally now being on Hugo which is a nice trade-off of speed and features. Still on github pages for the hosting
The anchor links in your navigation simply go to #, which doesn't do anything.
Otherwise, it's a simple site and I like the style of it. Wish the resume was updated to match the same feel, not just the colors.
Link: sh1ftsh.github.io
It not really my portfolio but it introduce me and my skills.
I built it in plain html and hosted in on github pages and on shiftsh.xyz
I'm planning to create a static html generator to simplify the html generation process.
My resume is also built in the same way sh1ftsh.github.io/resume
Your site looks like a digital business card. I bet it definitely gets the job done!
I've been steadily working on my site @ sheldonhull.com having migrated from Wordpress->Ghost->Jekyll->Hugo. I like Hugo, though it's been a challenge to learn.
I'm pretty happy with the initial creative photography implementation using FancyBox v3. Definitely a steep learning curve for customization for someone new to it, so I've been limited in my time to do more customization.
I've also included a docs page for stuff I've steadily added to as a compilation of things related to PowerShell, instead of blogging on each one.
Your landing page kind of reminds me of the landing page on the Avett Brother's website. It's been a while since I've seen a bottom nav. Just curious, was there a reason you chose to do that? I've thought about it in the past but been concerned people wouldn't see it.
I leverage the hermit theme and customized. To be honest I probably would pin at the top, but it was a low priority compared to the rest of the work I did so I never got around to customizing the css and show/hide animation. I prefer top nav as well and probably will adjust when I figure it out.
My current tweak priorities are to:
Thanks for the feedback
Mine is still a blank "Hello, world" static HTML page around 10 years on.
One day I will have time...
This could be the truest portfolio site. At the end of the day, isn't this the core of the developer experience? XD
I built my portfolio using Vue.js and Laravel. Hosting it on personal server. I'm using Laravel Backpack to manage content.
I dig it a lot. It's very fast! I've never heard of Laravel Backpack. I'll check that out.
Mine is not so much a portfolio yet, but its built on Laravel.
Link: johnhalsey.co.uk
Go on then: orderandchaoscreative.com/
React App, with no backend, no SSR, dumped on a DO server.
All the page data is stored in JSON files pending me building a backend that I never got round to writing. Ditto for SSR.
Honestly, I should have just written it with HTML + CSS.
lol Where's the fun in doing things the easiest way? I have to tell you, normally I'm not crazy about yellow websites (especially highlighter yellow) but in your case, it really works.The contrast is nice between the yellow and the blue and if nothing else, it will wake you up! I like your logo a lot too.
Ha, cheers, you're too kind. Well I have to be different, I've always said that I'd rather make something ugly than something derivative. I like odd things, glad you liked it too.
Mine isn't a full portfolio yet, but plan to add projects and things in there.
Its built using Laravel, I also have a custom admin panel for adding blog posts etc.
Link: johnhalsey.co.uk
It's definitely got potential to be amazing! Did you build the backend yourself or are you using a prebuilt tool for Laravel?
I built it all from scratch.
I normally avoid packages if I can write the code myself. (even if its worse).
Nothing wrong with that. That is how you learn! I built a CMS for Dungeons and Dragons with Laravel. I really enjoyed using Laravel, so I definitely think you made a good choice there!
Mine is built with Vue and Bootstrap 4 on the front end, and a tiny little Lambda function to handle the contact form is the only backend.
Hosting is very simple, S3 + Cloudfront. Route53 for DNS. GitLab for source control and CI/CD.
Give it a check, would love some feedback!
Very cool site! Way to go! I spent waayyyy too much time playing with the background. It looks very professional though. Good job!
Mine is built using React and is hosted on GitHub pages using a custom domain.
To be honest, I'm not currently using a CMS for it, and instead I just add content manually, but it would definitely be cool future project to move it over to Gatsby or something to make it all a bit easier!
Holy content batman! You've got a lot of content on your site! It fills out nicely. I support you moving your site to Gatsby! 👍
Mine was built on quasar, hosted on netlify too. josephharveyangeles.com.
It has gone through several iterations too. Was a backend dev, started fiddling with frontend back when Angular 2.0 first came out hosted on gh-pages.
I've never heard of Quasar. I'll take a look at that. I like the color scheme you've selected for your site!
Still learning tech, so currently, it is built with HTML/CSS. It was initially built as a static website. I've been learning about reactive and flex-box, so I am now in the process of updating it so it will be reactive. A lot to learn still.
Would love feedback.
My site: michelleschoofs.com/
I like the code color scheme for your site! There is absolutely nothing wrong with HTML and CSS.
A little feedback: I'd make your name (logo) a link going back to the homepage. I clicked portfolio and it took me to #work where I saw another link for portfolio. Clicking on that took me to a different page entirely which also had a different navbar. It may be more cohesive to either remove that link or update the navbar to match the other pages.
Overall though, it's not a bad portfolio.
Thanks so much for the feedback, Tim. I will definitely review my navigation as I'm working on making the site responsive.
I created my portfolio with just HTML and CSS. There is a little JS for smooth scrolling and a themed console message.
I really love musicals so I went with that for the theme of my portfolio site.
Link: musicalwebdev.com
This is definitely a unique portfolio. I've never seen one like this. Good job! What are the lyrics at the top from?
I don't have much on there at the moment, it's more of a landing page.
Link: lynnefinnigan.com
It's a really cool landing page. I like the typing effect. I noticed that the favicon is the Vue logo. I like the function for the link text with the blog. It's a very cool site.
That would be pretty cool. There's definitely a lot of potential with this idea.
Under your technical skills, you've got a lot of logos without titles. If you're eventually looking for a job and human resources or a recruiter sees all those, they may think it's more trouble than it's worth. And you've certainly got enough space for the names. Just something to consider.
Nice site! The colors go well together. Heads up though, you still have the Gatsby favicon displaying.
I built mine using a simple WordPress setup. I no longer have the patience and skills to make a really cool user experience so it works about the same as a medium blog which I am happy about. Although the portfolio part could use some beefing up. Still I use it write stuff every now and then so simple works for me.
I'd say if it works for you, then go for it! The colors make it very legible which is always a good thing.
Waoh! Pretty smooth, nice work here.
I was wondering if programmers get to build a portfolio site ? Or do they just "throw" their projects and stuff on github...
Sorry if it sounds dumb, am new to this (programming/development) world.
Hey! Not a dumb question at all. There are developers who go both routes. It's really up to you. I like having a portfolio site because A) I've been told that it has made the difference when getting a job and B) it's helped me land some freelance jobs. In addition, it also acts as a sort of playground for me to try new things out.
I see. It can be really helpful, if you wish to extend your visibility.
Thanks for the explaination!
Unfortunately, you can't expect your work to speak for itself entirely. Having a portfolio or personal site allows potentials employers know who you are and that naturally sets you apart from everyone else. You can always link your GitHub from there.
So even though am not really experienced I should consider building one in the near future, right?
I'd say it's wise to do so. There's not really a downside. People are going to ask for it (or your work) eventually, so you might as well go with your strongest foot forward.
My site is a JAMstack site. It's currently using Jekyll (and has been for a few years). I'm in the process of switching over to 11ty (since I've really been enjoying it.
I once listed projects on my site, but now I focus on my writing and speaking to showcase my skills, so I removed the link from my navigation.
I need to go back and add some side projects to the site, too
I'm generally not crazy about fluid sites, but I think it really works for yours! How did you start getting into courses?
Hi, so like many other people in the comments, I built by portfolio using Gastby because it's super fast and gives all the speed benefits of optimising a static site. I've hosted it on Netlify. I've built it a couple of months ago and have been making tweaks here and there. It's still sort of a work in progress as I plan to keep building more projects.
Would love to get some feedback from you guys on how I could improve anything.
My Portfolio: nikhil.live
Hey Nikhil! It looks great overall, my one comments would be to create some lower resolution versions of your images. They take a long time to load, and they display on screen much smaller than the actual image is, so you don't need all that resolution.
For example, on your About Me page, your selfie took a full 2 seconds to load for me (and that's on desktop with a physical connection; I assume it would be longer on mobile). When I inspect the image itself, it's 1200x1200 pixels, but on the page it's sized to 150x150 pixels. If you created a scaled down version of the image that was only 150x150, or even a bit bigger so you can use it in more places, it would load a ton faster.
Additionally, you could decrease load time by using an app like squoosh.app to compress it. When I toss your 1200x1200 pixel selfie picture in there, I see I can use MozJPEG to compress it from 704KB to only 86KB, which would definitely load a ton faster and save some people a bunch of mobile data. And that's without first scaling down your image.
Otherwise, I think you've got a solid personal site!
Hey Ken, thank you so much for not only taking the time out to check out my portfolio but also for giving me such useful, actionable advice! I've reduced the sizes of my assets using the compression app you mentioned and I can see a very noticeable difference in image performance and load times. I'm just starting out and haven't really given much thought about optimising image load times but I can see how it makes the experience better and also consume lesser mobile data on slower networks. This is something that I will now keep in mind.
I've never heard of squoosh. I usually use compressor.io for this. Are you using gatsby image to display images Nikhil? That should take care of a lot of the heavy lifting for you too.
The portfolio site looks nice, but you lose a lot of the "above the fold" space with your angled image background. I think if you brought the text up with a white or semi-transparent background, it might alleviate that issue.
Here's my portfolio hope you guys like it :D. Currently hosted in GitHub.
Link: jamesrepository.github.io/portfolio
Hey James, great job! I like the colors and the breathing room between stuff. I did see that your job lists senior developer until April 2019. Are you doing something else now?
As of the moment I'm looking for a remote job/freelance work.
And mostly just keeping up to date in Vanilla JavaScript and JS frameworks.
Been using Hugo, but debating switching to a Gatsby or Nuxt app. Tempted to do something very extreme and build the site in Elm or Purescript or something of that nature. Using a static site gen has felt very tedious and it has been hard to focus long enough to make substantial progress with my site.
The first question would be do you prefer React or Vue? Gatsby and Next are tooling for React applications which create SSR or static sites. Gridsome and Nuxt are the same things, but for Vue. I've never used Hugo, but I've been using Gatsby for ~2 years and I've built a site with Gridsome. I think both provide a pretty awesome developer experience.
Definitely more of a Vue guy. My problem with static site generators is that they don't feel personal to me...I end up finding a cool template on GitHub or paying $20 for a theme and then I'm supposed to start publishing content. I feel dissatisfied with the site, like it really doesn't represent me or showcase anything about my skills as a developer.
It is not practical, but what I really want to do is build it all from scratch. Write parsers for Markdown and Org mode. Set up syndication to other websites, like this wonderful community, when I publish content on my side. My own comments engine that uses AI to identify low-quality messages that are likely spam and to enforce terms of use.
And it is going to be hosted on my server, which I am automating management of via Puppet. I like to go overboard with things, that's a pretty good representation of my personality. Plus, the entire experience gives me a good year's worth of blog posts detailing DevOps, Linux administration, networking, microservices, functional programming, parsers, and everything else it takes to build a site worthy of my domain name.
I built mine from scratch. I took the most basic starter and ripped everything out of it other than config.
Nice! The only thing I saw that was a bit weird is the image. When I hover over it, it darkens and I get a pointer cursor, typically indicating I can click on it. When I click on it, nothing happens.
oops ... I didn't notice it before. Seems like it need a fix. 😊 Thank you for your feedback @iam_timsmith 😊
I built mine a few years ago using just HTML and CSS. It simulates multiple pages using CSS :active selector and has some animations.
Wow! This is a super cool site. Great job! I've never thought to use the :active selector for things like this.
I had always built mine with plain HTML/CSS and my old one before I redid everything was built upon Materialize CSS. It's still viewable at penguin-geek.org.
My current site/blog/portfolio is built with Vue & Gridsome hosted on Netlify, which is at romig.dev.
Wow! Those two sites look completely different! How do you like gridsome so far? I really like the Disney things you came up with in your graphic work on the penguin-geek site.
Gatsby and core features, tailwind, hosted on ghp. Css grid and other native features on the visual page. But very minimal
This is definitely an interesting approach. It's along the same lines as the terminal portfolio mentioned before. Pretty cool! How do you like tailwind?
Don't have a portfolio, but I do have a recently made Gatsby blog:
zanedev.netlify.com/
Added all professional development experience, no animations. Hope you guys like it.
The way you set this up feels like a resume with links. It really keeps the focus on the content. Good job!
Thanks Tim, glad you liked it.
Went through iamtimsmith.com/ and really liked the representation. Did you use template to build it or you've built it from scratch?
Thanks! I just built it from scratch. It started in HTML, CSS, and JS. Then I decided to learn react and gatsby v1 so I rebuilt it in that, and it’s been rebuilt a few more times for various reasons. I just keep iterating on it.
I built mine with React and hosted it with hostinger alongside with Google domains, I'm honestly pretty new on my journey as a web developer, but I actually am proud of what I did, took me a long time to do all the illustrations in Illustrator and I worked hard on animating almost everything that I could, Im still iterating in it so I don't actually consider it 100% done.
Here's the link to it:
williansfaria.dev
Thanks dude, really appreciate the comment, makes me happy, I'm practicing a lot lately to get better at it :)
I loved your logo.
What scrollbar plugin did you use, or did you just made one?
And those illustrations....... dammn
While I like the overall look, I think the content as a whole is a little jarring as a viewer. It goes from standoffish humor with "Person." to images of your work (with links) straight into "Hire Me!". I believe it may be helpful to call out either who you are or add a snippet explaining a project to let the reader connect with you more and to slow them down when exploring the site.
Perhaps more important: for whome are you building your portfolio? Whether you realise it or not, there is no entry into a WoT (web of trust, it's a thing) just based on side-projects. There is already so much code out there that the trouble is more into getting people with resources interested to read and vouch for your code than in just adding/displaying new code.
I sort of have two.
JackHarner.com is more general "me and everything I do". Right now it's just a static HTML page, but I'm thinking about switching it up to Gatsby to incorporate more content.
Harner Designs is my Web Development Portfolio geared more towards driving clients. This one is built on WordPress and is also home to my blog and a shop for some stuff I've designed.
I built my website using jekyll hosted on Github pages and using DNS from GoDaddy.
Mine is currently just a blog, but it's built using:
Gridsome is basically Gatsby using Vue instead of React. I love Vue, but also really like the concept of Gatsby's data sources that are converted to GraphQL at build time. This is like a best of both worlds for me 😊
Mine was built with Laravel+Vue
The backend has similar functionalities as Wordpress, i have a settings section, pages, portfolio, and some stats at the main dashboard. My previous portfolio was Wordpress based. Im still developing the portfolio filters section, for now its just a couple of projects listed on the homepage.
juancadima.com
I built it using only vanilla js, it was pretty interesting to do.
Mine is pretty outdated xD: daxsoft.github.io/
Hi,Tim. You have a great portfolio! I ended up here because I am building my first portfolio for my school assignment. Your blog is really cool too!
Just plain html/css/js published on Github Pages. As it says on my portofolio, I'm in love with simplicity 😁
Link: agonxgashi.github.io
Loved your portfolio! Mine is simple website with html, css, bootstrap and a bit of JavaScript :)
rahilkasimonova.com
Are you a developer or a photographer?
Honestly for me it was hard to read the text over the pictures, lets say its not very "clean", it looks like a photographers portfolio.
Thats all :)
My portfolio gone through 3 iterations 2 of them were same but firstly with basic HTML then with React... And the third and final one is made with Gatsby (it's amazing)
i am also learning Gatsby right now,i am getting errors every two minutes buts that is the fun of coding and i will serve it at netlify
Wow, I like your blog's picture with article tiles in it.