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
Oldest comments (308)
Wow, I like your blog's picture with article tiles in it.
Thanks!
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.
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
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.
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! 😉
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
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
really amazing portfolio loved it...!!
Thank you Aamir 🙏
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 ;)
Fantastic work! Scrolling through it was really inspiring!
Thank you Max
Dude! That's one hell of a Portfolio, loved the experience!
Thanks a lot, Oliver.
Fantastic!!!
Thanks ListNUX
Your portfolio is awesome. Nice job!
Thanks George. I like your comical profile picture.
Woaaaw, awesome portfolio with animations 👏
Thanks Hackerman 🤓
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.
Loved your portfolio
Voistrap is first and last
Your portfolio was fun!
Nice design
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.
The Engineering Behind My Portfolio Website
Michael Hoffmann ・ Dec 13 '18 ・ 7 min read
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.
Thanks for the clarity, man
I quite like using Buefy for interactive pages. It’s a library that combines vue.js and Bulma so no need for jQuery.
buefy.org/
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 :( )
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, 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.
Hey, Justin. I loved your landing page thingy! I think it is really cool.
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.
I have so many things like that.
How do you know how much has loaded?
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?
Simply used the one I made:
Building a Responsive Material Timeline
Burlet Médéric ・ Jun 28 ・ 3 min read
Thanks for the information.
Iam using my own tiny library for building SPAs: concave
matspfeiffer.dev
Hosted on netlify..
Very cool! I glanced at the concave readme but it’s definitely something I’ll have to dig into later.