Nitin Raturi
Nitin Raturi's Software Engineering Blog

Follow

Nitin Raturi's Software Engineering Blog

Follow
Build a portfolio site with Neoblaze CSS Framework

Photo by Mailchimp on Unsplash

Build a portfolio site with Neoblaze CSS Framework

Nitin Raturi's photo
Nitin Raturi
ยทFeb 13, 2023ยท

3 min read

What is Neoblaze

Neoblaze is a modern css framework that helps you build beautiful interfaces with blazing speed. Neoblaze is a pure css framework with prebuilt components and different utilities that make it extremly modular and easy to customize.

Why Neoblaze?

Neoblaze makes it easy to build a modern grid based layout. It has support for different types of layout utilities and grid layout. With best in class documentaion, semantic classes it makes designing interfaces more intuitive and fun.

Getting Started

We will be building a minimalist portfolio with neoblaze. Let's get started by importing latest version Neoblaze from a cdn.

 https://cdn.jsdelivr.net/npm/neoblaze@0.1.3/dist/css/neoblaze.min.css
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio</title>
        <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/neoblaze@0.1.3/dist/css/neoblaze.min.css'>
    </head>
    <body>
        <div class="min-height-screen bg-gray--light">
        </div>
    </body>
</html>

bg-gray--light to set background color with colors utility.

Navigation

Navigation

<nav class="container mx-auto px-6">
    <ul class="d-flex flex-justify-around p-6">
        <li><a href="#">Jessica Don</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Let's Chat</a></li>
    </ul>
</nav>

The top navbar is built with flex utilities and container to center it.

Header Section

Neoblaze also has its own grid based layout to quickly build responsive layouts. The header section consists of commonly used two column layout.

In neoblaze layout class is used to define a grid container along with a layout type in this case layout--spacious-50-50 that divide a 12 column grid into 2 equal size columns. The layout columns are labeled as layout-main and layout-aside.

Header

<section class="container mx-auto px-6 py-10">
    <div class="layout layout--spacious-50-50">
      <div class="layout-aside place-self-center">
        <h1 class="heading-lg font-light leading-base">Hi, Iโ€™m Jessica.</h1>
        <p class="body-lg mt-4">I am Jessica Don, a skilled digital designer and web developer working with brands across the globe.</p>
      </div>
      <div class="layout-main">
        <img class="img-full" src="https://images.unsplash.com/photo-1560087637-bf797bc7796a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&h=1040&q=80" alt="profile" title="Unsplash" />
      </div>
    </div>
</section>

Grid Section

The project section is a grid with repetitive 2 columns. A layout class is used to define a grid container along with a layout type in this case layout-2-col .

Projects Grid

<section class="container mx-auto px-6 py-10" id="work">
    <h2 class="title-sm mb-2 border-t bd-gray py-4">PROJECTS</h2>
    <div class="layout layout-2-col gap-6">
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1674726253061-baba094ad8c7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Btanio</p>
                <p>Design</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1675453987972-48f9d721281b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Acconi</p>
                <p>Development</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1663094979869-008cff9ee311?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Hanser</p>
                <p>Design & Development</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1676223796799-3c6a82b22d1e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Ratioplt</p>
                <p>Design & Development</p>
            </div>
        </div>
    </div>
</section>

Footer

<section class="container mx-auto px-6 py-10" id="contact">
    <div class="text-center">
        <p class="title">Feel free to say hi.</p>
        <button class="btn btn-black rounded-full mt-2 px-8 py-4">GET IN TOUCH</button>
    </div>
<section>

Conclusion

Congrats!! ๐Ÿฅณ๐Ÿฅณ you just built your first site with Neoblaze. You can find the complete source code on codepen. Build amazing projects with Neoblaze and share it on twitter #madewithneoblaze. Thanks for reading.

Did you find this article valuable?

Support Nitin Raturi by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this