├── .idx ├── .gitignore ├── icon.png └── dev.nix ├── src ├── Components │ ├── DivSpace │ │ ├── DivSpace.css │ │ └── DivSpace.jsx │ ├── Footer │ │ ├── Footer.css │ │ └── Footer.jsx │ ├── AboutMe │ │ ├── AboutMe.css │ │ └── AboutMe.jsx │ ├── BottomToTop │ │ ├── BottomToTop.css │ │ └── BottomToTop.jsx │ ├── Projects │ │ ├── Projects.css │ │ └── Projects.jsx │ ├── Cover │ │ ├── Cover.css │ │ └── Cover.jsx │ ├── ContactMe │ │ ├── ContactMe.css │ │ └── ContactMe.jsx │ ├── Skills │ │ ├── Skills.css │ │ └── Skills.jsx │ └── Navbar │ │ ├── Navbar.css │ │ └── Navbar.jsx ├── assets │ ├── s.jpg │ ├── sign.png │ ├── icons │ │ ├── js.png │ │ ├── css.png │ │ ├── html.png │ │ ├── react.png │ │ ├── python.png │ │ └── bootstrap.png │ ├── project 1.jpg │ ├── project 2.png │ ├── project 3.png │ ├── project 4.png │ ├── sisi_tarak.png │ └── sisi_tarakk.jpg ├── main.jsx ├── App.jsx └── index.css ├── vite.config.js ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── package.json └── README.md /.idx/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | gc/ 3 | -------------------------------------------------------------------------------- /src/Components/DivSpace/DivSpace.css: -------------------------------------------------------------------------------- 1 | .divSpace { 2 | height: 50px; 3 | } 4 | -------------------------------------------------------------------------------- /.idx/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/.idx/icon.png -------------------------------------------------------------------------------- /src/assets/s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/s.jpg -------------------------------------------------------------------------------- /src/Components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | #footer { 2 | background: var(--second-bg-color); 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/sign.png -------------------------------------------------------------------------------- /src/assets/icons/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/js.png -------------------------------------------------------------------------------- /src/assets/icons/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/css.png -------------------------------------------------------------------------------- /src/assets/icons/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/html.png -------------------------------------------------------------------------------- /src/assets/icons/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/react.png -------------------------------------------------------------------------------- /src/assets/project 1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/project 1.jpg -------------------------------------------------------------------------------- /src/assets/project 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/project 2.png -------------------------------------------------------------------------------- /src/assets/project 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/project 3.png -------------------------------------------------------------------------------- /src/assets/project 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/project 4.png -------------------------------------------------------------------------------- /src/assets/sisi_tarak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/sisi_tarak.png -------------------------------------------------------------------------------- /src/assets/sisi_tarakk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/sisi_tarakk.jpg -------------------------------------------------------------------------------- /src/assets/icons/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/python.png -------------------------------------------------------------------------------- /src/assets/icons/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sisi-tarak/portfolio/HEAD/src/assets/icons/bootstrap.png -------------------------------------------------------------------------------- /src/Components/AboutMe/AboutMe.css: -------------------------------------------------------------------------------- 1 | #about { 2 | background: var(--second-bg-color); 3 | } 4 | 5 | .aboutRight { 6 | text-align: left !important; 7 | } 8 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/Components/DivSpace/DivSpace.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./DivSpace.css"; 3 | 4 | const DivSpace = () => { 5 | return
; 6 | }; 7 | 8 | export default DivSpace; 9 | -------------------------------------------------------------------------------- /src/Components/BottomToTop/BottomToTop.css: -------------------------------------------------------------------------------- 1 | #myBtn { 2 | display: none; 3 | position: fixed; 4 | bottom: 20px; 5 | right: 30px; 6 | height: auto; 7 | width: auto; 8 | z-index: 99; 9 | font-size: 20px; 10 | cursor: pointer; 11 | padding: 15px; 12 | } 13 | -------------------------------------------------------------------------------- /src/Components/Projects/Projects.css: -------------------------------------------------------------------------------- 1 | #projects { 2 | background: var(--second-bg-color); 3 | } 4 | 5 | .projImg { 6 | cursor: none; 7 | transition: 0.3s ease-in-out; 8 | } 9 | 10 | .projImg:hover { 11 | scale: 1.05; 12 | transition: 0.3s ease-in-out; 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Footer.css"; 3 | 4 | const Footer = () => { 5 | return ( 6 | 11 | ); 12 | }; 13 | 14 | export default Footer; 15 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.jsx'; 4 | import './index.css'; 5 | import '../node_modules/bootstrap/dist/css/bootstrap.css'; 6 | import '../node_modules/bootstrap/dist/js/bootstrap.js'; 7 | import '@fortawesome/fontawesome-free/css/all.min.css'; 8 | 9 | ReactDOM.createRoot(document.getElementById('root')).render( 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /src/Components/BottomToTop/BottomToTop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./BottomToTop.css"; 3 | 4 | const BottomToTop = () => { 5 | 6 | const scrollToTop = () => { 7 | window.scrollTo({ 8 | top: 0, 9 | behavior: 'smooth' 10 | }); 11 | }; 12 | 13 | return ( 14 | 20 | ); 21 | }; 22 | 23 | export default BottomToTop; 24 | -------------------------------------------------------------------------------- /src/Components/Cover/Cover.css: -------------------------------------------------------------------------------- 1 | .social-media > a { 2 | display: inline-flex; 3 | justify-content: center; 4 | align-items: center; 5 | width: 2.5rem; 6 | height: 2.5rem; 7 | background: transparent; 8 | border: 0.15rem solid var(--main-color); 9 | border-radius: 50%; 10 | font-size: 1rem; 11 | color: var(--main-color); 12 | transition: 0.5s ease; 13 | } 14 | 15 | .social-media > a:hover { 16 | background: var(--main-color); 17 | color: var(--second-bg-color) !important; 18 | box-shadow: 0 0 1 rem var(--main-color); 19 | transition: 0.5s ease; 20 | } 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | sisi_tarak 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/Components/ContactMe/ContactMe.css: -------------------------------------------------------------------------------- 1 | input , textarea { 2 | background-color: var(--second-bg-color) !important; 3 | color: var(--text-color); 4 | border: 1px solid var(--second-bg-color) !important; 5 | } 6 | 7 | input { 8 | height: 40px; 9 | } 10 | 11 | input::placeholder { 12 | color: rgba(146, 155, 155, 0.5) !important; 13 | } 14 | 15 | .formControl { 16 | display: block; 17 | width: 100%; 18 | padding: 0.375rem 0.75rem; 19 | font-size: 1rem; 20 | font-weight: 400; 21 | line-height: 1.5; 22 | color: var(--text-color); 23 | appearance: none; 24 | background-clip: padding-box; 25 | border-radius: 0.5rem; 26 | } -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /src/Components/Skills/Skills.css: -------------------------------------------------------------------------------- 1 | #skillsContainer { 2 | background: var(--second-bg-color); 3 | } 4 | 5 | #pythonIcon { 6 | color: rgb(255, 187, 0); 7 | } 8 | 9 | #sign { 10 | position: relative; 11 | /* height: auto; 12 | width: auto; 13 | left: 150px; 14 | top: -30px; */ 15 | display: none; 16 | cursor: no-drop; 17 | scale: 0.8; 18 | transform: rotate(-15deg); 19 | @media screen and (max-width: 768px) { 20 | height: 120px; 21 | width: auto; 22 | scale: 0.9; 23 | left: 120px; 24 | top: -30px; 25 | display: inline; 26 | } 27 | @media (min-width: 768px) and (max-width: 991px) { 28 | height: 150px; 29 | width: auto; 30 | scale: 0.8; 31 | left: 200px; 32 | top: -40px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./Components/Navbar/Navbar.jsx"; 3 | import Cover from "./Components/Cover/Cover.jsx"; 4 | import AboutMe from "./Components/AboutMe/AboutMe.jsx"; 5 | import DivSpace from "./Components/DivSpace/DivSpace.jsx"; 6 | import Projects from "./Components/Projects/Projects.jsx"; 7 | import ContactMe from "./Components/ContactMe/ContactMe.jsx"; 8 | import Skills from "./Components/Skills/Skills.jsx"; 9 | import Footer from "./Components/Footer/Footer.jsx"; 10 | 11 | const App = () => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |