This is a multi-purpose portfolio for my job hunt, freelance clients, and consulting work.
Since this is a static website, you can download the repo and open index.html with the browser of your choice. Ta-da!
This is a static website built with plain old HTML and CSS.
I love JavaScript (and React!) but I wanted to provide an experience that doesn't require JavaScript. I also wanted to make sure the website loads as fast as possible.
I progressively enhance the user experience with a Google web font for browsers that support it, and I serve images in WebP format when possible.
The design of the page was inspired by Josh W. Comeau, Wistia, and my friend Nicole Gathany's portfolio. I also use a CSS reset from Josh Comeau to ensure the user experience and layout are consistent across browsers.
The website features a one-page layout with a sticky sidebar. For desktop users, I can almost guarantee that my contact info is visible, or not too far off-screen, at all times. For mobile users, I wanted to ensure that the copy is legible, concise and easy to digest.
This website has some not-so-subtle easter eggs and cues to my gender identity. I am a demisexual transwoman. The purple used for headings and links comes from the demisexual flag, and the cards used to feature my projects use the colors of the transgender flag.
Since I primarily work with non-technical people, I wanted them to be able to navigate the website with ease. For the most part, all you need to do is read and scroll down to get all of the information you need about me.
The copy is laid out sequentially to establish trust and credibility for prospective clients and employers. I open up with a short introduction about my past work, what I'm doing currently, and what I hope to do in the future, followed by:
- a link to my resume
- an overview of services I offer
- examples of my work
- context around my volunteer work
- a call-to-action
- contact info
In my footer, I list out my contact info in plain text just in case users aren't familiar with the social media icon links used at the bottom of the sidebar.
Ideally, this information addresses any objections that people may have about working with me. They can see my breadth of experience, my passion for the industry as evidenced by my volunteer work, and they have multiple calls to action to get in touch if they are interested in working with me.
This project is stripped down to its essentials to get me in the practice of working iteratively. The goal was to get started right away writing markup with very little emphasis on planning or foresight.
Additionally, traditional advice from 100Devs is to use a template for your portfolio. However, since this portfolio is trying to do so many things, I felt compelled to create and design my own.
Some of the challenges I faced include:
- Finding design inspiration to mimick and build off of
- Finding a font/typeface that felt professional and still had a sense of whimsy
- Narrowing down information to include about myself so the site is easy to skim
- Meeting/maintaining WCAG color contrast standards while still being able to give the site a fun splash of color
- Writing simple CSS that is easy to extend and refactor
- Avoiding hosting any media; I don't use a CMS for assets or content, so I had to get creative in a few places
- Avoiding getting stuck: I opted to roll with whatever I end up making instead of being a perfectionist
- Add a picture of myself!
- Add testimonials from previous clients
- Add CSS animations for elements like my link buttons
- For each project: add info about the tech stack, platforms and libraries I used
- Turn this website into a template that can be re-used by my fellow devs at 100Devs!
This project is a work-in-progress and I'm always seeking feedback. Feel free to open an issue or e-mail me at elysehadid@gmail.com if you:
- notice weird behavior with responsiveness
- notice a dead link somewhere
- have resume advice
- have advice on how I can improve the layout of the page, or specific elements
- have other thoughts or feedback that isn't listed here
In no particular order, here are all of the people, places, and things I owe credit to for the creation and execution of this project!
- 100Devs: for creating many beautiful portfolios and supporting me on my lifelong journey of learning as a developer
- Jonathan Stark: inspiring me to commit to my journey as a consultant, and always offering invaluable advice!
- Josh W. Comeau: inspiring the design, layout, font choice, and overall whimsical feel of the site.
- My ex-wife: even though you don't code anymore, you've always been supportive in my journey!
- Nicole Gathany: I used her website as inspiration
- Paul Boag: running a great newsletter and community that have shaped my perspective and thoughts on user experience over the years.
- The Futur: piqueing my interest in design again and putting out tens of hours of content to consume and learn from.
- thoughtbot: inspiration on the website layout, and teaching me many valuable skills as a burgeoning product developer and consultant!
- Wistia: inspiring the design of some elements on the website and redacted.
If you live in Portland or the Metro Portland area, I'd love to meet you in person! Feel free to call or text me at (971) 205-2190 or e-mail me at elysehadid@gmail.com. You can also book a video call with me.