Portfolio Design and Engineering

An independent and personal website is a showcase of who you are, both as a person and professionally. Whether you're an engineer, artist, manager, or your role blends depending on what's necessary for your company, your personal website, your portfolio, serves as a way of making clear your 🏆 accomplishments, 😊 personality, and 🎸 professional & personal interests in a way that is much more interactive and clear than a resume.

What is the purpose of your portfolio? Is it to acquire a position at a large tech company as a 👩‍💻 Software Engineer, 🏫 Research Scientist, 🔺 Technical Artist, 🎨 Artist, 💼 Project Manager, or whatever role you desire? Either way, its purpose should be clear and specific, like your choice of major in higher education or research focus when working towards a Ph.D.

Do you want to be an independent contractor, or to work as a part of a research team, team at a tech company large or small, or perhaps lead your own team? Whatever your choice there's benefits and costs, as an independent contractor you're free to set your own hours, but are limited to the terms of your contract. As a salaried employee you may receive benefits your employer agrees to provide you, such as stock options, medical, etc, however you're expected to follow a stricter time schedule.

It's important to note the distinction between contractor and employee can blur, especially with the rise of a 💻 Work from Home culture in the world due in part to the 🦠 COVID-19 pandemic and rise of 🌎 globalization (which also means you're competing with the global state of the art, no pressure 😅). Plenty of employers are accommodating to your needs, if for instance if you need to pick up your children from school.

Do you wish to enter into research, either in higher education or in industry? If you choose to stay at a university you would be expected to teach courses that would interrupt your research. Industry researchers have the benefit of completely dedicating their time and efforts on a subject, and wouldn't be expected to occasionally pause their work to teach a course (though industry researchers also teach courses in symposiums such as Disney's Rajesh Sharma in Siggraph).

It's also possible to join an open source project and contribute to it, though this comes at the cost of working for free, though there are exceptions to this such as projects supported by Patreon, Open Collective, GitHub Sponsors, or the project belonging to a company such as Epic's Unreal Engine or Qt.

Then there's leadership, from managing a company, either directly or indirectly depending on your interests, leading in the maintenance and creation of features for a product, or following in the footsteps of startups and independent developers that turn their hobbies and passion into a profitable business.

---

Each one of these roles has a portfolio where they showcase their work, from volunteer talks to research published to distinguished symposiums, impressive open source contributions, art featured in a project or publication, attributions to large projects, and more, let's analyse a few case studies and discuss how to engineer your own portfolio depending on your abilities/time interest.

Case Studies

Artists

Arda Koyuncu

Arda Koyuncu is a Principal Character Artist who has participated in a variety of different projects, from Bioshock Infinite to God of War, Dishonored, Epic's Troll RTX film, and much more. His portfolio is reminiscent to the design of Artstation, and his featured works tell a story of impressive technical prowess and attention to detail.

Arda shows how important it is to make your portfolio 🖼️ visually impressive and dense in quality.

Javier Perez

Javier Perez (@MeshModeler) is a Senior Material Artist at Playstation Visual Arts Service Group, and works on impressive material designs with Substance Designer.

He shows us that we should have as many 👀 eyes on our portfolio as possible, seek out constructive criticism as if you were still on an Internet art forum in this day of unified social media.

Wanchana Intrasombat

Wanchana Intrasombat (@VictoriorCG)'s a Visual Development Artist who contributed to the PlayStation 5's Kena: Bridge of Spirits game as a concept artist. His portfolio is specific and succinct, full of professional examples of his work.

Alyssa X

Alyssa (@alyssaxuu) is a 🦄 UX Designer who offers interesting insights in product design.

She teaches us to consider the design of your portfolio carefully, go so far as to include video, draw inspiration from other UX designers on communities like Dribbble and Figma, and even treat Twitter as a portfolio.

Engineers

Alan Wolfe

Alan Wolfe (@Atrix256) is a Dev Tech Graphics Engineer at NVIDIA, who write a lot! His blog is full of engineering insights for computer graphics, game development, audio programming, and much more. The perpetual student, he's constantly looking for new and interesting ways to improve his craft.

Alan shows us that we should never stop being a 👨‍🎓 student, and study your interests to the best of your ability and associate with other people that do the same.

Yining Karl Li

Yining Karl Li (@yiningkarlli) is a Senior Software Engineer at Disney's Hyperion Renderer, his portfolio features recent events as well as research publications and experience that he has.

Karl shows us that we should keep your portfolio up to 📅 date, even with granular events, either with Twitter, RSS, or manually. Consider also updating it with a variety of contributions, podcasts, talks, a demo reel, and much more.

Bartosz Ciechanowski

Bartosz Ciechanowski (@BCiechanowski)'s portfolio is full of highly detailed notes that are reminiscent of the notes of Dr. Wolfram's Mathigon E-Book or Apple product showcases, with a focus on concise information and interactivity.

Bartosz shows us just how important it is to make your portfolio 👓 readable and interactive.

Jason Lengstorf

Jason Lengstorf (@jlengstorf) is a Principal Developer Experience Engineer at Netlify.

Jason shows us just how important it is to consider the experience of visiting a portfolio, make it like a game, interactive with ⭕ buttons and 🎶 sounds, and consider all the possibilities of what someone visiting it might want to know and see.

Academics

Benedikt Bitterli

