diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml new file mode 100644 index 0000000..9cb771a --- /dev/null +++ b/.github/workflows/jekyll-gh-pages.yml @@ -0,0 +1,51 @@ +# Sample workflow for building and deploying a Jekyll site to GitHub Pages +name: Deploy Jekyll with GitHub Pages dependencies preinstalled + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Build with Jekyll + uses: actions/jekyll-build-pages@v1 + with: + source: ./ + destination: ./_site + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9d91014 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +package-lock.json + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md index a3af834..9e38658 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,5 @@ git push origin gh-pages npm run build npm run deploy + + __Sathya_Seelan diff --git a/asset-manifest.json b/asset-manifest.json index 6c45175..f3a9cca 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,14 +1,14 @@ { "files": { "main.css": "/Portfolio/static/css/main.7330c926.css", - "main.js": "/Portfolio/static/js/main.43cb10aa.js", + "main.js": "/Portfolio/static/js/main.fd2b919c.js", "static/media/blob-haikei.svg": "/Portfolio/static/media/blob-haikei.ed4231cd548cd312fe4f.svg", "index.html": "/Portfolio/index.html", "main.7330c926.css.map": "/Portfolio/static/css/main.7330c926.css.map", - "main.43cb10aa.js.map": "/Portfolio/static/js/main.43cb10aa.js.map" + "main.fd2b919c.js.map": "/Portfolio/static/js/main.fd2b919c.js.map" }, "entrypoints": [ "static/css/main.7330c926.css", - "static/js/main.43cb10aa.js" + "static/js/main.fd2b919c.js" ] } \ No newline at end of file diff --git a/build/Ecom.png b/build/Ecom.png new file mode 100644 index 0000000..cf46472 Binary files /dev/null and b/build/Ecom.png differ diff --git a/build/MODERNGUI1.jpg b/build/MODERNGUI1.jpg new file mode 100644 index 0000000..fe26325 Binary files /dev/null and b/build/MODERNGUI1.jpg differ diff --git a/build/Price.png b/build/Price.png new file mode 100644 index 0000000..c2355d7 Binary files /dev/null and b/build/Price.png differ diff --git a/build/SSlogo.ico b/build/SSlogo.ico new file mode 100644 index 0000000..ebe3f8b Binary files /dev/null and b/build/SSlogo.ico differ diff --git a/build/SSlogo.jpg b/build/SSlogo.jpg new file mode 100644 index 0000000..04785ae Binary files /dev/null and b/build/SSlogo.jpg differ diff --git a/build/Wall.png b/build/Wall.png new file mode 100644 index 0000000..b005a47 Binary files /dev/null and b/build/Wall.png differ diff --git a/build/blob-haikei.svg b/build/blob-haikei.svg new file mode 100644 index 0000000..f0e4ed7 --- /dev/null +++ b/build/blob-haikei.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/build/footer_wave.svg b/build/footer_wave.svg new file mode 100644 index 0000000..d4b5343 --- /dev/null +++ b/build/footer_wave.svg @@ -0,0 +1,13 @@ + + New Project + + + + + + + + \ No newline at end of file diff --git a/build/man-svgrepo-com.svg b/build/man-svgrepo-com.svg new file mode 100644 index 0000000..45c3e9d --- /dev/null +++ b/build/man-svgrepo-com.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build/manifest.json b/build/manifest.json new file mode 100644 index 0000000..626ddc1 --- /dev/null +++ b/build/manifest.json @@ -0,0 +1,20 @@ +{ + "short_name": "Sathya Seelan", + "name": "Sathya Seelan", + "icons": [ + { + "src": "SSlogo.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "sslogo.jpg", + "type": "image/jpg", + "sizes": "192x192" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/build/mockup.png b/build/mockup.png new file mode 100644 index 0000000..dc8d754 Binary files /dev/null and b/build/mockup.png differ diff --git a/build/renr-responsive.png b/build/renr-responsive.png new file mode 100644 index 0000000..996ec02 Binary files /dev/null and b/build/renr-responsive.png differ diff --git a/build/scroll-down.svg b/build/scroll-down.svg new file mode 100644 index 0000000..de8da09 --- /dev/null +++ b/build/scroll-down.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/build/wave1.svg b/build/wave1.svg new file mode 100644 index 0000000..c241277 --- /dev/null +++ b/build/wave1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html index 06221cc..a235b10 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Sathya Seelan
\ No newline at end of file +Sathya Seelan
\ No newline at end of file diff --git a/package.json b/package.json index d504045..7cae5f3 100644 --- a/package.json +++ b/package.json @@ -1,51 +1,52 @@ -{ - "name": "portfolio-react", - "homepage": "https://SathyaSeelanG.github.io/Portfolio", - "version": "0.1.0", - "private": true, - "dependencies": { - "@emotion/react": "^11.11.0", - "@emotion/styled": "^11.11.0", - "@mui/material": "^5.13.3", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^11.2.7", - "@testing-library/user-event": "^12.8.3", - "gh-pages": "^5.0.0", - "react": "^16.14.0", - "react-animate-on-scroll": "^2.1.7", - "react-dom": "^16.14.0", - "react-ga": "^3.3.1", - "react-icons": "^4.9.0", - "react-scripts": "^5.0.1", - "react-scroll": "^1.8.9", - "react-type-animation": "^3.0.1", - "styled-components": "^5.3.11", - "web-vitals": "^1.1.2" - }, - "scripts": { - "start": "react-scripts start", - "predeploy": "npm run build", - "deploy": "gh-pages -d build", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} + +{ + "name": "portfolio-react", + "homepage": "https://SathyaSeelanG.github.io/Portfolio", + "version": "0.1.0", + "private": true, + "dependencies": { + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@mui/material": "^5.13.3", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^11.2.7", + "@testing-library/user-event": "^12.8.3", + "gh-pages": "^5.0.0", + "react": "^16.14.0", + "react-animate-on-scroll": "^2.1.7", + "react-dom": "^16.14.0", + "react-ga": "^3.3.1", + "react-icons": "^4.9.0", + "react-scripts": "^5.0.1", + "react-scroll": "^1.8.9", + "react-type-animation": "^3.0.1", + "styled-components": "^5.3.11", + "web-vitals": "^1.1.2" + }, + "scripts": { + "start": "react-scripts start", + "predeploy": "npm run build", + "deploy": "gh-pages -d build", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} \ No newline at end of file diff --git a/public/Ecom.png b/public/Ecom.png new file mode 100644 index 0000000..cf46472 Binary files /dev/null and b/public/Ecom.png differ diff --git a/public/MODERNGUI1.jpg b/public/MODERNGUI1.jpg new file mode 100644 index 0000000..fe26325 Binary files /dev/null and b/public/MODERNGUI1.jpg differ diff --git a/public/Price.png b/public/Price.png new file mode 100644 index 0000000..c2355d7 Binary files /dev/null and b/public/Price.png differ diff --git a/public/SSlogo.ico b/public/SSlogo.ico new file mode 100644 index 0000000..ebe3f8b Binary files /dev/null and b/public/SSlogo.ico differ diff --git a/public/SSlogo.jpg b/public/SSlogo.jpg new file mode 100644 index 0000000..04785ae Binary files /dev/null and b/public/SSlogo.jpg differ diff --git a/public/Wall.png b/public/Wall.png new file mode 100644 index 0000000..b005a47 Binary files /dev/null and b/public/Wall.png differ diff --git a/public/blob-haikei.svg b/public/blob-haikei.svg new file mode 100644 index 0000000..f0e4ed7 --- /dev/null +++ b/public/blob-haikei.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/footer_wave.svg b/public/footer_wave.svg new file mode 100644 index 0000000..d4b5343 --- /dev/null +++ b/public/footer_wave.svg @@ -0,0 +1,13 @@ + + New Project + + + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..8f8a0df --- /dev/null +++ b/public/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + Sathya Seelan + + + +
+ + + diff --git a/public/man-svgrepo-com.svg b/public/man-svgrepo-com.svg new file mode 100644 index 0000000..45c3e9d --- /dev/null +++ b/public/man-svgrepo-com.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..626ddc1 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,20 @@ +{ + "short_name": "Sathya Seelan", + "name": "Sathya Seelan", + "icons": [ + { + "src": "SSlogo.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "sslogo.jpg", + "type": "image/jpg", + "sizes": "192x192" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/mockup.png b/public/mockup.png new file mode 100644 index 0000000..dc8d754 Binary files /dev/null and b/public/mockup.png differ diff --git a/public/renr-responsive.png b/public/renr-responsive.png new file mode 100644 index 0000000..996ec02 Binary files /dev/null and b/public/renr-responsive.png differ diff --git a/public/scroll-down.svg b/public/scroll-down.svg new file mode 100644 index 0000000..de8da09 --- /dev/null +++ b/public/scroll-down.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/wave1.svg b/public/wave1.svg new file mode 100644 index 0000000..c241277 --- /dev/null +++ b/public/wave1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..e69de29 diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..1ec9a6a --- /dev/null +++ b/src/App.js @@ -0,0 +1,16 @@ +import "./App.css"; +import Home from "./pages/Home"; +import ReactGA from 'react-ga'; +import React, {useEffect} from 'react' + +function App() { + useEffect(() => { + ReactGA.initialize('G-SW2KGM0L12'); + ReactGA.pageview(window.location.pathname + window.location.search) + },[]); + return ( + + ); +} + +export default App; diff --git a/src/assets/Images/CHIA.jpg b/src/assets/Images/CHIA.jpg new file mode 100644 index 0000000..2fbaf61 Binary files /dev/null and b/src/assets/Images/CHIA.jpg differ diff --git a/src/assets/Images/SSlogo.jpg b/src/assets/Images/SSlogo.jpg new file mode 100644 index 0000000..04785ae Binary files /dev/null and b/src/assets/Images/SSlogo.jpg differ diff --git a/src/assets/Images/contributions .png b/src/assets/Images/contributions .png new file mode 100644 index 0000000..1f0ea27 Binary files /dev/null and b/src/assets/Images/contributions .png differ diff --git a/src/assets/data.js b/src/assets/data.js new file mode 100644 index 0000000..5ed7ca6 --- /dev/null +++ b/src/assets/data.js @@ -0,0 +1,113 @@ +// --------------------------------------- Project List +export const ProjectList = [ + { + img: "/renr-responsive.png", + title: "RENR Safety App", + description: "A safety application for the Renewable Resources Dept. of BCIT", + tech_stack: ["React", "Firebase"], + github_url: "", + demo_url: "https://renr-bcit.web.app/", + }, + { + img: "/mymind-responsive.png", + title: "MyMind", + description: + "An app where users can purchase online therapy sessions and chat with their therapists.", + tech_stack: ['HTML', 'CSS', 'NodeJs', 'MongoDB', 'SocketIo'], + github_url: "https://github.com/salesp07/MyMind---Copy", + demo_url: "https://mymindweb.onrender.com/", + }, + { + img: "/pokedex-responsive.png", + title: "Pokedex", + description: "A pokedex app that displays pokemon data, plays OSTs and makes pokemons dance.", + tech_stack: ['ReactJs', 'NodeJs', 'MongoDB'], + github_url: "https://github.com/salesp07/Pokedex-ReactApp", + demo_url: "https://pokedex-salesp07.netlify.app/", + }, + { + img: "/jobDetect.png", + title: "JobDetect", + description: "An app to detect if a job posting is a scam or not using its description.", + tech_stack: ['Python', 'Flask', 'NodeJs', 'MongoDB'], + github_url: "https://github.com/salesp07/JobDetectNode", + demo_url: "https://jobdetective.onrender.com/", + }, +]; + +// --------------------------------------- Skills + +export const stackList = [ + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg", + name: "HTML", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg", + name: "CSS", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg", + name: "JavaScript", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg", + name: "ReactJS", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-original.svg", + name: "Bootstrap", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/git/git-original.svg", + name: "Git", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg", + name: "React Native", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg", + name: "NodeJS", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/firebase/firebase-plain.svg", + name: "Firebase", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original.svg", + name: "MongoDB", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg", + name: "Python", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/flask/flask-original.svg", + name: "Flask", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg", + name: "C", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg", + name: "Java", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original.svg", + name: "MySQL", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/materialui/materialui-original.svg", + name: "Material UI", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/figma/figma-original.svg", + name: "Figma", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg", + name: "VS Code", + }, +]; diff --git a/src/components/About/AboutElements.js b/src/components/About/AboutElements.js new file mode 100644 index 0000000..88ff6ee --- /dev/null +++ b/src/components/About/AboutElements.js @@ -0,0 +1,39 @@ +import styled from "@emotion/styled"; + +export const ContactWrapper = styled.div` + margin-top: 5rem; +`; + +export const Image = styled.img` + max-width: 120px; + margin: 0 auto; + margin-bottom: 1rem; +`; + +export const Technologies = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-right: auto; + margin-left: auto; + margin-bottom: -2rem; +`; + +export const Tech = styled.div` + display: flex; + flex-direction: column; + align-items: center; + max-width: 100px; + min-width: 100px; + margin-bottom: 2rem; +`; + +export const TechImg = styled.img` + height: 40px; + width: 40px; + padding-bottom: 5px; +`; + +export const TechName = styled.div` + font-size: 14px; +`; diff --git a/src/components/Contact/Contact.js b/src/components/Contact/Contact.js new file mode 100644 index 0000000..5259630 --- /dev/null +++ b/src/components/Contact/Contact.js @@ -0,0 +1,63 @@ +import React, { useState } from "react"; +import { ContactWrapper, Email } from "./ContactElements"; +import { MdContentCopy } from "react-icons/md"; +import { IconButton, Tooltip } from "@mui/material"; +import Zoom from '@mui/material/Zoom'; + +import ScrollAnimation from "react-animate-on-scroll"; +function Contact() { + const [showTooltip, setShowTooltip] = useState(false); + const copyToClipboard = () => { + navigator.clipboard.writeText("pedro.sales.muniz@gmail.com"); + setShowTooltip(true); + setTimeout(() => { + setShowTooltip(false); + }, 700); + }; + + return ( + + +
+
Get In Touch
+ +
+ +
+ pedro.sales.muniz@gmail.com + setShowTooltip(false)} + title="Copied!" + TransitionComponent={Zoom} + disableFocusListener + disableHoverListener + disableTouchListener + placement="bottom" + > + + + + +
+ + Send Email + + +
+ + +
+ + ); +} + +export default Contact; diff --git a/src/components/Contact/ContactElements.js b/src/components/Contact/ContactElements.js new file mode 100644 index 0000000..e5c2396 --- /dev/null +++ b/src/components/Contact/ContactElements.js @@ -0,0 +1,30 @@ +import styled from "@emotion/styled"; + +export const ContactWrapper = styled.div` + margin: 5rem 0; +`; + +export const Email = styled.div` + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; + row-gap: 1rem; + + span { + font-size: 1rem; + font-weight: 400; + } + + @media (min-width: 576px) { + span { + font-size: 1.25rem; + } + } + @media (min-width: 992px) { + span { + font-size: 1.5rem; + } + } +`; diff --git a/src/components/Contributions.js b/src/components/Contributions.js new file mode 100644 index 0000000..63a2051 --- /dev/null +++ b/src/components/Contributions.js @@ -0,0 +1,29 @@ +import React, { useState, useEffect } from 'react' +import ScrollAnimation from 'react-animate-on-scroll'; +import { FaGithubSquare } from 'react-icons/fa' + + +function Contributions() { + const [showComponent, setShowComponent] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { + setShowComponent(true); + }, 1000); + + // Clean up the timer when the component unmounts + return () => clearTimeout(timer); + }, []); + return ( +
+
My Contributions {}
+
+ + {showComponent && github contributions} + +
+
+ ) +} + +export default Contributions \ No newline at end of file diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..4b1c148 --- /dev/null +++ b/src/components/Dropdown/Dropdown.js @@ -0,0 +1,100 @@ +import React from "react"; +import { FaTimes } from "react-icons/fa"; +import styled from "@emotion/styled"; +import { Link as ScrollLink } from "react-scroll"; + +const SiderBar = styled.div` + background: #151418; + position: fixed; + height: 100%; + width: 100%; + /* top: 0; */ + left: 0; + z-index: 999; + transition: 0.3s ease-in-out; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")}; + top: ${({ isOpen }) => (isOpen ? "0" : "-100%")}; +`; + +const CloseIcon = styled(FaTimes)` + font-size: 2rem; + color: #fff; + position: absolute; + right: 2rem; + top: 2rem; + cursor: pointer; +`; +export const NavMenu = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .menu-item + .menu-item { + margin-top: 2rem; + } +`; + +export const NavLink = styled(ScrollLink)` + color: #fff; + cursor: pointer; + font-size: 1.7rem; + + &:hover { + color: rgb(119, 119, 121); + } +`; + +export const NavBtn = styled.div` + display: flex; + justify-content: center; + margin-top: 5rem; + font-size: 1.7rem; +`; + +function Dropdown({ isOpen, toggle }) { + return ( + + + + + Projects + + + About + + + Contact + + + + + Resume + + + + ); +} + +export default Dropdown; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..917138d --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,32 @@ +import React from "react"; +import styled from "@emotion/styled"; + +const FooterSection = styled.div` + background-image: url(/footer_wave.svg); + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 250px; + position: relative; + + span { + position: absolute; + bottom: 4rem; + color: #fff; + + a { + text-decoration: underline; + } + } +`; +function Footer() { + return ( + + {/*
+

