Build a portfolio site with Neoblaze CSS Framework
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
<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.
<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 .
<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
<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.