Benedikt Bitterli (@tunabrain) is a PhD student at Dartmouth College who contributed to the Disney Hyperion Renderer. His portfolio is full of research papers and interactive projects he worked on independently. His Siggraph 2020 paper on Spatiotemporal Importance Sampling is particularly impressive.

Benedikt shows us how important it is to choose your 🔍 research focus carefully, from early in his educational career he was researching computer graphics and stayed consistent, specializing further and further along the way.

Niladrish Chatterjee

Niladrish Chatterjee is a computer architect at NVIDIA Research.

Like many academics he participates as much as possible in his field, with as many 📖 research papers and patents as possible in addition to participating heavily in conference committees/review boards to offer your constructive criticism. He also has an h-index of 17.

Technologies

Depending on your engineering interests you may want something more or less programable, but the end goal should be to have a portfolio that's 💃 beautiful, 🦄 unique, 🤫 succinct, and 😁 easy to update.

Building a custom portfolio entails software engineering questions such as, what do you intend to host in your website, and how would you want to update it? Do you want a web interface? What about a command line interface? Will you be writing blog posts? How interactive will your portfolio be?

Depending on your interests and willingness to pay a premium, you can either use a ☁ cloud hosting provider such as DigitalOcean, Amazon Web Services (AWS), or Vercel, or opt for other services to host your site for free.

Now it is possible to create a custom portfolio, there's no shortage of libraries and tools to do so, I personally use React, WebPack, and treat every page as a JavaScript module on my portfolio, here's some more details on my site's engineering if you're interested.

If you want a programmable portfolio but don't want to make a custom solution, my personal recommendation is to try using Gatsby. There is a learning curve to get started though, since even Gatsby's cloud solution requires understanding at least git and a high level, and digging deeper requires understanding React and GraphQL. At the very least using some parts of Gatsby's ecosystem such as mdx would be beneficial to even a custom solution.

Here's a starter Github repo by Chris Biscardi (@chrisbiscardi) showcasing Gatsby and MDX.

Alain.xyz site may not use it, but was engineered with similar ideas and depends on the mostly the same technologies.

The obvious choice for making an easy to maintain portfolio though is Wordpress, with this web engine being so popular it makes up a huge chunk of portfolios and professional business websites.

Then there's tools that are even simpler such as using GitHub Pages, Glitch, Artstation Sites, Adobe Portfolio, or even commercial website hosting tools like SquareSpace or Wix.

It can be fun to 🚲 bike-shed around a design and technologies, but bear in mind that in the end it's the value of what's in your portfolio that matters, though presentation does help.

Conclusion

To be clear here, if I were to cover every impressive portfolio in the world this post would never end (After all, I follow more than 4000 impressive individuals on Twitter alone) let alone other social media like Artstation, GitHub, and if you're determined to be as impressive or even more so, you too would also be counted among the individuals listed here, so get out there and make whatever you can!

What does future of portfolio design look like? It may be one where in addition to templates, drag and drop designers like Webflow, and hand crafted engineering (like a web version of the demoscene), there's no-code solutions driven by AI writing code for you.

Don't go into a lifetime of debt to get an art degree. I don't have one and many in my field don't either. This industry is 100% portfolio based. ~ Simon Fuchs (@SF_simonfox)

It certainly seems as though the future of industry is to value individual work, and portfolios are a great way to measure that (as difficult as it is to measure that due to differences in presentation, incomes, location, etc).

Do you know someone really impressive? Feel free to share and offer your constructive criticism in the comments.

More Resources

• Share your portfolio with #PortfolioDay.

• Raf Grassetti (@rafagrassetti)'s YouTube features a number of different interviews of professional artists.

• Wappalyzer's a browser extension that lets you see the tech stack of any website you visit.

• Awwwards is a web awards platform that features a ton of impressive websites vying for an award. Visit sites like these for inspiration:

  • OpenAI.com
  • Apple.com's product pages

• For perspectives on compensation and investments, these individual engineers, artists, etc. share their salaries, budgets, housing, and/or stocks:

  • Bukola Ayodele
  • Cher Scarlett (@CHERdotdev)
  • Dan Abramov (@dan_abramov)
  • Jared Palmer (@jaredpalmer)
  • Karla Ortiz (@kortizart)
  • Katie Chironis (@kchironis)

• Portfolios and resumes go hand and hand, Dale Kim (@unpacklo) describes a few tips on resume design here.

• Kristen Kwong (@kristenkwng) wrote a blog post discussing her educational career leading up to joining Apple.

• Life can be a bit more complicated than metrics and the quantified self, pomodoro timers and the like, (@krazamtv) gives an bit of a satirical scenario on the ideal day of a software engineer.

• Paolo shows us a A day in the life of a software engineer at Bandai Namco in Japan.

• Georgian Avasilcutei (@nimlot26) uses Twitch as a educational platform where students can simply subscribe and learn from him, will this be the future of mentorship?

• Join communities where you can associate with others that want to tackle the state of the art in your domain of choice on Discord, Facebook Groups, Twitter, Websites, and wherever communities will form next (Virtual Reality? Zoom?).

  • 🐦 Twitter
  • Artstation
  • ShaderToy
    • Discord
  • PolyCount
    • Discord
    • Forum
  • CGSociety
  • Leetcode
  • GitHub
  • LinkedIn
  • Twitch