Hey there, hi!
This particular article is going to be about creating a landing page for your portfolio website using TUK’s template. Without further ado, let’s just jump right into it.
A brief recap of TUK
If you’re yet unaware of the UI kit that I use, I’ll give you a bit of a recap about it; it’s TUK, a UI kit made using Tailwind CSS. It’s got support for React, Angular, Vanilla JS, and upcoming support for Vue. It’s got more than 350 drop-in ready components and around 10 templates with around 50 screens.
Coming back to the point, I have already covered how you can create landing pages for your websites using different UI components provided by TUK. For this article, I wanted to explore something different. More and more designers and developers are using website portfolios to showcase their work. So, let’s look at how easy it is to create a landing page for a portfolio website using a TUK template.
Using a TUK template
Using a TUK template is fairly simple. You can create your landing page in a couple of steps:
Templates page
Visit the TUK website and go to the Templates page.
Scroll down to the Landing page section. Click on the Download HTML under the Portfolio Website.
Opening the template with VS Code
Once your download is complete, you can extract your downloaded file. Open your Portfolio with Visual Studio Code. When using the template file, you don’t have to worry about linking your Tailwind CSS with your HTML file; TUK automatically handles that for you.
Making changes to the template
Yes, it is as simple as visiting the website and downloading the template file. You can open your website with a live server in VS Code. You are now ready to begin making changes in your code.
Hero Section
Let’s look at the code of each section one by one. The first thing that you will need to change is the Hero section. Change the logo, you can add a png file of your name for personal branding or if you already have your logo, that’s even better. I added a wordmark logo with my name on it for my portfolio. Now, change the text on the header section to display your skills. You can add whatever you think best represents you as a designer or a developer. You can also change the image in the hero section. Add an image that complements your text.
Project showcase section
Move to the Project Showcase section. There you can change the images and text according to your projects. Add the images of your work along with the description of the project. Showcase your design and let your clients know why you are the best pick.
Blog Section
You can add the digital products that you want to sell in the Blog section. These can include logos, icons, UI designs, Illustrator library. Whatever product you are looking to sell can be added here with the description of the product.
Collaborator Section
Add the logos of your collaborators in the Collaborator section. I removed this section for now. You can add, change, and remove according to your needs.
Contact Section
The Contact section provides users with a medium to contact you. You can add your phone number, email, and other details to get users to get in touch with you. Modify the section according to your requirements.
Footer Section
Lastly comes the Footer section. You can add the social media icons depending on your accounts. Attach an icon to Behance if you are a developer with a large Behance following. You can also remove the icons of the footer section if they feel unessential.
Changing colors
I also wanted to change the background color of the blog and the contact section. I pressed Ctrl + F and searched for bg-gray-800 and using CTRL +H, replaced it with bg-teal-700. This allowed me to change all the colors of all the elements at the same time instead of doing it manually one by one.
Limitless freedom
An unlimited number of websites can be created using TUK components and templates. The main advantage of using TUK is that you can change the code of the components according to your design. You can also use the components present in the template section for your projects. It gives you complete freedom to play with different components to create the design of your choice.
I have been able to save a ridiculous amount of time since I started using TUK. If you are looking to create responsive and accessible designs, you should check out the TUK website.
