Responsive Portfolio Website built with Svelte + Tailwind CSS and DaisyUI development?

I've been going through the Svelte tutorial the last couple of days and have decided to put together a project showcasing a responsive portfolio website created with the Svelte Framework. No matter what your talent is, Svelte will serve you well.

Getting Started

To setup a basic Svelte app, you can run the following command:

...then go into our project folder on the terminal and install the following dependencies:

...then start Rollup.

Navigate to localhost:8080 and you should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Adding Tailwind CSS + DaisyUI Setup

So now we have to install Tailwind CSS and DaisyUI peer-dependencies via npm using the following command:

We will now create a tailwind configuration file called tailwind.config.cjs in the base directory.

Add the following code to your tailwind.config.cjs file:

Next, we'll have to create a PostCSS configuration file (postcss.config.cjs) in our base directory.

Add the following code to your postcss.config.cjs file:

Inside our App.svelte file, we'll add the Tailwind directives to our css:

Now we have to check whether we have successfully implemented Tailwind & daisyUI into our Svelte project!

Add the following code:

We can confirm this by adding the following Tailwind classes to our App.svelte file:

Check the browser again and you should now see this:

Creating our Header Section

First we're going to fill our <main> tag with divs and classes. Now if you don't understand anything in the code then you can always comment it and look it up on the Tailwind.css Documentation.

If you followed along then you should have a responsive navbar alongside a completed hero section like so:

Creating our About Section

Let's start creating our About section with 2-4 sentences of lorem ipsum placeholder text. Next step is to add the following code and complete our About Section.

You should now see this:

Creating our Projects Section

Now go create our projects section and add the following lines to your App.Svelte file.

Now we can implement our postcss styles to complete our Portfolio section.

Creating our Clients section

We can now create our clients section by adding the following code:

You should now see this:

Creating our Hire Me Section

Next step is to create our Hire Me section with the following html + tailwindcss logic.

Add the following code:

You should now see this:

Recap

If you followed along then you should have completed the tutorial and finished off your responsive Devfolio website.

Now if you made it this far, then I am linking the code to my completed repo.

Try it for free.

License: 📝

This project is under The BSD Zero Clause License (0BSD). See the LICENSE for more information.

Contributions

Contributions are always welcome...

• Fork the repository
• Improve current program by
• improving functionality
• adding a new feature
• bug fixes
• Push your work and Create a Pull Request

Useful Resources

• https://loremipsum.io/generator/
• https://svelte.dev/
• https://codesandbox.io/?from-app=1
• https://daisyui.com/
• https://tailwindcss.com/docs/width