
We are seeing a trend in layoffs in perfectly healthy companies. Blocks laid off nearly half their staff, and it’s not because they can’t pay them:

> Gross profit continues to grow… but something has changed. We're already seeing that the intelligence tools we're creating and using, paired with smaller and flatter teams, are enabling a new way of working which fundamentally changes what it means to build and run a company.
>
> — [Jack Dorsey](https://x.com/jack/status/2027129697092731343)

We’ve all heard it: AI is coming for your job. This looks like Exhibit A, doesn’t it?

There’s a real point buried in the hype. AI will happily eat the tedious, time-heavy parts of writing code. And if “I write code” is the entire value you bring, then AI is going to replace you.

But if you’d like to be better than that, here are a couple of ideas.

## Ship faster

Instead of working less, put in the same effort and ship more. Teams will hit the same output with half the people, so you need to be twice as productive.

Efficiency doesn’t shrink demand; it expands it. The easier it is to build something, the more things your company will decide are "worth building." This is called Jevon's Paradox.

## But don't ship AI slop

AI can write complex regex (so glad I never learned to do that) and can work with HTML canvas, but it's still a junior dev in many ways. Inefficient queries. Repetitive code.

LLMs lack context, even if you refine your `claude.md`. They often don't know that there's existing code they can reference to implement a similar functionality unless you've specified it. Maybe you want to structure your database schema for a feature you have in mind that isn't implemented yet.

Your job is to spec, review and keep the codebase quality high.

## Expand your skillset, and collaborate less

Frontend devs can do backend now. Full stack devs can learn design. Instead of handing over your work for someone else to fill in the gaps, do it yourself. Write that API endpoint, design that error state. Less collaboration means less communication overhead for the team and more ownership for each team member. [Be the driver.](https://newsletter.posthog.com/p/collaboration-sucks)

You may feel like you have to ask someone's opinion before making a decision because "it's not your job". Then you are waiting on an answer. Then you disagree, and have a discussion. Whoever has the biggest ego wins, and now you've wasted four working days.

## Learn design

AI still sucks at design. You can make it copy other designs. But to know which designs to copy requires taste — knowing what looks good, what doesn't, and why. [Refactoring UI](https://www.refactoringui.com/) is the best resource out there to teach developers that.

Now that you have taste, use [Magic Patterns](https://www.magicpatterns.com/) to brainstorm design ideas using the `/inspiration` command.

In your coding assistant, install [impeccable](https://impeccable.style/) commands that will point out design issues and help you fix them. I usually start with `/critique` which tells me what's wrong and which commands to run next like `/polish` and `/normalize`.

## Be your own manager

Ask yourself, what should I work on? What's the next best thing to do to push the business forward? In an era where we can use agents to build anything, what's left is deciding what to build and how.

Going back to the first point of shipping faster — your team lead can ship faster too. What's stopping them from using Claude instead of delegating to you?

You need to come up with your own ideas, find problems to solve, and prioritize. You're now a PM with agents as your employees. [This is a skill that can be learned.](https://getpushtoprod.substack.com/p/thats-not-my-job)

## Don't be distracted by the tool

Every week, a new AI tool comes out that tempts you to change your workflow because it "changes the game" and now "we're cooked". Stay curious and keep learning, but always remember that your #1 job is to ship, and AI is just a tool to do that faster and better.

## As a side effect, work feels more fulfilling

To sum it all up, you need to have a product mindset (know what to build) and take ownership (build the thing from start to finish).

When you can ship features on your own that are also your own ideas, you can say, "I did that." And that makes you feel more creative and less like a machine ticking off a todo list. You can be proud of your work because [it's yours](https://ellawriter.substack.com/i/192707938/1-work-is-fragmented-so-ownership-disappears).


Career

How to stay relevant as a developer


Over the years, I worked for remote companies, ones that embraced remote work, and ones that were forced to be remote during covid and saw it as a constraint.

Those who've embraced it are able to hire the best or cheapest or best-value-for-money talent. They are also the ones constantly trying to improve the way they work.

Not being able to talk face-to-face and nudge your coworker next to you _is_ a constraint, but **constraints force you to be creative and efficient**.

If you fall into this category, then naturally **the next step is async communication**.

## What is async work?

Communicating asynchronously at work means you don't have to be working at a set schedule on Monday-Friday 9-5. You get the job done at whatever schedule works best for you.

## Why async?

*   To do your best work at the time, energy level and mood that suits you best
*   To schedule work around your life, not the other way around
*   To work with people who are clear thinkers

💡

“If you are trying to decide among a few people to fill a position hire the best writer. It doesn’t matter if the person is marketer, salesperson, designer, programmer, or whatever, their writing skills will pay off. That’s because being a good writer is about more than writing clear writing. Clear writing is a sign of clear thinking. Great writers know how to communicate. They make things easy to understand. They can put themselves in someone else’s shoes. They know what to omit. And those are qualities you want in any candidate. Writing is making a comeback all over our society… Writing is today’s currency for good ideas.”  
\- Basecamp

## How to fail as an async remote team

From my experience, this is how companies have failed at being async. I don't mean that they failed as a company (because they're still profitable), just that they have practices that have negative results.

*   Employees view async communication as a way to slack off and procrastinate. Productivity suffers.
*   Difficulty in collaboration because team members take too long to respond especially when others are blocked on an issue.
*   Slow feedback, waiting 24-48 hours to respond, resulting in stale pull requests.
*   Fewer but longer meetings lasting up to 2 hours. All the communication that was not done in person was instead done in a once-a-week call. You get people from different timezones into the same schedule (late nights or early mornings) and try to have productive discussions for 2 hours straight.

As a result, workers get to enjoy their lifestyle, while compromising company productivity.

It's easy to pinpoint these problems, but how do we solve it? The answer is usually

*   Mandatory overlaps with the team, where you can work at the same time and ping each other on slack, jump on calls for "a quick question"
*   Time-tracker tools to micromanage your team
*   Go back to the office

But it doesn't have to be this way.

## How to thrive as an async remote team

In all the years I've been working remotely, it wasn't until I started working for [Steve](https://steve.ly/) that I realized I have so much more to learn about remote work, and that **I had communication issues at my previous jobs**.

Here are a few ways to improve.

### Over-communicate

Share your WIP. This lets your teammates correct your mistakes earlier. Share your ideas, good or bad. Write messages like you write text messages, not like emails. React. If your manager has to ask what you’ve been up to, then it’s a sign that you are not over-communicating.

### Understand 

Be curious and understand the business. What is the goal of this app that I’m working on? How does it make money?

With this knowledge, you will know what's important, how to fill in the gaps, how to prioritize tasks, and how much time to spend on each. You learn how to manage yourself, and you become the “low-maintenance” employee who gets things done without much supervision - like the smart bot that you are. 🤖 

### Show your work

Things can get lost in Slack. Make sure the client knows what you’ve achieved. Send screenshots and URLs. Send it again in case they missed it. Ask for feedback.

It’s a win-win for both parties. You let your value be known, and they’ll know what they’re paying for.


How to thrive and fail as an async remote team


2022 was the year that I... made Lisbon my home, giving myself a whole new continent to explore.

![](/images/blog/2023/01/IMG_5638.jpeg)

This was huge for me because, as a Filipino, I had a set of rules for myself that didn't apply to others. A limiting belief that says I have to work twice as hard to get half what others get, and never have what they were born with - the freedom to see the world.

Becoming a Portuguese resident proved me wrong. I _can_ travel the world, and if I was wrong about that, then I was also probably wrong about everything else.

I've always been grateful for the privileges I've had, but now I really, really see it. And I hope to give the same opportunities to others one day, but that's going to be bit farther into the future. First, I'm exploring Europe! 🎉

![A solo trip to Budapest the week after I became a Portuguese resident](/images/blog/2023/01/IMG_6369.jpeg)

## Highlights and accomplishments to be proud of

*   Successfully navigated the long bureaucratic process of migrating. **My sense of urgency and obsession with getting everything right came in handy**, and so the paperwork went smoothly. 😎 This obsession usually manifests in unnecessary anxiety, but this time I was glad to have it!
*   Found my **dream job** with location + time independence, utilizing my array of skills in coding, design, copywriting and taking ownership of a project. All this by working part-time, learning loads, and getting paid well! ⚡️
*   Spoke about remote work and digital nomad life to CS/IT students from my uni. It's a small step towards my goal of **spreading opportunities and success in tech to the Philippines**.
*   (Kinda) got over my impostor syndrome. If I think I'm not good enough, then maybe I'm not and I just gotta **work towards getting better**. I'll be awesome that way.
*   I can **deadlift** more than my body weight.
*   After 3 years of travel, I **signed a lease** for the first time 🤯

![A functional living room after a few Amazon orders and trips to Ikea](/images/blog/2023/01/IMG_5266.jpeg)

## What didn't work in 2022

*   Sold a [template](https://trishalim.gumroad.com/l/portfolio-website-template-for-software-developers) but it was a failure because I did zero marketing 🤪
*   Started a [travel blog](https://trisha-lim.ghost.io/) with the intention of earning ad revenue, then realized I don't like writing long informative blog posts. I learned SEO though, and applied that to my portfolio site. Now I continue to get views from Google to this day. Ultimately, it was a win!
*   I wanted to make website audits, [created the landing page](https://trishalim.com/audit), and never launched due to lack of self-confidence 😆 maybe 2023?
*   My lifts didn't improve much despite the consistent workouts. Time to track and up my protein.

## 2023 goals

Generally just do more and get better on all the things that matter. Specifically:

*   travel a LOT
*   lift heavier
*   take more [photos](https://trishalim.com/photography)
*   daily journaling
*   learn more Laravel
*   make [LST](https://lawschooltransparency.com/) much better
*   read more books


2022 was the year that I...


While traveling, I could never justify having more than 3 bags - a suitcase, a laptop bag, and a mini backpack for every day which fits my kindle and camera.

After 3 years of travel, I now have a home base, and everything I own no longer fits in a suitcase. I'm trying not to fall back into a trap of owning too much stuff, but also enjoying the new-found freedom of being able to buy what I want with no worry of how I'm going to lug them all around.

I wanted a bag just big enough to fit everyday essentials. Stylish but casual. Versatile but not boring. Matches my basic t-shirt + denim combo, or my floral dresses. Goes with my black boots, sandals or white sneakers.

![](/images/blog/2022/09/omybag-amsterdam-becks-bum-bag-6-1.jpeg)

I found [O My Bag](https://omybag.nl/) which sells leather bags in the $100-200 price range. I went with the [Beck's Bum Bag](https://omybag.nl/products/becks-bum-bag-cognac-checkered-stromboli-leather) The strap gives it a bit of a personality, but the black and white doesn't clash with my outfits. The brown also goes well with any color, but not as basic as black.

![](/images/blog/2022/09/omybag-becks-bum-bag-closeup.jpg)

![](/images/blog/2022/09/31E86CC3-E71A-4091-B912-901A6750FB43-1.jpeg)

The main compartment has 4 card slots. I can also fit my power bank, iPhone 12 mini and lip products. You can put more stuff in, but you'd have to play tetris. I prefer to leave some comfortable space.

![](/images/blog/2022/09/omybag-amsterdam-becks-bum-bag-2.jpeg)

The smaller front compartment fits a cable and an airtag.

![](/images/blog/2022/09/omy-bag-amsterdam-closeup---3-1.jpeg)

![](/images/blog/2022/09/omy-bag-amsterdam-closeup---2.jpeg)

So far, this bag has served its purpose, and I've been loving using it. The only con is that it looks bigger than what it fits, because it's wide and thin.

I also sometimes feel like it's too casual, but a bag can't be everything I want it to be. I'm thinking of getting a small black shoulder bag for when I'm feeling dressier than usual.

![](/images/blog/2022/09/omybag-amsterdam-becks-bum-bag-1-1.jpeg)

Shot with Fujifilm X-E3 35mm f1.4


What's in my everyday carry


## What is Lighthouse?

[Lighthouse](https://web.dev/measure/) is a tool for measuring page quality that gives you tips and recommendations in improving user experience. It gives you a score of up to 100 based on performance, accessibility, best practices and SEO.

## Is it really that important?

It's easy to fall into the trap of optimizing your Lighthouse score and trying to reach 100. It's satisfying to make small tweaks to your code and see that number go up and turn green.

It's easier to optimize what we can quantify. That's why we measure career success with salary and net worth, rather than job satisfaction and freedom. It's the same for school and some people's (🙋) obsession with grades. **Don't confuse the metric (Lighthouse score) for the goal (good user experience).**

If Lighthouse tells you that you have some major issues on your site, sure, go ahead and fix it. But focus on the goal. At a certain point, **there are other things you can do for your site that have much higher impact than getting your score from 90 to 100**.

## Lighthouse scores of successful websites

Overengineering distracts you from the most important things. Let's go over some famous websites and their Lighthouse scores.

### 1\. [RemoteOK](https://remoteok.io/) - a directory of remote jobs, making over $2M/year

![RemoteOK Lighthouse score](/images/blog/2022/05/image-17.png)

### 2\. [Upwork](upwork.com) - the world's leading marketplace for freelancers

![Upwork Lighthouse score](/images/blog/2022/05/image-19.png)

### 3\. [Web3 Career](https://web3.career/) - the #1 result when you search ["web3 jobs" on Google](https://www.google.com/search?q=web3+jobs)

![](/images/blog/2022/05/image-18.png)

## Instead of optimizing your Lighthouse score, ask yourself these questions.

### Does your site work well in all breakpoints?

We usually design for desktop first. Chances are, you have a high percentage of mobile users, as we're on our phones all. the. time. So don't treat your mobile experience as an after thought. It might even be more important than desktop.

### What's the goal of your website, and is it designed in a way that makes your users do what you want?

This is called a call-to-action (CTA). Whether it's a portfolio site, landing page, e-commerce or SaaS, **you should know what you want your users to do before leaving**, like:

*   For a portfolio website, you want leads to contact you and discuss potential work.
*   For a SaaS landing page, you want users to sign up for a free trial.
*   For a blog, you want users to subscribe to your newsletter.

Make your CTA loud and clear by:

*   Making your CTA buttons stand out.
*   Writing copy that leads users to click those CTA's.
*   Having a CTA section at the bottom, which users see after they've read and understood what you're offering.

![Ghost CTA section](/images/blog/2022/05/image-26.png)

### What do my pages look like when shared on social media?

You've written an awesome blog post. The content is absolutely 🔥. This is gonna bring a lot of value to your readers. Then you share the link on Twitter and the preview looks nothing like the blog post you were trying to tell everyone about. 👎

Make sure you have your meta image, title and preview right. Test them on [Facebook](https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fdev.to%2Fseattledataguy%2Fthe-interview-study-guide-for-software-engineers-764) and [Twitter](https://cards-dev.twitter.com/validator).

![centered.app shared on Telegram](/images/blog/2022/05/image-25.png)

### What can you do to make users click throughout your site and go to different pages?

Once you get somebody to a page on your site, take advantage of it and **make it easy for them to navigate to other pages**. Here are a few examples:

On each blog post, talk a bit about yourself and add relevant links to get to know you more.

![ahrefs author section](/images/blog/2022/05/image-22.png)

For products or projects or blog posts, show related content that says something along the lines of: "You might like this.."

![Zara related products section](/images/blog/2022/05/image-23.png)

Breadcrumbs to go back to pages up the hierarchy.

![Ghost breadcrumb example](/images/blog/2022/05/image-21.png)

Mega menu for a high level overview of your site.

![Stripe mega menu](/images/blog/2022/05/image-24.png)

## Summary

Lighthouse is a great tool to detect problems with your site, and they tell you what you can do to fix those problems. That's great, but don't get stuck overengineering. Think about what other tasks you can work on that have higher impact.


Tech

Do this before optimizing your Lighthouse score


Writing code and building a user interface that does what it’s supposed to do makes you a frontend developer. When you’ve delivered features, then you’ve done your job.

If you're aiming for "good enough", then you can stop here. But if you want to stand out, go the extra mile and delivery high quality work, then follow these steps.

## 1\. Write reusable components. Duplicate code leads to inconsistency.

Sometimes you think to yourself, _"It's only a few lines. I'm just gonna copy and paste this because creating a new component takes time."_ Then you end up with problems like:

*   Some buttons have a hover effect, and some don't.
*   Your borders are using a different shade of gray.
*   The spacing between your button label and icon are just a tad bit different.

Doesn't sound like a big deal, right?

**You'll have these minor inconsistencies everywhere. They add up, and you'll end up with a website that just looks "off" and not clean.**

## 2\. Create a style guide.

💡

A style guide is a documentation of your website design. It includes a list of components and their variations, typography styles, icons, color palette and anything else being reused. It helps you achieve a consistent look throughout your site.  
  
**If you already created reusable components, but you don't know what components already exist, then what's the point?** You'll end up with different versions of the same thing anyway.

You can make it 100% your own like [Starbucks](https://www.starbucks.com/developer/pattern-library), or you can use [Storybook](https://storybook.js.org/) to speed things up. Storybook lets you change the parameters to your components through the UI, and you don't have to spend time designing your own pages.

Here's a peek at [GitHub's different buttons](https://61a90feace7802003a4d9c45-egptltpdss.chromatic.com/?path=/story/composite-components-button2--danger-button&args=size:large). You can view the different sizes too. [GitHub's Storybook is public, along with many others.](https://storybook.js.org/showcase/)

![Storybook example from GitHub](/images/blog/2022/03/Screen-Shot-2022-03-24-at-2.24.58-PM.png)

## 3\. Pay attention to spacing.

If you're being told multiple times by designers to "move this 5 pixels to the right". Don't roll your eyes 🙄. They're asking you for good reason. **A few pixels might not seem like a big deal, but it could be the difference between something looking "off" and just right.** Remember, the small things add up.

Here's an example from Refactoring UI about bad spacing vs good spacing. In this example, there is too much space between elements. You might also end up with the opposite and get things too cramped up.

![Example of bad spacing from Refactoring UI book](/images/blog/2022/03/Screen-Shot-2022-03-24-at-2.42.02-PM.png)

Here's an improved version. Much better!

![Example of good spacing from Refactoring UI book](/images/blog/2022/03/Screen-Shot-2022-03-24-at-2.43.06-PM.png)

The ratings are grouped closely together, which tells you that they're related. The ratings are also now closer to the title "50 customer reviews", so you know that this title is referring to the ratings below it. They belong together. "Review this product" and "share your thoughts" are also grouped together.

They go more in depth about spacing (and a lot more design topics) in the [Refactoring UI](https://www.refactoringui.com/book) book. This is a great "design for developers" book, and such an easy read!

### 4\. Learn design.

As a frontend developer, you will work closely with designers. A good sense of design and an interest in design will let you do your job better.

🧠

A designer isn't gonna provide you 100% of the details you need. They might provide you with a mobile and desktop version, and sometimes tablet, but what about all those breakpoints in between? What about all the different states?  
  
In an ideal world, you'll have most of the information. In reality, **you will have to fill in the gaps and do what makes most sense**. This is true for implementing functionalities and not just aesthetics.

You don't have to geek out about design if that's not a genuine interest that you have, but if it is, then be open about your interest and tell your designer teammates about some ideas you have or cool designs you've come across.

In return, they'll also be more open to sharing ideas with you. Together, you can improve the overall UX and create a product that you're both proud of.

## 5\. Add subtle transitions.

I'm just gonna say it for the third time.. Small things add up. There are some small improvements you can make to a website. They're subtle and easy to implement.

For example, when changing a background color of a button, add a simple transition. Here's a transition I copied from Tailwind.

```css
transition-property: color,background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
```

You can also add a shadow on hover, and move the element a few pixels up like in [Rachel's portfolio site](https://www.rachelhow.com/).

![](/images/blog/2022/03/Screen-Shot-2022-03-24-at-3.10.40-PM.png)

Or add an animation when your [hamburger menu icon turns into a close icon](https://codepen.io/designcouch/pen/ExvwPY), or when your [arrow icon changes direction](https://codepen.io/rezk/pen/PegNRY).

## Summary

Frontend development is not just about coding and making things work. To deliver great UX, it takes attention to detail, consistency and a good sense of design.

Take inspiration from other websites. When you come across a website that you like, think about why you like it, and how you can apply that to your own work in the future. Keep learning, and enjoy the process!

Any tips you'd like to add? Share it with me on [Twitter](https://twitter.com/trishathecookie)!


5 actionable steps to becoming a better frontend developer


A portfolio website is a way to market your skills as a developer. It's like a resume, but 10x better. This article talks about what content should be included in your portfolio. This is the most important part.

Creating an entire website from scratch vs a resume in a PDF is a lot more effort though, so why do it?

## The job market is competitive.

I've applied for hundreds of jobs. I've gone through multi-step application processes, spending hours and hours on technical exams only to get to the last step and get rejected. You can be a good fit and still not get the job, because this isn't just about how skilled you are as a developer, but also about how you're able to make companies believe that.

If you want a remote job, it gets even harder. According to this [article by the founder of remoteok.io](https://levels.io/the-odds-of-getting-a-remote-job/) (one of the most popular job boards for remote jobs), the average remote job gets 34% more applicants than a regular job. The odds of getting a remote job are less than 1%. Out of hundreds of applicants, how can you stand out and be the one who gets the job?

This is not to discourage you. You can play the numbers game and apply for a lot of jobs, then increase your chances by improving your skills and marketing yourself well through your portfolio website. It's certainly possible. Or you can also build an online presence and grow your network, so that companies reach out to you rather than the other way around. Either way, it's crucial to have a website - one place where clients can learn about your experience, and why they should choose you over everyone else.

## You can do this.

Creating your own website is a lot of work. I encourage you to make the simplest version of your site first - like an MVP, and you can iterate and add more content over time. One page is better than nothing.

Let's go over the different sections that your website MUST have, and some sections that are also great to have.

Don't be afraid to take inspiration from other web developer portfolios.

## Full stack web developer portfolio examples

*   [Steve](https://steve.ly/)
*   [Trisha](https://trishalim.com/)
*   [John](https://johnrock.me/)

## Frontend web developer portfolio examples

*   [David](https://darn.es/)
*   [Olaolu](https://olaolu.dev/)
*   [Rachel](https://www.rachelhow.com/)

## What to include in a portfolio website as a web developer

### 1\. Hero Section

This is the first thing the reader sees on your website - kind of like a header. If they only had 1 minute to decide if they should keep reading or close the tab, what do you have to say?

The goal is to tell them that you are good at what you do, and you have the right experience that makes you a good fit for the job. For me, these are some points that are important to mention:

*   I'm an experienced frontend engineer.
*   I use React, Next.js and TypeScript.
*   I've done great work with a lot of companies.
*   I've worked remotely for years.

So if they are looking for a React developer for their remote team, it's possible that I am a great addition, and they keep scrolling to find out more.

### 2\. List of Projects

They want someone to work on their project. If you've been successful doing something similar in the past, you might be be able to replicate that success for them. This is your proof of work.

*   So what have you worked on? Make a list of everything. Remember that big project where you added a few features and fixed some bugs, with 20 other people on the team? Yeah, write that down too.
*   Which one of these are you most proud of? Put that on top of the list.
*   Which ones did you enjoy working on the most? Put these on top as well, so that you are more likely to land on similar gigs.

### 3\. Details for each project

What's the project? What was your contribution? What tech did you use? Add some links to see the demo and a Github repository (if public). Add some screenshots to make them curious. See [this](https://www.trishalim.com/projects/nzst) and [this](https://steve.ly/projects/open-orchestras) example.

### 4\. Call to Action

The reader is interested in working with you. What should they do next? Email you, fill out a form, DM on twitter, etc. Make this stand out using a big button.

## Some more (optional) things you can add that will help a lot...

These are great-to-haves. You don't have to add these, but if you do, it makes a big difference.

### 5\. Experience/CV/ Resume

This is a timeline of your work experience throughout the years. Try to make this exactly the same as your LinkedIn profile's work experience section.

*   A list of your work history
*   For each role, what were you responsible for? What did you contribute? Any particular achievement there that stands out and maybe worth noting? Exaggerate a bit, especially if you're a minority. We tend to minimize our achievements, but now's the time to do the opposite.
*   Dates

### 6\. Blog Posts

I was once told that I didn't have "proof" that I knew React. I had some projects using React, but none of them were open source, so I had no code to show them. I could have spent a week building a side project, but I was short on time. Instead, I spent a day writing an article about React Context.

Blogging is a great way to showcase your knowledge without building out an entire project. If you teach about a topic and do it well, your readers will think that you are an expert on said topic. If you're not an expert, that's totally okay. You just need to know a bit more than the person reading it.

### 7\. Projects page grouped by skill

If a potential client is looking for someone experienced in, let's say, Ruby on Rails, then it would be great to have a page solely decided to "Ruby on Rails Projects". You already put in content for all your projects. Grouping them by tech/skill provides an easy way to find your relevant experience.

![](/images/blog/2022/03/image.png)

### 8\. Services Offered

This is more applicable to freelancers who know what they want to work on. I have an interest in creating content-managed sites, so I explicitly offer this service.

![](/images/blog/2022/03/image-1.png)

### 9\. Social Links

If you have a social media presence, add links here. Make sure there's not any red flags on there that will turn potential clients away.

## Your own portfolio website is also a part of your portfolio.

Make sure your website is well-made, as this reflects on you. I once landed a freelance gig partly because the client loved [my website](https://trishalim.com/)! If you're not a designer, going for a clean and minimal design is the safer option. And be conscious about your [Lighthouse score](https://developers.google.com/web/tools/lighthouse).

## Web Developer Portfolio Template

I worked on my website for weeks, and I'm really proud of how it turned out! I decided to share it with you. If you don't wanna spend hours on end designing and coding, [just use my template](https://trishalim.gumroad.com/l/portfolio-website-template-for-software-developers).

Do you already have a portfolio website? If so, share in the comments below! 🤩


How to make a web developer portfolio in 2022


This dark mode web3 aesthetic looks very cool and futuristic. They all have some common designs that achieve this look. Taking inspiration from [The Graph](https://thegraph.com/), [ARCx Money](http://arcx.money/), [Rabbithole](https://rabbithole.gg/), [Sushi Swap](https://sushi.com/), [Buildspace](https://buildspace.so/) (among others), here are some simple styles you can add to your app:

1.  Gradient backgrounds
2.  Glowing effect
3.  Bright and white text over a dark background
4.  Semi transparent backgrounds
5.  A quick and easy transition on hover

Let's go through how we can apply these styles to texts, buttons and backgrounds.

In each of these examples, we have a dark background and white text over it. Let's start with some text styles.

## Text styles to create the web3 look

![Web3 text styles](/images/blog/devto/devto-0.png)

Refer to this [codepen](https://codepen.io/trishalim/pen/vYJZpxL).

### 1\. Glow effect

![Example text with Glow effect](/images/blog/devto/devto-1.png)

  

```
<h1 class="text-glow">text glow effect</h1>
```

```
.text-glow \{
  text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
\}
```

You can use this effect for headings, or to emphasize a certain word in a heading, or as a hover effect for links. [The Graph](https://thegraph.com/) uses this effect a lot, and I'm here for it!

![Glowing text effect example from The Graph](/images/blog/devto/devto-2.png)

### 2\. Gradient background effect

![Text example with gradient background effect](/images/blog/devto/devto-3.png)

  

```
<h1><span class="text-gradient">text gradient effect</span></h1>
```

```
.text-gradient \{
  background: linear-gradient(to right, #30CFD0, #c43ad6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
\}
```

[Buildspace](https://buildspace.so/) uses this style to emphasize words in a heading. [Rare Blocks](https://rareblocks.xyz/) also uses it to emphasize words in a paragraph. The added bold font weight makes it stand out even more.

![Gradient text effect example from Rare Blocks](/images/blog/devto/devto-4.png)

### 3\. Combine the gradient and glow effect. Use the gradient to emphasize certain words in a phrase.

![Gradient + Glow effect on buttons](/images/blog/devto/devto-5.png)

  

```
<h1 class="text-glow">
  <span class="text-gradient">text gradient</span> 
  with glow effect
</h1>
```

Now that we have some text effects, let's move on to buttons.

## Button styles to create the web3 look

![Button styles to create the web3 look](/images/blog/devto/devto-6.png)

All these effects can be found in this [codepen](https://codepen.io/trishalim/pen/WNEOdWK).

First, let's define the colors we'll be using. I'm going for purple. These are `rgb` colors that we will later on use with different opacity levels.  

```
:root \{
  /* violet */
  --primary-color: 111, 76, 255;

  /* white */
  --text-color: 256, 256, 256;
\}
```

Let's also define the base styling of the button. We will add modifier classes later to create different styles.  

![Base styling of button](/images/blog/devto/devto-7.png)

  

```
<button class="btn">Button</button>
```

```
.btn \{
  font-family: sans-serif;
  font-size: 18px;
  padding: 12px 32px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-radius: 50px;
\}
```

### 1\. Glow on hover

![Example for buttons with Glow on Hover effect](/images/blog/devto/devto-8.png)

  

```
<button class="btn btn-glow">Glow on Hover</button>
```

```
.btn-glow:hover \{
  box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
\}
```

Make sure to add a transition. A simple 0.3s transition makes a huge difference.  

```
.btn \{
  transition: all 0.3s ease;
\}

.btn:hover \{
  transition: all 0.3s ease;
\}
```

### 2\. A bright background with white text.

Let's also use the glow effect on this one.  

![Bright background with white text on button](/images/blog/devto/devto-9.png)

  

```
.btn-primary \{
  background-color: rgb(var(--primary-color));
  border: 1px solid rgb(var(--primary-color));
  color: rgb(var(--text-color));
\}
```

```
<button class="btn btn-glow btn-primary">Primary Button</button>
```

### 3\. A semi transparent background

![Semi transparent background effect on button](/images/blog/devto/devto-10.png)

  

```
.btn-semi-transparent \{
  background-color: rgba(var(--primary-color), 0.15);
  border: 1px solid rgba(var(--primary-color), 0.25);
  color: rgba(var(--text-color), 0.8);
\}
```

Let's make the colors a tiny bit brighter on hover. Again, this is a small change that actually makes a big difference in the experience.  

```
.btn-semi-transparent:hover \{
  background-color: rgba(var(--primary-color), 0.35);
  border: 1px solid rgba(var(--primary-color), 0.5);
  color: rgba(var(--text-color), 0.9);
\}
```

Let's continue to use the glow effect.

![Glow effect + semi transparent on button](/images/blog/devto/devto-11.png)

  

```
<button class="btn btn-semi-transparent btn-glow">Semi Transparent Button</button>
```

See this in action on [The Graph's landing page](https://thegraph.com/).

![Semi transparent buttons on The Graph](/images/blog/devto/devto-12.png)

### 4\. Gradient background

![Button with gradient background](/images/blog/devto/devto-13.png)

  

```
.btn-gradient \{
  background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167));
  border: 0;
  color: rgba(var(--text-color));
\}
```

```
<button class="btn btn-gradient btn-glow">Gradient Button</button>
```

This is probably the most common button styling that I see on web3 sites such as [Sushi Swap](https://sushi.com/) and [Buildspace](https://buildspace.so/).

![Gradient button example from Buildspace](/images/blog/devto/devto-14.png)

### 5\. Gradient border

![Button with gradient border](/images/blog/devto/devto-15.png)

  

```
.btn-gradient-border \{
  color: rgb(var(--text-color));
  border: 2px double transparent;
  background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
\}
```

```
<button class="btn btn-gradient-border btn-glow">
  Gradient Border Button
</button>
```

This is inspired by [ARCx Money](https://arcx.money/passport) and [Sushi Swap](https://sushi.com/).

## Blurred Backgrounds to create the web3 look

[Here's the code for reference.](https://codepen.io/trishalim/pen/jOLwZXO)

For this, we are going to use this galaxy image from Unsplash. Swap this out to experiment.  

![Sample galaxy image from Unsplash](/images/blog/devto/devto-16.png)

First, let's create a card.  

```
<div class="card">
  <h1>Some text here</h1>
</div>
```

These styles aren't necessary, except for `position: relative`.  

```
.card \{
  margin: 1rem;
  padding: 1rem;
  height: 300px;
  width: 300px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
\}
```

Let's add the image as a background.  

```
.bg-blur \{
  overflow: hidden;
\}
.bg-blur::before \{
  content: '';
  background-image: var(--bg-image);
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
\}
```

Now, let's blur the image to create a gradient look using the `filter` property.  

```
.bg-blur::before \{
  filter: blur(30px);
\}
```

![Blurred image effect](/images/blog/devto/devto-17.png)

In most cases, you don't need an image to achieve a similar effect. You can do it with a gradient background, which Buildspace does really well!  

![Gradient background on card from Buildspace](/images/blog/devto/devto-18.png)

But with an image, you can have dynamic colors. Here's an example from [The Graph](https://thegraph.com/explorer). They take the logo, add the blur effect, set that as a background on the card and put the logo on top of it.  

![Dynamic blurred background from The Graph](/images/blog/devto/devto-19.png)

[Rabbithole](https://rabbithole.gg/) also uses this effect to match their hero background colors with their hero image. See how the background image is just a blurred version of the rabbit image on the right?  

![Rabbithole example with blurred background effect](/images/blog/devto/devto-20.png)

And there you have it! You can start shipping your next web3 project and achieve that web3 aesthetic. Don't forget that you can find all these here:

*   [Web3 text styles](https://codepen.io/trishalim/pen/vYJZpxL)
*   [Web3 button styles](https://codepen.io/trishalim/details/WNEOdWK)
*   [Web3 blurred background style](https://codepen.io/trishalim/pen/jOLwZXO)

I hope you enjoyed and learned something from this article! If you'd like to see more of this, let me know in the comments. [You can also learn more about me here](https://trishalim.com/) or [download my website template](https://trishalim.gumroad.com/l/portfolio-website-template-for-software-developers).

PS: I currently have availability for a frontend role and I'm saving that for a web3 project. 😉

Meanwhile, I'll leave you with this beauty that is [ARCx's passport designs](https://arcx.money/skins). 😍  

![ARCx passport design](/images/blog/devto/devto-21.png)


CSS tricks to create that dark futuristic web3 look


Forms are very common in web apps. We are going to be creating forms over and over again when working as a developer. What makes React fun is that we can take common patterns like this and turn them into reusable components, making our development life easier and our code shorter.

This is for those who already know:

*   [React State](https://reactjs.org/docs/state-and-lifecycle.html)
*   [useState()](https://reactjs.org/docs/hooks-intro.html) hook

and would like to learn about [React Context](https://reactjs.org/docs/context.html) which "provides a way to pass data through the component tree without having to pass props down manually at every level." If you think [Redux sucks](https://twitter.com/thekitze/status/1104514942152175616), then keep reading, because Context is an alternative to Redux.

If you're having trouble, you can see [the finished code here](https://github.com/trishalim/react-reusable-form-tutorial) or leave a comment below.

## Let's start by creating a React app.

You can create your own React app but I suggest cloning this repository instead. I added some CSS, since I will not be explaining that.  
`git clone https://github.com/trishalim/react-reusable-form-tutorial-boilerplate.git`

Go into that directory and run `npm install` and `npm start`.

## Creating a reusable  component called FormInput

Create a new filed named `FormInput.js` with the following code:

```jsx
import './FormInput.css';
import \{ useState \} from 'react';

function FormInput(props) \{
  const \{ label \} = props;

  const [value, setValue] = useState('');
  const onChange = (event) => \{
    setValue(event.target.value);
  \};

  return (
    <div className="FormInput">
      <label>\{label\}</label>
      <input
        type="text" 
        value=\{value\}
        onChange=\{onChange\}
      />
    </div>
  )
\}

export default FormInput;
```

This component has a custom `label` prop, and handles changing of the input value through a state.

Use this new component in `App.js` by adding the following code:

```jsx
<FormInput label="First Name" />
<FormInput label="Last Name" />
```

Don't forget to import:  
`import FormInput from './FormInput';`

You should end up with this:  

![image](/images/blog/devto/devto-22.png)

It would be useful if our FormInput component can handle different types of  fields. So let's add a `type` prop to allow for custom types.

```jsx
function FormInput(props) \{
  // Set default type to "text"
  const \{ label, type = 'text' \} = props;

  const [value, setValue] = useState('');
  const onChange = (event) => \{
    setValue(event.target.value);
  \};

  return (
    <div className="FormInput">
      <label>\{label\}</label>
      <input
        type=\{type\}
        value=\{value\}
        onChange=\{onChange\}
      />
    </div>
  )
\}
```

Let's add email and password fields to `App.js`.

```jsx
<FormInput label="Email Address" type="email" />
<FormInput label="Password" type="password" />
```

Yay! Now our FormInput can do a tiny bit more.  

![image](/images/blog/devto/devto-23.png)

## Moving state to App.js.

We want to be able to retrieve the values of the form. Currently, `App` has no way of knowing the current state of the form. Let's fix that.

Add a form state in `App`.

```jsx
import \{ useState \} from 'react';

const [form, setForm] = useState(\{
  firstName: '',
  lastName: '',
  emailAddress: '',
  password: ''
\});
```

Add some new props to `FormInput`. Remove the state and change handlers in `FormInput`. These will be moved to the parent component `App`. You should end up with only this:

```jsx
function FormInput(props) \{
  const \{
    label, 
    type = 'text', 
    name, 
    value, 
    onChange
  \} = props;

  return (
    <div className="FormInput">
      <label>\{label\}</label>
      <input
        type=\{type\}
        name=\{name\}
        value=\{value\}
        onChange=\{onChange\}
      />
    </div>
  )
\}
```

Since we just removed the `value` state and change handler from `FormInput`, we have to add these from `App` and pass them on as props instead.

```jsx
<FormInput 
  label="First Name" 
  name="firstName" 
  value=\{form.firstName\}
  onChange=\{handleFormChange\} />
```

Do the same for Last Name, Email and Password fields.

```jsx
<FormInput 
  label="Last Name" 
  name="lastName" 
  value=\{form.lastName\}
  onChange=\{handleFormChange\} />
<FormInput 
  label="Email Address" 
  type="email" 
  name="emailAddress" 
  value=\{form.emailAddress\}
  onChange=\{handleFormChange\} />
<FormInput 
  label="Password" 
  type="password" 
  name="password" 
  value=\{form.password\}
  onChange=\{handleFormChange\} />
```

Time to define our change handler `handleFormChange`. Here we are modifying `form` state, but only the field that changed. For example, if you type on the First Name field, `form.firstName` will be updated.

```jsx
  const handleFormChange = (event) => \{
    // Clone form because we need to modify it
    const updatedForm = \{...form\};

    // Get the name of the field that caused this change event
    // Get the new value of this field
    // Assign new value to the appropriate form field
    updatedForm[event.target.name] = event.target.value;

    console.log('Form changed: ', updatedForm);

    // Update state
    setForm(updatedForm);
  \};
```

Now go into your browser and play around with the form. You should be able to see the changes reflected on your console as you type on any of the fields. That means our state in `App` is working!  

![image](/images/blog/devto/devto-24.png)

With some ES6 magic, we can shorten this to:

```jsx
const handleFormChange = (event) => \{
  // Get the name of the field that caused this change event
  // Get the new value of this field
  const \{ name, value \} = event.target;

  // Assign new value to the appropriate form field
  const updatedForm = \{
    ...form,
    [name]: value
  \};

  console.log('Form changed: ', updatedForm);

  // Update state
  setForm(updatedForm);
\};
```

Now our code is still pretty long. 🙄 Great news: all this logic inside `App` for handling the form state can be reused too!

## Creating a reusable Form component

Remember all that code we just added in `App`? Let's move all that to a new `Form` component.

```jsx
import \{ useState \} from 'react';
import './Form.css';

function Form(props) \{
  const \{ children \} = props;

  const [form, setForm] = useState(\{
    firstName: '',
    lastName: '',
    emailAddress: '',
    password: ''
  \});

  const handleFormChange = (event) => \{
    // Get the name of the field that caused this change event
    // Get the new value of this field
    const \{ name, value \} = event.target;

    // Assign new value to the appropriate form field
    const updatedForm = \{
      ...form,
      [name]: value
    \};

    console.log('Form changed: ', updatedForm);

    // Update state
    setForm(updatedForm);
  \};

  return (
    <form className="Form">
      \{children\}
    </form>
  );
\}

export default Form;
```

We have the `children` props so that we can later on write something like:

```jsx
<Form>
  <FormInput />
  <FormInput />
  <FormInput />
</Form>
```

which results to:

```jsx
<form className="form">
  <FormInput />
  <FormInput />
  <FormInput />
</form>
```

`App` should NOT have any fields anymore, only the `return` statement. Remove `form`, `setForm` and `handleFormChange`. This will result into an error:

![image](/images/blog/devto/devto-25.png)

`form` and `handleFormChange` are now undefined, since we moved them to `Form`. We need to be able to access these fields somehow. This is where React Context comes in.

## Use React Context to have access to form state and handleFormChange

[Context](https://reactjs.org/docs/context.html) provides another way to pass props to children, grandchildren, great grandchildren and so on - without having to pass them at every single level.

First, let's declare and initialize a Context in `Form.js`. Make sure to export this since we'll be using it in other components.

```jsx
import React from 'react';

export const FormContext = React.createContext(\{
  form: \{\},
  handleFormChange: () => \{\}
\});
```

These are the fields that we'd like to share to `Form`'s children.

Pass them from `Form` to `App` by wrapping `\{children\}` in `Form.js`'s return:

```jsx
<FormContext.Provider value=\{\{
  form,
  handleFormChange
\}\}>
  \{children\}
</FormContext.Provider>
```

With this, the children can access `form` and `handleFormChange`. In `App`, make to sure to import:  
`import Form, \{ FormContext \} from './Form';`

Wrap all the `FormInput` components:

```jsx
<Form>
  <FormContext.Consumer>
    \{(\{form, handleFormChange\}) => (
      \<>
        <FormInput 
          label="First Name" 
          name="firstName" 
          value=\{form.firstName\}
          onChange=\{handleFormChange\} />
        <FormInput 
          label="Last Name" 
          name="lastName" 
          value=\{form.lastName\}
          onChange=\{handleFormChange\} />
        <FormInput 
          label="Email Address" 
          type="email" 
          name="emailAddress" 
          value=\{form.emailAddress\}
          onChange=\{handleFormChange\} />
        <FormInput 
          label="Password" 
          type="password" 
          name="password" 
          value=\{form.password\}
          onChange=\{handleFormChange\} />
      </>
    )\}
  </FormContext.Consumer>
</Form>
```

Notice that here we are using `FormContext.Consumer`. This means that we are consuming some data from FormContext. In `Form`, we were passing data, thus `FormContext.Provider`.

Check your browser and play around with the form. The state should be reflecting. You'll see this in the console just like before.

The behavior didn't change, but now our code is more reusable. And you've learned how to use Context! 🎉

## Let's make our code shorter. More reusability!

Our code is still pretty long and repetitive. For every `FormInput`, we've had to write `value=\{form.xxx\}` and `onChange=\{handleFormChange\}`.

We can move this logic to `FormInput`. Instead of consuming `FormContext` in `App`, we can actually do that in `FormInput`. This is the great thing about Context compared to props. The fields become accessible down several levels.

In `FormInput`, let's use `FormContext`. This is another way to use a Context:

```jsx
const formContext = useContext(FormContext);
const \{ form, handleFormChange \} = formContext;
```

Don't forget to import:  
`import \{ useContext \} from 'react';`  
`import \{ FormContext \} from './Form';`

Now that we have access to the `form` state, we can set the input value from that:  
`value=\{form[name]\}`

And the change handler:  
`onChange=\{handleFormChange\}`

We no longer need `value` and `onChange` props here.

Your `FormInput.ts` should look like this:

```jsx
import './FormInput.css';
import \{ useContext \} from 'react';
import \{ FormContext \} from './Form';

function FormInput(props) \{
  const \{
    label, 
    type = 'text', 
    name,
  \} = props;

  const formContext = useContext(FormContext);
  const \{ form, handleFormChange \} = formContext;

  return (
    <div className="FormInput">
      <label>\{label\}</label>
      <input
        type=\{type\}
        name=\{name\}
        value=\{form[name]\}
        onChange=\{handleFormChange\}
      />
    </div>
  )
\}

export default FormInput;
```

Since `FormInput` now handles the use of FormContext, we can remove lots of code in `App.js`:

```jsx
import './App.css';
import Form from './Form';
import FormInput from './FormInput';

function App() \{
  return (
    <div className="App">
      <h1>Sign Up</h1>

      <Form>
        <FormInput 
          label="First Name" 
          name="firstName" />
        <FormInput 
          label="Last Name" 
          name="lastName" />
        <FormInput 
          label="Email Address" 
          type="email" 
          name="emailAddress" />
        <FormInput 
          label="Password" 
          type="password" 
          name="password" />
      </Form>
    </div>
  );
\}

export default App;
```

Looking neat af! 🤩 Make sure it's still working as expected.

## One last thing!

Currently, `Form` always has the same fields `firstName, lastName, emailAddress, password`. We need to be able to customize this.

In `Form`, add a new prop called `formInitialValues` and use that as a default state:  
`const [form, setForm] = useState(formInitialValues);`

In `App`, make sure we're passing the new prop:

```jsx
<Form formInitialValues=\{\{
  firstName: '',
  lastName: '',
  emailAddress: '',
  password: ''
\}\}>
```

Great! Is it still working as expected? If so, let's proceed with adding another form.

## Create another form, and see how much easier it is now!

Here's a login form that I created:

```jsx
<Form formInitialValues=\{\{
  username: '',
  password: ''
\}\}>
  <FormInput
    label="Username"
    name="username" />
  <FormInput
    label="password"
    name="Password"
    type="password" />
</Form>
```

![image](/images/blog/devto/devto-26.png)

And there you have it!

You can also [download the finished code here](https://github.com/trishalim/react-reusable-form-tutorial).

You can continue adding more code to improve this:

1.  Add a submit button.
2.  Add a `required` boolean prop to FormInput. If there is no value, display an error message.
3.  Custom validations and error messages.
4.  Other input fields like `<select>`.

If you're having trouble in any of the steps, let me know below. I'd love to help you out!

If you enjoyed this and want to learn more about me, [check out my website](https://trishalim.com) and [download my website template](https://trishalim.gumroad.com/l/portfolio-website-template-for-software-developers).


Blog