Skip to content

Commit 9161d0c

Browse files
realstomanrealstoman
committed
change class to className
1 parent 68d9fa2 commit 9161d0c

File tree

4 files changed

+37
-35
lines changed

4 files changed

+37
-35
lines changed

‎src/components/AppBanner.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
const AppBanner = () => {
22
return (
3-
<section class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2">
4-
<div class="w-full sm:w-1/3 text-left">
5-
<h1 class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
3+
<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2">
4+
<div className="w-full sm:w-1/3 text-left">
5+
<h1 className="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
66
Hi, Iam Stoman
77
</h1>
8-
<p class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
8+
<p className="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
99
A Full-Stack Developer & Design Enthusiast
1010
</p>
11-
<div class="flex justify-center sm:block">
11+
<div className="flex justify-center sm:block">
1212
<a
1313
download="Stoman-Resume.pdf"
1414
href="/files/Stoman-Resume.pdf"
15-
class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
15+
className="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
1616
aria-label="Download Resume"
1717
>
1818
<i
1919
data-feather="arrow-down-circle"
20-
class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
20+
className="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
2121
></i>
22-
<span class="text-sm sm:text-lg">Download CV</span>
22+
<span className="text-sm sm:text-lg">Download CV</span>
2323
</a>
2424
</div>
2525
</div>
26-
<div class="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
26+
<div className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
2727
<img src="@/assets/images/developer.svg" alt="Developer" />
2828
</div>
2929
</section>

‎src/components/AppFooter.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
const AppFooter = () => {
22
return (
3-
<div class="container mx-auto ">
4-
<div class="innercontent pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
3+
<div className="container mx-auto">
4+
<div className="innercontent pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
55
{/* Footer social links start */}
6-
<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
7-
<p class="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5">
6+
<div className="flex flex-col justify-center items-center mb-12 sm:mb-28">
7+
<p className="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5">
88
Follow me
99
</p>
10-
<ul class="flex gap-4 sm:gap-8">
10+
<ul className="flex gap-4 sm:gap-8">
1111
<a
1212
href="/fb"
1313
target="__blank"
14-
class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
14+
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
1515
>
1616
FB
1717
</a>
@@ -20,13 +20,13 @@ const AppFooter = () => {
2020
{/* Footer social links end */}
2121

2222
{/* Footer copyright start */}
23-
<div class="flex justify-center items-center text-center">
24-
<div class="text-lg text-ternary-dark dark:text-ternary-light">
23+
<div className="flex justify-center items-center text-center">
24+
<div className="text-lg text-ternary-dark dark:text-ternary-light">
2525
&copy; Copyright 2021. Vue.js & TailwindCSS Portfolio.
2626
<a
2727
href="https://stoman.me"
2828
target="__blank"
29-
class="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline"
29+
className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline"
3030
>
3131
Stoman
3232
</a>

‎src/components/AppHeader.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
const AppHeader = () => {
22
return (
33
<div>
4-
<nav id="nav" class="sm:container sm:mx-auto">
4+
<nav id="nav" className="sm:container sm:mx-auto">
55
{/* Header start */}
6-
<div class="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center my-6">
6+
<div className="z-10 max-w-screen-lg xl:max-w-screen-xl block sm:flex sm:justify-between sm:items-center my-6">
77
{/* Header menu links and small screen hamburger menu start */}
8-
<div class="flex justify-between items-center px-4 sm:px-0">
8+
<div className="flex justify-between items-center px-4 sm:px-0">
99
<div>
1010
<a href="/">
1111
<img
1212
src="../images/logo-dark.svg"
13-
class="w-36"
13+
className="w-36"
1414
alt="Dark Logo"
1515
/>
1616
</a>
@@ -19,16 +19,16 @@ const AppHeader = () => {
1919
{/* Theme switcher small screen end */}
2020

2121
{/* Small screen hamburger menu start */}
22-
<div class="sm:hidden">
22+
<div className="sm:hidden">
2323
<button
2424
type="button"
25-
class="focus:outline-none"
25+
className="focus:outline-none"
2626
aria-label="Hamburger Menu"
2727
>
2828
<svg
2929
xmlns="http://www.w3.org/2000/svg"
3030
viewBox="0 0 24 24"
31-
class="h-7 w-7 fill-current text-secondary-dark dark:text-ternary-light"
31+
className="h-7 w-7 fill-current text-secondary-dark dark:text-ternary-light"
3232
>
3333
<path
3434
v-if="isOpen"
@@ -49,31 +49,31 @@ const AppHeader = () => {
4949
{/* Header menu links and small screen hamburger menu end */}
5050

5151
{/* Header links start*/}
52-
<div class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none">
52+
<div className="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none">
5353
<a
5454
href="/projects"
55-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2"
55+
className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2"
5656
aria-label="Projects"
5757
>
5858
Projects
5959
</a>
6060
<a
6161
href="/about"
62-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
62+
className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
6363
aria-label="About Me"
6464
>
6565
About Me
6666
</a>
6767
<a
6868
href="/contact"
69-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
69+
className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
7070
aria-label="Contact"
7171
>
7272
Contact
7373
</a>
74-
<div class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
74+
<div className="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
7575
<button
76-
class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"
76+
className="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"
7777
aria-label="Hire Me Button"
7878
>
7979
Hire Me
@@ -83,11 +83,11 @@ const AppHeader = () => {
8383
{/* Header links end */}
8484

8585
{/* Header right section buttons start */}
86-
<div class="hidden sm:flex justify-between items-center flex-col md:flex-row">
86+
<div className="hidden sm:flex justify-between items-center flex-col md:flex-row">
8787
{/* Hire me button start */}
8888
<div>
8989
<button
90-
class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
90+
className="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
9191
aria-label="Hire Me Button"
9292
>
9393
Hire Me

‎src/pages/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import AppBanner from '../components/AppBanner';
2+
13
const Home = () => {
24
return (
3-
<div>
4-
<h1>Home Page</h1>
5+
<div className="container mx-auto">
6+
<AppBanner></AppBanner>
57
</div>
68
);
79
};

0 commit comments

Comments
 (0)