diff --git a/.github/workflows/automate-qa.yml b/.github/workflows/automate-qa.yml new file mode 100644 index 0000000..450ace8 --- /dev/null +++ b/.github/workflows/automate-qa.yml @@ -0,0 +1,36 @@ +name: Lint + +on: + # Trigger the workflow on push or pull request, + # but only for the main branch + push: + branches: + - master + pull_request: + branches: + - master + +jobs: + run-linters: + name: Run linters + runs-on: ubuntu-latest + + steps: + - name: Check out Git repository + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v1 + with: + node-version: 16 + + # ESLint and Prettier must be in `package.json` + - name: Install Node.js dependencies + run: npm ci + + - name: Run linters + uses: wearerequired/lint-action@v2 + with: + auto_fix: true + eslint: true + prettier: true diff --git a/firebase.json b/firebase.json index d9aec3c..f6b7ff0 100644 --- a/firebase.json +++ b/firebase.json @@ -2,11 +2,7 @@ "hosting": { "site": "thanurarukshan", "public": "build", - "ignore": [ - "firebase.json", - "**/.*", - "**/node_modules/**" - ], + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", diff --git a/package-lock.json b/package-lock.json index 69aec6d..f829475 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "portfolio2.0", "version": "0.1.0", "dependencies": { - "@emotion/react": "^11.11.0", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.2", @@ -2222,9 +2222,9 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "node_modules/@emotion/react": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz", - "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==", + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", diff --git a/public/index.html b/public/index.html index e575222..b10f8d7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/Aboutme.css b/src/Aboutme.css index 1d01348..db48bf2 100644 --- a/src/Aboutme.css +++ b/src/Aboutme.css @@ -1,73 +1,72 @@ @keyframes grow { - 0% { - scale: 100%; - } - 50% { - scale: 101%; - } - 100% { - scale: 100%; - } + 0% { + scale: 100%; + } + 50% { + scale: 101%; + } + 100% { + scale: 100%; + } } .Aboutme { - color: white; - min-width: 100vw; - min-height: 100vh; - /*background-color: black; */ - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; + color: white; + min-width: 100vw; + min-height: 100vh; + /*background-color: black; */ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } -.Aboutme-aboutme{ - font-size: 80px; +.Aboutme-aboutme { + font-size: 80px; } .Aboutme-dis { - max-width: 1000px; - text-align: justify; - font-size: 20px; + max-width: 1000px; + text-align: justify; + font-size: 20px; } .Aboutme-me { - width: 300px; - animation:grow 2s ease-in-out infinite; + width: 300px; + animation: grow 2s ease-in-out infinite; } .Aboutme-me:hover { - animation-play-state: paused; + animation-play-state: paused; } .Aboutme-edu-edu { - font-size: 40px; + font-size: 40px; } .Aboutme-cv { - color: black; - text-decoration: none; - padding: 20px; - background-color: white; - margin-top: 50px; - border-radius: 200px; - transition: 1s; - font-weight: 600; - user-select: none; - + color: black; + text-decoration: none; + padding: 20px; + background-color: white; + margin-top: 50px; + border-radius: 200px; + transition: 1s; + font-weight: 600; + user-select: none; } .Aboutme-cv:hover { - background-color: aqua; - transition: 1s !important; + background-color: aqua; + transition: 1s !important; } @media (max-width: 1200px) { - .Aboutme-dis { - max-width: 70%; - } - .Aboutme-aboutme { - font-size: 12vw; - } - .Aboutme-dis { - font-size: 16px; - } - .Aboutme-me { - width: 250px; - } -} \ No newline at end of file + .Aboutme-dis { + max-width: 70%; + } + .Aboutme-aboutme { + font-size: 12vw; + } + .Aboutme-dis { + font-size: 16px; + } + .Aboutme-me { + width: 250px; + } +} diff --git a/src/Aboutme.js b/src/Aboutme.js index 82fe7c0..38098c5 100644 --- a/src/Aboutme.js +++ b/src/Aboutme.js @@ -1,13 +1,13 @@ import "./Aboutme.css"; -import React, { useEffect } from 'react'; -import AOS from 'aos'; -import 'aos/dist/aos.css'; -import New from "./assets/New.pdf"; +import React, { useEffect } from "react"; +import AOS from "aos"; +import "aos/dist/aos.css"; +import New from "./assets/New.pdf"; function Aboutme() { const handleDownloadCV = () => { - window.open(New); - } + window.open(New); + }; useEffect(() => { AOS.init(); @@ -15,12 +15,26 @@ function Aboutme() { return (
- - Aboutme - Hey there! I am an engineering undergraduate with an IT background. I am self-motivated and a fun, friendly person who is always willing to try new things. I work well in groups as well as on my own because I like to set goals for myself that I can achieve, and I have good listening and communication skills. - Download CV + + + Aboutme + + + Hey there! I am an engineering undergraduate with an IT background. I am + self-motivated and a fun, friendly person who is always willing to try + new things. I work well in groups as well as on my own because I like to + set goals for myself that I can achieve, and I have good listening and + communication skills. + + + Download CV +
- ) + ); } export default Aboutme; diff --git a/src/App.css b/src/App.css index 01695ab..2759665 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,16 @@ @font-face { - font-family:"masque" ; + font-family: "masque"; src: url(../public/MASQUE__.ttf); - } @font-face { - font-family:"sans" ; + font-family: "sans"; src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); } - body { background-image: url(../public/flat-mountains.svg); - background-size:cover; - background-attachment: fixed; + background-size: cover; + background-attachment: fixed; display: flex; justify-content: center; align-items: center; @@ -26,7 +24,7 @@ body { justify-content: center; align-items: center; min-height: 100vh; - animation-name:appear; + animation-name: appear; animation-duration: 4s; } @@ -42,8 +40,6 @@ body { .App-name { font-family: "masque"; font-size: 50px; - - } @keyframes appear { from { @@ -107,26 +103,26 @@ body { animation: scroll 2s infinite; } .App-scroll span:nth-child(2) { - animation-delay: -.2s; + animation-delay: -0.2s; } .App-scroll span:nth-child(3) { - animation-delay: -.4s; + animation-delay: -0.4s; } @keyframes scroll { 0% { opacity: 0; - transform: rotate(45deg) translate(-20px,-20px); + transform: rotate(45deg) translate(-20px, -20px); } 50% { opacity: 1; } 100% { opacity: 0; - transform: rotate(45deg) translate(20px,20px); + transform: rotate(45deg) translate(20px, 20px); } } -@media (max-width:1200px) { +@media (max-width: 1200px) { .App-name { font-size: 7vw; } @@ -140,4 +136,4 @@ body { margin-top: 6px; max-width: 80%; } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index e7b2779..cd51a30 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,20 @@ -import React from 'react'; -import './App.css'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import EmailIcon from '@mui/icons-material/Email'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import {useTypewriter, Cursor} from 'react-simple-typewriter'; -import { GitHub } from '@mui/icons-material'; +import React from "react"; +import "./App.css"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import EmailIcon from "@mui/icons-material/Email"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import { useTypewriter, Cursor } from "react-simple-typewriter"; +import { GitHub } from "@mui/icons-material"; function App() { const [text] = useTypewriter({ - words: ['Engineering Undergraduate','Web Developer','App Developer','Graphic Designer'], + words: [ + "Engineering Undergraduate", + "Web Developer", + "App Developer", + "Graphic Designer", + ], loop: {}, }); @@ -31,23 +36,30 @@ function App() { H A N - -
+
# - - {text} - + {text}
- - - - - + + + + + + + + + + + + + + +
diff --git a/src/App.test.js b/src/App.test.js index 1f03afe..9382b9a 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,7 +1,7 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; +import { render, screen } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/Footer.css b/src/Footer.css index 399be98..bc06ea3 100644 --- a/src/Footer.css +++ b/src/Footer.css @@ -1,34 +1,31 @@ - .footer-main { - display: flex; - color: white; - background-color: #091d36; - padding: 200px 0px; - justify-content: center; - align-items: center; - min-width: 100vw; - + display: flex; + color: white; + background-color: #091d36; + padding: 200px 0px; + justify-content: center; + align-items: center; + min-width: 100vw; } .footer-main-flex { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - scale: 150%; - + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + scale: 150%; } .footer-main-icons a { - display: inline-flex; - color: white; - margin: 1px; + display: inline-flex; + color: white; + margin: 1px; } .footer-main-icons a:hover { - color:aqua; - transition: 0.5s; + color: aqua; + transition: 0.5s; } .footer-main-flex span { - font-size: 60%; + font-size: 60%; } diff --git a/src/Footer.js b/src/Footer.js index a4b8b1b..be5cbfd 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,29 +1,40 @@ import "./Footer.css"; -import React from 'react'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import EmailIcon from '@mui/icons-material/Email'; +import React from "react"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import EmailIcon from "@mui/icons-material/Email"; import { GitHub } from "@mui/icons-material"; function Footer() { return (
-
-
- - - - - -
- Copyright © 2023 | All Rights Reserved - Thanks for Visit - +
+
+ + + + + + + + + + + + + + +
+ + Copyright © 2023 | All Rights Reserved + + Thanks for Visit +
- ) + ); } -export default Footer \ No newline at end of file +export default Footer; diff --git a/src/Headerbar.css b/src/Headerbar.css index d9de4ce..4514aa3 100644 --- a/src/Headerbar.css +++ b/src/Headerbar.css @@ -1,42 +1,40 @@ @font-face { - font-family:"sans" ; - src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); - } + font-family: "sans"; + src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); +} body { - font-family: sans ; - scroll-behavior: smooth; + font-family: sans; + scroll-behavior: smooth; } .headerbar { - display: flex; - flex-direction: row; - justify-content: center; - padding: 2% 2%; - background-color: white; - color: black; - + display: flex; + flex-direction: row; + justify-content: center; + padding: 2% 2%; + background-color: white; + color: black; } .headerbar a { - text-decoration: none; - color: inherit; - padding: 10px; + text-decoration: none; + color: inherit; + padding: 10px; } .headerbar a:hover { - color: #BF40BF; - transition: 0.5s; + color: #bf40bf; + transition: 0.5s; } .headerbar-main { - - position: sticky; - top: 0px; - z-index: 100; + position: sticky; + top: 0px; + z-index: 100; } @media (orientation: portrait) { - .headerbar { - padding: 6% 4%; - } -} \ No newline at end of file + .headerbar { + padding: 6% 4%; + } +} diff --git a/src/Headerbar.js b/src/Headerbar.js index c6973f8..bdfff8d 100644 --- a/src/Headerbar.js +++ b/src/Headerbar.js @@ -1,9 +1,9 @@ import "./Headerbar.css"; -import React from 'react'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import EmailIcon from '@mui/icons-material/Email'; +import React from "react"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import EmailIcon from "@mui/icons-material/Email"; function Headerbar() { return ( @@ -12,7 +12,7 @@ function Headerbar() {
Home About me -
+
{/*
@@ -21,7 +21,7 @@ function Headerbar() {
*/}
- ) + ); } -export default Headerbar \ No newline at end of file +export default Headerbar; diff --git a/src/Logoslider.css b/src/Logoslider.css index 15ed1c8..019ee10 100644 --- a/src/Logoslider.css +++ b/src/Logoslider.css @@ -1,35 +1,33 @@ .logos { - width: 100vw; - overflow: hidden; - white-space: nowrap; - position: relative; - - + width: 100vw; + overflow: hidden; + white-space: nowrap; + position: relative; } .logo-slider img { - max-height: 100px; - padding: 10px 20px; + max-height: 100px; + padding: 10px 20px; } .logo-slider { - display: inline-block; - white-space: nowrap; - animation: 10s slide linear infinite; - opacity: 50%; + display: inline-block; + white-space: nowrap; + animation: 10s slide linear infinite; + opacity: 50%; } @keyframes slide { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-100%); - } + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-100%); + } } @media (max-width: 1200px) { - .logo-slider img { - max-height: 10vh; - padding: 10px 12px; - } + .logo-slider img { + max-height: 10vh; + padding: 10px 12px; + } } diff --git a/src/Logoslider.js b/src/Logoslider.js index 952c78c..85858e4 100644 --- a/src/Logoslider.js +++ b/src/Logoslider.js @@ -1,5 +1,5 @@ import "./Logoslider.css"; -import React from 'react' +import React from "react"; function Logoslider() { return ( @@ -35,7 +35,7 @@ function Logoslider() { - ) + ); } -export default Logoslider \ No newline at end of file +export default Logoslider; diff --git a/src/Skillset.css b/src/Skillset.css index 7982d08..48fce5a 100644 --- a/src/Skillset.css +++ b/src/Skillset.css @@ -1,83 +1,78 @@ @font-face { - font-family:"masque" ; - src: url(../public/MASQUE__.ttf); + font-family: "masque"; + src: url(../public/MASQUE__.ttf); } .Skillset { - color: black; - background-color: white; - min-width: 100vw; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - + color: black; + background-color: white; + min-width: 100vw; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Skillset-skill-name { - font-family: "sans"; - font-size: 80px; + font-family: "sans"; + font-size: 80px; } .Skillset-skill { - display: flex; - align-items: center; - flex-direction: column; + display: flex; + align-items: center; + flex-direction: column; } .Skillset-skill-des { - max-width: 1200px; - display: grid; - grid-template-columns: repeat(3,1fr); + max-width: 1200px; + display: grid; + grid-template-columns: repeat(3, 1fr); } .Skillset-skill-des div { - display: flex; - flex-direction: column; - background-color: #091d36; - background-image: linear-gradient(315deg, #091d36 0%, #37d5d6 90%); - color: white; - margin: 10px; - padding: 30px 40px; - border-radius: 30px; - align-items: center; - justify-content: center; - transition: 1s; + display: flex; + flex-direction: column; + background-color: #091d36; + background-image: linear-gradient(315deg, #091d36 0%, #37d5d6 90%); + color: white; + margin: 10px; + padding: 30px 40px; + border-radius: 30px; + align-items: center; + justify-content: center; + transition: 1s; } .Skillset-skill-des div:hover { - scale: 105%; - transition: 1s; - color: aqua; + scale: 105%; + transition: 1s; + color: aqua; } #title { - font-weight: 600; - font-size: 30px; + font-weight: 600; + font-size: 30px; } -#title-content{ - font-weight: 200; +#title-content { + font-weight: 200; } @media (max-width: 1200px) { - .Skillset-skill-name { - font-size: 12vw; - margin: 20px; - } - .Skillset-skill-des { - display: flex; - flex-direction: column; - max-width: 95%; - } - #title { - font-size: 25px; - } + .Skillset-skill-name { + font-size: 12vw; + margin: 20px; + } + .Skillset-skill-des { + display: flex; + flex-direction: column; + max-width: 95%; + } + #title { + font-size: 25px; + } - #title-content { - font-size: 15px; - } + #title-content { + font-size: 15px; + } } - - - - diff --git a/src/index.css b/src/index.css index a610412..22a6b2c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,18 +1,17 @@ -html{ +html { scroll-behavior: smooth; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - scroll-behavior:smooth; + scroll-behavior: smooth; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } - diff --git a/src/index.js b/src/index.js index 710b2c5..fbd246b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,20 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; -import Aboutme from './Aboutme'; -import Skillset from './Skillset'; -import Footer from './Footer'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import Aboutme from "./Aboutme"; +import Skillset from "./Skillset"; +import Footer from "./Footer"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( -