Unlock the Power of Sakura CSS: A Step-by-Step Guide to Building a Stunning Portfolio Site
Getting Started with Sakura CSS
In today’s fast-paced web development landscape, speed and style are crucial for capturing users’ attention. Sakura CSS, a lightweight and classless framework, is here to revolutionize the way you build websites. With its seven built-in themes and minimalistic approach, Sakura CSS empowers developers to create stunning portfolio sites without tedious work.
To begin our journey, we’ll set up a new project folder and create three subfolders: images, script, and styles. We’ll also create an index.html file, which will serve as the foundation of our portfolio site. Inside the styles folder, we’ll add the seven Sakura CSS themes, along with two custom CSS files: custom.css and normalize.css.
Initializing the App
Next, we’ll add the following code to our index.html file to initialize the app:
<head>
<link rel="stylesheet" href="styles/sakura.css" id="sakura-theme">
<link rel="stylesheet" href="styles/custom.css">
</head>Note that we’ve included two link tags that contain Sakura CSS and our custom CSS. The link tag containing Sakura CSS has an ID attribute that we’ll use to change our theme later.
Styling with Sakura CSS
Sakura CSS is designed to be lightweight and easy to use. It doesn’t rely on classes or special components, and instead, provides styles for specific HTML tags. With its seven built-in themes, you can easily switch between different looks and feels.
Adding a Theme Selector
To make our portfolio site more interactive, we’ll add a theme selector dropdown menu. This will allow users to switch between different Sakura CSS themes.
<select id="theme-selector">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
<!-- Add more options for other themes -->
</select>We’ll also add some JavaScript code to make the theme selector functional:
const themeSelector = document.getElementById('theme-selector');
const sakuraTheme = document.getElementById('sakura-theme');
themeSelector.addEventListener('change', () => {
const selectedTheme = themeSelector.value;
sakuraTheme.href = `styles/sakura-${selectedTheme}.css`;
});Building the Site Navigation Bar
A navigation bar is essential for any website. We’ll create a simple navigation bar with links to different sections of our portfolio site.
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Creating the Hero Section
The hero section is the first thing users see when they visit our website. We’ll make it count by adding a bold headline, a brief introduction, and a call-to-action button.
<section id="hero">
<h1>Welcome to my portfolio!</h1>
<p>I'm a web developer with a passion for building beautiful and functional websites.</p>
<<button>learn more<="" button>="" <="" section><="" code=""></button>learn>Adding the Experience Section
To showcase our skills and experience, we’ll create a table with a clean and simple design.
<section id="experience">
<table>
<thead>
<tr>
<th>Company</th>
<th>Position</th>
<th>Dates</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC Corporation</td>
<td>Web Developer</td>
<td>2020-Present</td>
</tr>
<!-- Add more rows for other experiences -->
</tbody>
</table>
</section>Creating the Skills Section
We’ll list our skills using an ordered list, divided into three categories.
<section id="skills">
<h2>Programming languages</h2>
<ol>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Front-end development</h2>
<ol>
<li>HTML/CSS</li>
<li>React</li>
<li>Angular</li>
</ol>
<h2>Back-end development</h2>
<ol>
<li>Node.js</li>
<li>Express</li>
<li>Ruby on Rails</li>
</ol>
</section>Implementing the Contact Section
A contact section is vital for any portfolio site. We’ll create a simple form with input fields and a submit button.
<section id="contact">
<form>
<label>Name:</label>
<input type="text" name="name">
<br>
<label>Email:</label>
<input type="email" name="email">
<br>
<label>Message:</label>
<textarea name="message"></textarea>
<br>
<button type="submit">Send</button>
</form>
</section>Building the Photo Flash Section
To add some visual flair to our portfolio site, we’ll create a photo flash section with responsive images.
<section id="photo-flash">
<div class="photo-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- Add more images -->
</div>
</section>Adding the Footer and Custom CSS
Finally, we’ll add a footer with copyright information and some custom CSS to enhance our portfolio site’s design.
/* Custom CSS */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.photo-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo-container img {
width: 30%;
margin: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* Add more custom CSS -->With these steps, you’ve successfully built a stunning portfolio site using Sakura CSS. Its minimalistic design and seven built-in themes make it perfect for quick prototyping and demonstration purposes.