DEV Community 👩‍💻👨‍💻

Cover image for How I built my portfolio inspired by Visual Studio Code Editor
FourLineCode
FourLineCode

Posted on

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>;
}
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
ironcladdev profile image
IroncladDev

Pretty cool, but I wouldn't recommend building something only programmers will understand.

Collapse
 
afiasori profile image
AfiasOri

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!

Collapse
 
andrewreeman profile image
Andrew Reeman

Looks fantastic. Very impressive 😁

Collapse
 
stefanwrightcodes profile image
Stefan Wright

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?

Collapse
 
jzombie profile image
jzombie • Edited on

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.

Collapse
 
fourlinecode profile image
FourLineCode

i use const for actual code .. here i used let just to make lines shorter xD

Collapse
 
jzombie profile image
jzombie • Edited on

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.

Collapse
 
anubra266 profile image
Abraham

Awesome...but I think you should remove your email to prevent spamming.

12 APIs That You Will Love

>> Check out this classic DEV post <<