How I built my portfolio inspired by Visual Studio Code Editor

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"
                    )}
                >
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {"◼ " + (error ? error : warning) + "..."}
                </div>
            )}
        </div>
    );
}

So each line of code looks something like this

<Code line={lineCount++}>
    <KeyCode>let</KeyCode>
    <BaseCode> name = </BaseCode>
    <StringCode>&quot;Akmal Hossain&quot;</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 😆).