Noch eine Neugestaltung der Website.

In Gedanken habe ich diesen Beitrag erst gestern geschrieben.

OK. Also...ich hätte meine Website vielleicht schon wieder komplett neu aufgebaut

sid ・ 23. Dez. 21

#webdev #showdev #html #css

Dennoch sind fast vier Jahre wie im Flug vergangen, und im Nachhinein kann ich getrost sagen, dass meine ersten Versuche im Webdesign, nun ja,sagen wir einfach, alles andere als herausragend waren.Meine alten Websites sahen so aus, wie sie es waren entworfen von einem 13-Jährigen, weil, nun ja, siewaren– und ja, dieser 13-Jährige war ich?.

Seitdem:

• Ich habe drei weitere Schuljahre abgeschlossen. Ich bin jetzt praktisch ein professioneller Student.
• Ich habe unzählige Stunden damit verbracht, die wichtigsten Grundlagen eines guten UI-Designs zu studieren. Ich habe mehr Designartikel gelesen, als ich zugeben möchte.
• Ich habe gelernt, besseren Code zu schreiben. Es stürzt nicht mehr ab ... meistens.
• Ich habe das BuchRefactoring UIvon Adam Wathan gelesen, das meine Denkweise über das Design von UI völlig verändert hat.

Aber in der ganzen Zeit habe ich irgendwie ein kleines Detail vernachlässigt – ja, Sie haben es erraten – die Aktualisierung meiner Website. Jetzt, mit 16, dieser Kommentar:

Edvard Busck-Nielsen • 6. März 21

Mir gefällt die Benutzeroberfläche der Website sehr gut. Auch tolle Farbauswahl! Aber meiner Meinung nach sollten Sie bei persönlichen Websites Ihre Fähigkeiten und Erfahrungen in den Mittelpunkt stellen. Zumindest wenn Ihr Ziel darin besteht, sich an Personalvermittler zu verkaufen. Es tut mir leid, aber die meisten Personalvermittler interessieren sich nicht für Blogbeiträge. Sie kümmern sich darum, was Sie tun können und wie lange Sie es schon tun. Wichtig ist auch ein Projektportfolio. Blogbeiträge spiegeln sicherlich etwas von Ihrer Persönlichkeit und Ihrem Interesse wider, aber ein Personalvermittler wird wahrscheinlich keine Zeit haben, sie zu lesen. Du bist vielleicht die letzte Bewerbung, die sie an einem Freitagabend durchgehen, und das Letzte, was du tun willst, ist, ihre Zeit zu verschwenden.

Aber ansonsten tolle Arbeit! Und das ist natürlich nur meine Meinung.

真的开始击中要害了。

我花了很多时间在各种项目上工作，但没有地方实际展示它们，因此没有平台来打动潜在的招聘人员。另外，如果你看看我的大多数项目的用户界面，它仍然有点平庸。我需要一些东西让他们哇——所以几天前，我决定全力以赴，重新设计和重建我的个人网站（或作品集，如果你愿意的话）。

技术

我以前的所有个人网站都是用普通的旧式 HTML、CSS 和 JavaScript 构建的。它简单实用，但就像尝试用微波炉做一顿美食一样。另外，我真的很想展示我的 React 技能（说实话，这才是真正的原因）。

所以，我选择了 Next.js。为什么？嗯，当时这似乎是一个不错的选择（事实证明也是如此），而且我已经有足够的经验了。

对于 CSS，我选择了 Tailwind CSS（我的意思是，如果你在 2024 年不再使用它，你是真的吗？？）。

该设计

在花了太多时间盯着我的旧网站之后，我认为轻型模式并不能解决问题。我想要一个巨大的改变，一些能够产生真正影响的事情。还有什么比按下开关并进入全暗模式更好的方法呢？这就像你的网站开始了恶棍弧线？.

字体我选择了Inter。在多次尝试其他字体失败后，尤其是在 Windows 设备上，我的网站如下所示：

...与 macOS 上的相比，我决定停止使用 Tailwind CSS 提供的默认系统字体。

显然，Mac 上的字体更出色。但由于默认的 San Francisco 字体是 Apple 独有的，我需要一种替代字体。输入Inter——我见过的最令人惊叹的字体之一，也是 San Francisco 的完美替代品。

看到了吗？看看这个字体多漂亮？

主色我选择了紫色。没有真正的原因，只是决定将我之前用过的靛蓝混合起来。

布局

我从英雄部分开始。简单、简单……哦等等……我有没有提到有打字机效果？

之后我很快就开始思考下一部分。

重温爱德华的评论：

爱德华·布斯克-尼尔森 • 21 年 3 月 6 日

我真的很喜欢该网站的用户界面。还有很棒的颜色选择！但是，在我看来，当涉及到个人网站时，您应该重点关注您的技能和经验。至少如果你的目标是向招聘人员推销自己的话。抱歉，大多数招聘人员不会关心博客文章。他们关心你能做什么以及你做了多久。项目组合也很重要。博客文章确实展示了您的个性和兴趣，但招聘人员可能没有时间阅读它们。您可能是他们在周五晚上处理的最后一个申请，您最不想做的就是浪费他们的时间。

但除了那项伟大的工作！当然，这只是我的意见。

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 usedframer-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.

npm run dev # or yarn dev # or pnpm dev # or bun dev

여기 스크린샷이 있습니다


:

Das obige ist der detaillierte Inhalt vonNoch eine Neugestaltung der Website.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!