Copy

+
*/} + + ); +} + +export default Footer; diff --git a/src/components/Header/HeaderElements.js b/src/components/Header/HeaderElements.js new file mode 100644 index 0000000..c938c6b --- /dev/null +++ b/src/components/Header/HeaderElements.js @@ -0,0 +1,64 @@ +import { FaBars } from "react-icons/fa"; +import { Link as ScrollLink } from "react-scroll"; +import styled from "@emotion/styled"; + +export const Nav = styled.nav` + background: transparent; + height: 100px; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 10; +`; + +export const NavLink = styled(ScrollLink)` + color: rgb(119, 119, 121); + display: flex; + font-size: 1.2rem; + align-items: center; + height: 100%; + cursor: pointer; + &:hover { + color: #f6f6f6; + } +`; +export const Logo = styled('div')` + img { + width: 47px; + height: 47px; + border-radius: 50%; + } +`; + +export const Bars = styled(FaBars)` + display: none; + color: #fff; + font-size: 1.8rem; + cursor: pointer; + @media screen and (max-width: 768px) { + display: block; + } +`; + +export const NavMenu = styled.div` + display: flex; + align-items: center; + margin-right: -24px; + + .menu-item + .menu-item { + margin-left: 1rem; + } + @media screen and (max-width: 768px) { + display: none; + } +`; + +export const NavBtn = styled.div` + display: flex; + align-items: center; + margin-right: 24px; + + @media screen and (max-width: 768px) { + display: none; + } +`; diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js new file mode 100644 index 0000000..dc14467 --- /dev/null +++ b/src/components/Hero/Hero.js @@ -0,0 +1,126 @@ +import React, { useState } from "react"; +import Dropdown from "../Dropdown/Dropdown"; +import Header from "../Header/Header"; +import { + HeroContainer, + HeroWrapper, + HeroLeft, + HeroRight, + Image, + ScrollDown, + ScrollLink, +} from "./HeroElements"; +import { TypeAnimation } from 'react-type-animation'; +import ScrollAnimation from "react-animate-on-scroll"; +import FixSocialIcon from "../SocialIcon/FixSocialIcon"; +import logoImage from '../../assets/Images/SSlogo.jpg'; + +function Hero() { + const [isOpen, setIsOpen] = useState(false); + const [showSubtitle, setShowSubtitle] = useState(false); + const [showScrollDown, setShowScrollDown] = useState(false); + + const toggle = () => { + setIsOpen(!isOpen); + }; + return ( +
+ +
+ + + + + setShowSubtitle(true) + ]} + speed={{ type: "keyStrokeDelayInMs", value: 150 }} + wrapper="h1" + repeat={0} + /> + {showSubtitle && + setShowScrollDown(true), + // 1000, + // "Seriously, my projects are really cool, go check them out!", + // 1000, + // "You're uh...", + // 1000, + // "You're uh... still here?", + // 1000, + // "Ok, this has been fun, but I'm gonna restart the loop now...", + // // 1000, + // // "Or...", + // // 1000, + // // "Or... I could scroll you by force! Muahaha!", + // 1000, + // "See ya! :)", + // 500, + ]} + speed={50} + deletionSpeed={65} + wrapper="h5" + repeat={Infinity} + /> + } + + + + + + {/* man-svgrepo */} + Header Logo + + + + {/* {showScrollDown && + + + Scroll down + scroll-down + + + } */} + + +
+ ); +} + +export default Hero; diff --git a/src/components/Hero/HeroElements.js b/src/components/Hero/HeroElements.js new file mode 100644 index 0000000..e51c9a2 --- /dev/null +++ b/src/components/Hero/HeroElements.js @@ -0,0 +1,127 @@ +import styled, { keyframes } from "styled-components"; +import { Link as LinkScroll } from "react-scroll"; + +export const HeroContainer = styled.div` + padding-bottom: 2rem; + padding-top: 4rem; + padding-right: 1rem; + padding-left: 1rem; + margin-right: auto; + margin-left: auto; + display: flex; + flex-direction: column; + + @media (min-width: 576px) { + max-width: 540px; + } + @media (min-width: 768px) { + max-width: 720px; + } + @media (min-width: 992px) { + max-width: 960px; + } + @media (min-width: 1200px) { + max-width: 1000px; + } +`; + +export const HeroWrapper = styled.div` + display: flex; + flex-direction: row; + + @media screen and (max-width: 992px) { + flex-direction: column; + } +`; + +export const HeroLeft = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: left; + flex: 1; + + h1 { + font-size: 2.8rem; + color: #f6f6f6; + opacity: 0.98; + font-weight: 400; + } + + h5 { + font-size: 1.6rem; + color: rgb(119, 119, 121); + margin-bottom: 1rem; + font-weight: 400; + } + + p { + font-size: 17px; + color: #f6f6f6; + opacity: 0.85; + } + + @media screen and (max-width: 992px) { + text-align: center; + align-items: center; + margin-bottom: 2rem; + + h5 { + min-height: 5rem; + } +`; + +export const HeroRight = styled.div` + flex: 1; + justify-content: center; + display: flex; +`; + +export const Image = styled.img` + height: 300px; + width: auto; +`; + +const ScrollAnimation = keyframes` + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-20px); + } + 60% { + transform: translateY(-10px); + } +`; + +export const ScrollDown = styled(LinkScroll)` + display: flex; + justify-content: flex-start; + cursor: pointer; + position: absolute; + + animation: ${ScrollAnimation} 2s linear 0s infinite; + @media screen and (max-width: 992px) { + position: relative; + justify-content: center; + margin-top: 2rem; + } +`; + +export const ScrollLink = styled.div` + display: flex; + align-items: center; + font-size: 1.3rem; + color: #f6f6f6; + + img { + height: 35px; + width: 35px; + margin-left: 6px; + } +`; diff --git a/src/components/Projects/ProjectCard/ProjectCard.js b/src/components/Projects/ProjectCard/ProjectCard.js new file mode 100644 index 0000000..f068e8a --- /dev/null +++ b/src/components/Projects/ProjectCard/ProjectCard.js @@ -0,0 +1,59 @@ +import React from "react"; +import { ProjectList } from "../../../data/ProjectData"; +import { + Card, + CardLeft, + CardRight, + TechCardContainer, + TechCard, + BtnGroup, +} from "./ProjectCardElements"; +import ScrollAnimation from "react-animate-on-scroll"; +function ProjectCard() { + return ( + <> + {ProjectList.map((list, index) => ( + + + + {list.name} + + +

{list.title}

+

{list.description}

+ + {list.tech_stack.map((tech, index) => ( + {tech} + ))} + + + {list.github_url.length > 0 && + + Github + + } + {list.demo_url.length > 0 && + + Demo ➜ + + } + + + + + ))} + + ); +} + +export default ProjectCard; diff --git a/src/components/Projects/ProjectCard/ProjectCardElements.js b/src/components/Projects/ProjectCard/ProjectCardElements.js new file mode 100644 index 0000000..07b61a2 --- /dev/null +++ b/src/components/Projects/ProjectCard/ProjectCardElements.js @@ -0,0 +1,84 @@ +import styled from "@emotion/styled"; + +export const Card = styled.div` + display: grid; + grid-gap: 2rem; + margin-bottom: 4rem; + grid-template-columns: 1fr; + padding-bottom: 2rem; + overflow: hidden; + border-radius: 10px; + box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + @media (min-width: 992px) { + grid-template-columns: 1fr 1fr; + border-bottom: 0; + padding-bottom: 0; + } +`; + +export const CardLeft = styled.div` + justify-self: center; + img { + height: auto; + } +`; + +export const CardRight = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + h4 { + font-size: 1.5rem; + font-weight: 400; + } + + p { + font-weight: 400; + max-width: 95%; + margin-top: 10px; + margin-bottom: 1rem; + color: rgba(0, 0, 0, 0.815); + text-align: center; + + @media (min-width: 992px) { + text-align: start; + } + } + @media (min-width: 992px) { + align-items: flex-start; + margin-top: 1rem; + } +`; + +export const BtnGroup = styled.div` + height: 70px; + display: flex; + align-items: center; +`; + + +export const TechCardContainer = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; + @media (min-width: 992px) { + justify-content: flex-start; + } +`; + +export const TechCard = styled.div` + border-radius: 10px; + background-color: #f5f5f5; + padding: 5px 10px; + margin: 5px; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + font-weight: 400; + color: rgba(0, 0, 0, 0.815); + cursor: default; + box-shadow: 0px 2px 5px rgba(160, 170, 180, 0.6); +`; diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js new file mode 100644 index 0000000..8af2c87 --- /dev/null +++ b/src/components/Projects/Projects.js @@ -0,0 +1,31 @@ +import React from "react"; +import ProjectCard from "./ProjectCard/ProjectCard"; +function Projects() { + return ( + <> + {/* + + */} +
+
+
Projects
+ +
+
+ + ); +} + +export default Projects; diff --git a/src/components/SocialIcon/FixSocialIcon.js b/src/components/SocialIcon/FixSocialIcon.js new file mode 100644 index 0000000..e1b06cc --- /dev/null +++ b/src/components/SocialIcon/FixSocialIcon.js @@ -0,0 +1,85 @@ +import React from "react"; +import { FaLinkedin, FaGithub } from "react-icons/fa"; +import styled from "@emotion/styled"; +import ScrollAnimation from "react-animate-on-scroll"; + +const SocialContainer = styled.div` + ${'' /* position: fixed; */} + top: 48%; + left: 1 .5rem; + transform: translateY(-50%); + + ul { + display: block; + } + + .item + .item { + margin-top: 1rem; + } + + a { + font-size: 2.3rem; + color: rgb(119, 119, 121); + &:hover { + color: rgb(57, 134, 250); + } + } + + @media screen and (max-width: 1000px) { + margin-top: 5rem; + margin-left:8rem; + position: relative; + top: 0; + left: 0; + ${'' /* ul { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + } + + a { + font-size: 2.5rem; + color: #151418; + &:hover { + color: rgb(57, 134, 250); + } + } + + .item + .item { + margin-top: 0; + margin-left: 5rem; + } */} + } +`; +function FixSocialIcon() { + return ( + + + {/*
    */} + {/*
  • */} + + + +       + {/*
    • +
  • */} + + + + {/*
    • */} + {/*
*/} + + + ); +} + +export default FixSocialIcon; diff --git a/src/components/SocialIcon/ScrollToTop.js b/src/components/SocialIcon/ScrollToTop.js new file mode 100644 index 0000000..605c0cf --- /dev/null +++ b/src/components/SocialIcon/ScrollToTop.js @@ -0,0 +1,64 @@ +import { IconButton, Tooltip, styled } from '@mui/material' +import React, { useState, useEffect } from 'react' +import { MdKeyboardArrowUp } from 'react-icons/md'; +import { animateScroll as scroll } from 'react-scroll'; + +const StyledIconButton = styled(IconButton)` + position: fixed; + bottom: 20px; + right: 20px; + color: white; + padding: 10px; +` + +const StyledArrowIcon = styled(MdKeyboardArrowUp)` + background-color: #007bff; + border-radius: 50%; + padding: 5px; + box-shadow: 0px 4px 20px rgba(160, 170, 180, 0.6); +` + + + + +function ScrollToTop() { + const [open, setOpen] = React.useState(false); + const [shouldRender, setShouldRender] = useState(false); + + const handleClick = () => { + setOpen(false); + scroll.scrollToTop({ duration: 0 }); + }; + + useEffect(() => { + const handleScroll = () => { + const scrollThreshold = 500; + if (window.scrollY > scrollThreshold) setShouldRender(true) + else setShouldRender(false); + }; + window.addEventListener('scroll', handleScroll, { passive: true }); + }, []); + + return ( + + shouldRender && + + setOpen(true)} onClose={() => setOpen(false)}> + +
+

© 2023 [ Sathya Seelan G ]

+
+ +{/*
+

copy

+

© 2023 [ Sathya Seelan G ]

+
*/} + + + + + + ) +} + +export default ScrollToTop \ No newline at end of file diff --git a/src/data/ProjectData.js b/src/data/ProjectData.js new file mode 100644 index 0000000..d24b350 --- /dev/null +++ b/src/data/ProjectData.js @@ -0,0 +1,116 @@ +// --------------------------------------- Project List +// import logoImage from 'SSlogo.jpg'; + +export const ProjectList = [ + { + img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/MODERNGUI1.jpg", + + // "/jobDetect.png", + // {logoImage}, + + title: "MODERN-GUI", + description: + "Project involves building a modern Graphical User Interface (GUI) using Python and advanced UI libraries", + tech_stack: ["Python", "Tkinter"], + github_url: "https://github.com/SathyaSeelanG/MODERN-GUI-PYTHON-MACHEINE_LEARNING", + demo_url: "", + }, + { + img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/Price.png", + title: "Price Comparision App", + description: + "Price Comparison App is a web application that retrieves and displays price details from various online platforms", + tech_stack: ["Python","Django","HTML", "CSS", ], + github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App", + demo_url: "https://price-comparision-django-keim.onrender.com/", + }, + { + img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/Ecom.png", + title: "Ecommerce website", + description: + "E-commerce Web Application is a powerful solution for businesses to establish and manage their online stores.", + tech_stack: ["ReactJs", "NodeJs", "MySQl"], + github_url: "https://github.com/SathyaSeelanG/Ecommerce_website", + demo_url: "https://ecom-web-sathya.netlify.app/", + }, + { + img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/Wall.png", + title: "Wallmart Data Analysis", + description: + "Python project focuses on analyzing Walmart's data using four popular modules: NumPy, Pandas, Matplotlib, and Seaborn.", + tech_stack: ["Python", "Numpy", "Pandas",], + github_url: "https://github.com/SathyaSeelanG/Wallmart_Sales_Analysis_Python", + demo_url: "", + }, + { + img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/e7ab083f50926cd1d3ceda5d5d825236f626d3ad/src/assets/Images/CHIA.jpg", + title: "Chia Currency Converter", + description: + "Chia Currency Convert streamlines Chia to any currency, user-friendly interface ensures swift, accurate Conversions.", + tech_stack: ["Nextjs ", "React js","Chia "], + github_url: "", + demo_url: "https://www.spacescan.io/tools/converter/currency", + }, +]; + +// --------------------------------------- Skills + +export const stackList = [ + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg", + name: "HTML", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg", + name: "CSS", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg", + name: "JavaScript", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg", + name: "ReactJS", + }, + + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/nextjs/nextjs-original.svg", + name: "NextJS", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg", + name: "NodeJS", + }, + + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg", + name: "Python", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg", + name: "Java", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original.svg", + name: "MySQL", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/figma/figma-original.svg", + name: "Figma", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/canva/canva-original.svg", + name: "Canva", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg", + name: "VS Code", + },{ + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg", + name: "Github", + }, + { + img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/git/git-original.svg", + name: "Git", + }, +]; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..3372b89 --- /dev/null +++ b/src/index.css @@ -0,0 +1,170 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap"); +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} +body { + font-family: "Poppins", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background: #fafaff; + font-weight: 400; + overflow-x: hidden; +} + +main { + background: #151418; + background-image: url('../public/blob-haikei.svg'); + background-repeat: no-repeat; + background-size: cover; + width: 100%; +} + +a { + text-decoration: none; + color: inherit; + background-color: transparent; + transition: 0.2s ease-in; + +} + +ul, +ol { + list-style: none; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} + +img, +video { + display: block; + max-width: 100%; +} + +.btn { + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease-in-out; + font-weight: 400; + outline: none; +} + +.btn-shadow{ + box-shadow: 0px 2px 5px rgba(160, 170, 180, 0.6); + +} + +.btn-shadow:hover{ + box-shadow: 0px 3px 8px rgba(160, 170, 180, 0.9); +} + +.PrimaryBtn { + padding: 12px 20px; + border: none; + background: rgb(57, 134, 250); + color: #f6f6f6; +} + +.SecondaryBtn{ + padding: 10px 18px; + border: 2px solid rgb(57, 134, 250); + color: #010606; + margin-right: 1rem; +} + +.PrimaryBtn:hover { + background: rgb(18, 111, 250); +} + +.SecondaryBtn:hover { + background: #e7f1fa; + color: #000 +} + +.Container { + max-width: 1000px; + padding-right: 1rem; + padding-left: 1rem; + width: 90%; + margin-right: auto; + margin-left: auto; +} + +.BigCard { + padding-top: 3rem; + padding-bottom: 3rem; + padding-right: 2rem; + padding-left: 2rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + background: #fff; + box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 10px; +} + +.AboutBio{ + text-align: justify; + max-width: 750px; + margin: 0 auto; + color: #151418; + line-height: 1.6; +} + +.tagline2 { + text-align: left; + max-width: 650px; + margin: 0; + color: #151418; + line-height: 1.6; +} + +.tagline2 { + margin-top: 1rem; + margin-bottom: 2rem; +} + +.SectionTitle { + font-size: 28px; + color: #151418; + font-weight: 700; + margin-top:5rem ; + margin-bottom: 3.5rem; +} +.ProjectWrapper { + margin-top: -1rem; +} + + + +/* ------------------------------------ Media for Container */ +@media (max-width: 1000px) { + .Container { + padding: 0; + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..afed62d --- /dev/null +++ b/src/index.js @@ -0,0 +1,6 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; + +ReactDOM.render(, document.getElementById("root")); diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..e84cb4c --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,29 @@ +import React from "react"; +import Hero from "../components/Hero/Hero"; +import Projects from "../components/Projects/Projects"; +import About from "../components/About/About"; +import Tech from "../components/About/Tech"; +import Contact from "../components/Contact/Contact"; +import Footer from "../components/Footer/Footer"; +import FixSocialIcon from "../components/SocialIcon/FixSocialIcon"; +import ScrollToTop from "../components/SocialIcon/ScrollToTop"; +import Contributions from "../components/Contributions/Contributions"; +function Home() { + return ( + <> + + + + + + {/* */} + {/* */} + + +