Today i want to share with you guys my portfolio that i built using React and TailwindCSS. The design is inspired by popular code editor Visual Studio Code with my favourite theme One Dark Pro.
Portfolio Site - Akmal Hossain
My Github - FourLineCode
I would really appreciate if you would check out some of my top projects. Also github stars are really appreciated 😊
My portfolio contains some of my personal informations, my favourite projects that I worked on and also some of my socials links. Each of these informations are in a separate tab. And all the informations are displayed as javascript code. It even has syntax highlighting similar to One Dark Pro theme.
The project is built using React and Nextjs with TailwindCSS for styling. I absolutely love and recommend tailwind as it makes it so much easier to style my projects without having to worry about consistency in design.
Each of the token types in my portfolio is a separate custom component designed with tailwindcss. For example - comments, keys, strings, numbers etc.
export function CommentCode({ children }: CodeProps) {
return <span className="text-gray-600">{children}</span>;
}
export function KeyCode({ children }: CodeProps) {
return <span className="text-purple-600">{children}</span>;
}
export function StringCode({ children }: CodeProps) {
return <span className="text-green-600">{children}</span>;
}
export function NumCode({ children }: CodeProps) {
return <span className="text-yellow-500">{children}</span>;
}
export function PropertyCode({ children }: CodeProps) {
return <span className="text-red-500">{children}</span>;
}
These components are wrapped around by a parent Code component that represents each line of the code editor.
export function Code({ line, error, warning, children }: Props) {
return (
<div className="flex py-0.5 space-x-4 text-gray-300">
<div className="flex items-center justify-end flex-shrink-0 w-12 text-gray-600 select-none">
{(error || warning) && (
<div
className={classNames(
"flex-shrink-0 w-2 h-2 mr-2 bg-opacity-60 rounded-full",
error ? "bg-red-500" : "bg-yellow-400"
)}
/>
)}
<div
className={classNames(
"flex-shrink-0",
error
? "text-red-500 text-opacity-60"
: warning && "text-yellow-400 text-opacity-60"
)}
>
{line}
</div>
</div>
<span>{children}</span>
{(error || warning) && (
<div
className={classNames(
"text-opacity-60",
error ? "text-red-500" : "text-yellow-400"
)}
>
{"◼ " + (error ? error : warning) + "..."}
</div>
)}
</div>
);
}
So each line of code looks something like this
<Code line={lineCount++}>
<KeyCode>let</KeyCode>
<BaseCode> name = </BaseCode>
<StringCode>"Akmal Hossain"</StringCode>
<BaseCode>;</BaseCode>
</Code>
<Code line={lineCount++}>
<KeyCode>let</KeyCode>
<BaseCode> age = </BaseCode>
<NumCode>21</NumCode>
<BaseCode>;</BaseCode>
</Code>
As for the tabs, they are all custom written components as I did not want to add an entire javascript library for only a single component. These components are easy to implement with some react fundamentals.
For a portfolio websites its also important to add SEO tags as this type of websites are shared in a lot of places. So I added some common tags such as -
<meta name="description" content="description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="your url" />
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="your url" />
<meta property="twitter:title" content="title" />
<meta property="twitter:description" content="description" />
And that basically is a short summary of how I built my portfolio.
Originally. I got the idea from Robin Malfait, who is a developer from tailwindlabs. He built his protfolio inspired by Neovim which is his code editor of choice. So I decided to build my own with the similar idea. My portfolio even has some similar jokes and easter eggs as his (I will change when I can come up with some of my own 😜).
I am still a beginner level developer and also this is my first post, So try to go easy on me. Any suggestions or helpful criticisms are also welcome.
Thank you, if you actually read through the entire thing (I highly doubt that as I wouldn't myself 😆).
Top comments (8)
Pretty cool, but I wouldn't recommend building something only programmers will understand.
I agree non developer won't appreciate it as much as a developer, but I believe everyone can navigate and understand the content.
I think its beautiful and useful. great job!
Looks fantastic. Very impressive 😁
I agree with the other comment, it's cool and it clearly had a lot of work go into it, but is the average Joe recruiter going to necessarily understand it and consume it easily?
The styling looks great, however I think you should be using const instead of let for a lot of these variables.
Of course, that's just my own opinion, and it still looks great.
i use const for actual code .. here i used let just to make lines shorter xD
Have to admit that I am a bit intrigued by the usage of the reverse mac title bar buttons in a web project. I'm doing it myself in a web project of my own.
Awesome...but I think you should remove your email to prevent spamming.