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
Top comments (308)
I built mine using React and hosted on Github pages.
Link: sureshmurali.github.io
Reminds me a bit of apple.com landing pages.
I think the animations help with that a lot
They help to kill fps too ;) I dont remember last time ive seen frontend portfolio skipping frames while scrolling ;)
I love your portfolio! Holy cow what a fun experience.
Thanks Victoria βΊοΈ
Your appreciation means a lot to me.
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
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.
Fantastic work! Scrolling through it was really inspiring!
Thank you Max
Woaaaw, awesome portfolio with animations π
Thanks Hackerman π€
Your portfolio is awesome. Nice job!
Thanks George. I like your comical profile picture.
Fantastic!!!
Thanks ListNUX
Dude! That's one hell of a Portfolio, loved the experience!
Thanks a lot, Oliver.
really amazing portfolio loved it...!!
Thank you Aamir π
Your portfolio was fun!
Voistrap is first and last
Loved your portfolio
It does look great indeed, but there's a little glitch for me on Chrome (2560 * 1080) : thepracticaldev.s3.amazonaws.com/i...
Nice design
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.
mkrl.xyz
And it's just as small as 11kb!
I expected
lsto 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
$ projectsand 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.Agreed. That makes sense.
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
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.
Guess everything will have to be aliased out! π
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 LOVE this. Great work!
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.
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.
Funny coincidence, I just launched my website, portfolio and blog yesterday π
daviddalbusco.com
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 get a horizontal scrollbar on Firefox 68 on Mac. Don't think it's meant to be there π€·ββοΈ
Wtf really? In the main page?
Didn't faced that on my Mac with Firefox
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
100vwto100%forsection.headerseems to solve it for me. Something to do with the width of the vertical scroll bar not working well with100vwmaybe? Or whackingoverflow-y: hidden;on thebodyto 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
100vwto100%, 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 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 π
Would it be helpful if I wrote a blog post about it?
It would be definitely interesting, I would read and like it for sure π
I'll make that my next post!
ππ
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.
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 π
No problem! Glad you got it solved!
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.
Mine's just plain HTML/CSS/JS :) No frameworks, no CMS. Just light and simple. ndw.one
Love the parallax :)
Thank you very much! It was inspired by the Firewatch website: firewatchgame.com/
That is a very cool site. I can see the similarities.
Loved it.
Owl carousel parallax?
Owl carousel was used for the individual portfolio items yes :)
For the parallax I used Rellax: github.com/dixonandmoe/rellax
Thanks for the knowledge.
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?
My portfolio site is more like a personal landing page that I can link to other stuff.
justind.me
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 :( )
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.
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.
Thanks for letting me know! Fixed :)
Sweet! Can confirm it's all fixed now :D
Is this supposed to be at the bottom of your About side?
curl about.justind.meYes! 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/.
Thank you for sharing the link! π
On mobile you could just style it like a vertical business card.
Hey, Justin. I loved your landing page thingy! I think it is really cool.
I just built mine about a month ago. I used React and it's hosted on Heroku. I am thinking about redoing it already and trying out Jekyll for the first time.
my site
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
Thank you for letting me know. π
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.
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.
willvincent.com
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.comTraefik 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.comand wanted to setup a magento store, for example, you could just as easily expose it atmysite.com/storeas atstore.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
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.
bertolotti.dev/
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?
Sure, you can find the code on GitHub: here
Thanks for the knowledge man
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.
I love the project thumbnails :)
Just HTML, CSS and some JS. Built as it is delivered. No other tooling.
joshransley.com
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.
joshransley.com/blog/rss/
Relieve my soul:
.profile-image {width: 100%};β»I'm confused.
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.
Ah, yes. In Chrome it seems the image has been stretched/squashed. Thanks.