My UX Journey

irisgupta.com! It is finally up on the web.

I’ve been meaning to build a personal website for years but always found the barrier to entry too tall. Many people reading this post can probably relate. Most online tutorials were frustratingly unhelpful, as reading through documentation led to little retention and step-by-step tutorials were so specific that they led to instant burnout. Although I’m a computer science student, UX (user experience) development is on some level, a completely different ballgame. The coding languages are different, and style + vision + creativity is suddenly a lot more vital to the process. A definite change in pace to the robotic feel of typical projects we create in Python or Java. Below, I’ll walk you through my process for building my very first personal website and share some tips along the way.

I can confidently say that setting up the foundations of UX development is the most discouraging aspect. What UI (user interface) library do I use? What framework do I operate through? What’s the best text editor? What languages are even necessary to learn? These decisions have insurmountable influence over your final product, but can be difficult to resolve. Here are my official recommendations:

• “React JS” is the most popular UI library from what I’ve seen, and with good reason. My personal positive encounters include fast&easy rendering and automatic handling of images, styles, and components, but you can read more here if you need more convincing

• “Next JS” is the framework winner in my opinion. There are many frameworks to operate through, including Node JS, Create React App, and Vue JS. Create React App is a tempting option for new UX developers, but Next JS offers unmatched page navigation, an intuitive file system, and friendly processing of images, metadata, and links. Not to mention the most comprehensive and helpful tutorial of any other framework

• “Visual Studio Code” is a great text editor. As someone fairly new to command line, I was ecstatic to discover that interactive and user-friendly options exist, which are a huge step up from using Git Bash or Powershell to run text editors like emacs or notepad++

• HTML, JavaScript, and CSS are all languages important to learn when building a website. HTML is a markup language that provides the basic website components & design, JavaScript is a scripting language that is used for more dynamic website elements and backend development, and CSS is a styling language where font, colors, and overall design preferences are coded

I used Figma to create overall mockups of my website (you can find my original home page design here). I followed a brief Figma tutorial, but ultimately only ended up using Figma to vaguely orient myself instead of creating high-def mockups. I decided on theme colors, fonts, and the general layout I wanted my website to have. Having quick access to CSS color codes and CSS positioning tags definitely streamlined my development as well.

I began my UI development while following lessons 1-10 of this YouTube tutorial. The creator truly did an amazing job at making web design accessible to novices and I left the videos with a confident understanding of UI basics. Here are the overall steps I took in initial development:

• I created files for all the pages I wanted my website to contain. This included a Homepage, an “About Me” page, a “Projects” page, a “Music” page, and a “Contact Me” page.

• I imported styling for theme colors, headers, general text, and alignment into my local CSS file

• I added basic content to each page including text, links, and images

• I created a navigation bar that handles all page redirects throughout my website

• I constantly viewed my changes in the “localhost:3000” URL

Here’s where I ran into a bit of trouble:

• I was intent on adding social media icons in the footer, a design decision I’ve seen included in most personal websites. Since React JS and Next JS didn’t have a social media library, I scrounged the internet for a worthy alternative. I finally landed on this icon package, which reacted well with Next JS and includes color customization options

• I wanted to include an interactive photo gallery to display my artwork on the website, and borrowed CSS styling from this tutorial. The results exceeded expectations and I very much recommend this styling to others

The takeaway? There are infinite open-source options for any stylistic choice you might want to include in your UI design. I’m currently looking into ways to create a project board and music display of some sort.

I used “Vercel” to deploy my website, which has built-in compatibility with all sorts of React JS frameworks, including Next JS. (It is also free!) Here was my overall deployment process:

• I created a GitHub repository and consistently pushed changes to it. You can see a quick tutorial on using GitHub here. It essentially serves as a remote folder for all your code, keeps track of past changes, and allows for easy code sharing. From here, Vercel can easily pull your code for deployment

• I used “hostinger” to purchase my personal domain: irisgupta.com and followed this Vercel tutorial on adding a custom domain

• I ran into multiple problems while building my website in Vercel, but here are two easy fixes to prevent the hours of debugging I endured:

  • Replace all apostrophes in text with ' (ex. I'm Iris instead of I’m Iris)

  • Ensure that “className=”xxx”” is used instead of “class=”xxx”” as is shown in most tutorials

  • Ensure all Next JS packages are imported at the top of each file with correct syntax (ex. import ‘next/image’ instead of import ‘next/Image’)

That’s all I have for now! I hope you found this post useful and feel free to browse my website;)