This content originally appeared on DEV Community and was authored by sid
In my mind, I wrote this post just yesterday.
Yet, nearly four years have flown by, and with the benefit of hindsight, I can confidently say that my early attempts at web design were, well, let’s just say less-than-stellar. My old websites looked like they were designed by a 13-year-old because, well, they were—and yes, that 13-year-old was me 😂.
Since then:
- I've completed three more years of school. I’m practically a professional student now.
- I've spent countless hours studying the key fundamentals of good UI design. I’ve read more design articles than I care to admit.
- I've learned how to write better code. It no longer crashes… most of the time.
- I've read the book Refactoring UI by Adam Wathan, which completely changed the way I thought about designing UI.
But in all that time, I somehow neglected one tiny detail—yep, you guessed it—updating my website. Now, at 16, this comment:
really started to hit home.
I had spent so much time working on various projects but had nowhere to actually display them, and thus no platform to impress potential recruiters. Plus, if you looked at the UI of most of my projects, it was still somewhat mediocre. I needed something to wow them—so a few days ago, I decided to go all out and redesign and rebuild my personal website (or portfolio, if you prefer).
The Technology
All my previous personal websites were built with plain old HTML, CSS, and JavaScript. It’s simple and functional, but it’s like trying to make a gourmet meal with a microwave. Plus, I really wanted to show off my React skills (let’s be honest, that was the real reason).
So, I opted for Next.js. Why? Well, it seemed like a good choice at the time (and it turned out to be), plus I already had plenty of experience with it.
For the CSS, I went with Tailwind CSS (I mean, if you’re not using it in 2024, are you even real? 😅).
The Design
After spending way too much time staring at my old website, I decided light mode just wasn't cutting it. I wanted a drastic change, something that would make a real impact. And what better way to do that than by flipping the switch and going full dark mode? It's like your website starting a villain arc 😂.
For the font, I chose Inter. After many failed attempts with other fonts, especially on Windows devices where my sites looked like this:
...compared to this on macOS, I decided to stop using the default system fonts that Tailwind CSS provided.
Clearly, the font on Macs was superior. But with the default San Francisco font being exclusive to Apple, I needed an alternative. Enter Inter—one of the most stunning fonts I’ve ever seen and a perfect replacement for San Francisco.
See? Look how pretty that font looks 😋
For the main color, I went with purple. No real reason, just decided to mix things up from the indigo I used before.
The Layout
I started with the hero section. Easy, simple and...oh wait... did I mention there was a typewriter effect 💪.
After that I speedily moved onto thinking about the next section.
Revisiting Edvard's comment:
I really like the UI of the website. Also awesome color choices! But, in my opinion when it comes to personal websites you should put your skills and experience in focus. At least if your goal is the sell yourself to recruiters. I'm sorry but most recruiters won't care about blog posts. They care about what can you do and how long you've been doing it. A project portfolio is also important. Blog post do show a bit of your personality and interest for sure but a recruiter probably won't have time to read them. You might be the last application they're going through on a friday evening, the last thing you want to do is waste their time.
But other than that great work! And of course, this is just my opinion.
But, in my opinion, when it comes to personal websites, you should focus on your skills and experience, especially if your goal is to impress recruiters.
I decided to completely ditch the blog section. As much as you might enjoy my 1000s of words on different frameworks and tools, recruiters probably won’t. Plus, with my course load increasing as I enter my final two years of school, I just didn’t have the time to maintain a blog.
I also moved my skills section right to the top, front and center for all recruiters to see 😁. Oh, and why not add some cool effects? For the effect shown below, I used framer-motion, which they describe as "A production-ready motion library for React." I couldn’t agree more.
See? Look how cool that animation looks.
Next, I tackled the projects section. I showcased my top 4 projects on the homepage and included a link to the rest. For this section, I came up with a cool idea—a modal that would bounce up from the bottom of the page when a project was clicked, providing more details. And of course, framer-motion was the tool for the job.
After an hour, I had this:
I thought it was perfect until my friends weighed in:
- Too bouncy, tone it down a little.
- I like it, but you should really reduce the bounce.
- The bounciness looks jarring.
Initially, I resisted changing it. But after hours of tweaking, I realized that maybe, just maybe, the bounce was a bit excessive. So, I dialed it down.
Final version. Looks pretty good, right?
Finally, I added a contact section with links to my LinkedIn and email, and of course, a link to my GitHub profile for all the recruiters to see.
I also built a projects page, as mentioned before. It was very similar to the projects section on the homepage, sporting the same modals to showcase all the projects I’ve developed over the years (Note: this section is still a work in progress, so don’t be surprised if it’s a bit sparse).
So here I am, finally updating my website with all this hard-earned knowledge. Let’s just hope this one doesn’t end up looking like it was designed by a 16-year-old. Oh wait… 😅
You can go check out my website here and the code here. If you liked this post, please give the repo a star and consider following.
sidcraftscode
/
portfolio
My personal portfolio website, built with Next.js
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback…
Here are some screenshots
:
This content originally appeared on DEV Community and was authored by sid
sid | Sciencx (2024-08-07T23:54:35+00:00) Yet another website redesign.. Retrieved from https://www.scien.cx/2024/08/07/yet-another-website-redesign/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.
I really like the UI of the website. Also awesome color choices! But, in my opinion when it comes to personal websites you should put your skills and experience in focus. At least if your goal is the sell yourself to recruiters. I'm sorry but most recruiters won't care about blog posts. They care about what can you do and how long you've been doing it. A project portfolio is also important. Blog post do show a bit of your personality and interest for sure but a recruiter probably won't have time to read them. You might be the last application they're going through on a friday evening, the last thing you want to do is waste their time.
But other than that great work! And of course, this is just my opinion.