├── .babelrc
├── .eslintrc.json
├── .gitignore
├── .stylelintrc.json
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── _redirects
├── src
├── App.jsx
├── ThemeContext.jsx
├── assets
│ ├── carousels
│ │ ├── car rental screenshot 1.png
│ │ ├── car rental screenshot 2.png
│ │ ├── car rental screenshot 3.png
│ │ ├── guess the word screenshot 1.png
│ │ ├── guess the word screenshot 2.png
│ │ ├── guess the word screenshot 3.png
│ │ ├── metrics webapp screenshot 1.png
│ │ ├── metrics webapp screenshot 2.png
│ │ ├── recipe app screenshot 3.png
│ │ ├── recipe app screenshot 4.png
│ │ ├── recipe app screenshot 6.png
│ │ ├── space travelers screenshot 1.png
│ │ ├── space travelers screenshot 2.png
│ │ ├── space travelers screenshot 3.png
│ │ ├── tic tac toe screenshot 1.png
│ │ ├── tic tac toe screenshot 2.png
│ │ ├── tic tac toe screenshot 3.png
│ │ ├── track budget screenshot 1.png
│ │ ├── track budget screenshot 2.png
│ │ ├── track budget screenshot 5.png
│ │ ├── tvshow screenshot 1.png
│ │ ├── tvshow screenshot 2.png
│ │ └── tvshow screenshot 3.png
│ ├── contact.svg
│ ├── dark.png
│ ├── index.js
│ ├── light.png
│ ├── logo.png
│ ├── portfolio1.png
│ ├── portfolio2.png
│ ├── projects
│ │ ├── carrental.png
│ │ ├── guesstheword.png
│ │ ├── mathmagician.png
│ │ ├── metricswebapp.png
│ │ ├── recipeapp.png
│ │ ├── spacetravelers.png
│ │ ├── tictactoe.png
│ │ ├── trackbudget.png
│ │ └── tvshow.png
│ ├── services
│ │ ├── fullstack.gif
│ │ ├── react.gif
│ │ └── responsive.gif
│ └── socials
│ │ ├── facebook (1).png
│ │ ├── facebook.png
│ │ ├── github (1).png
│ │ ├── github.png
│ │ ├── instagram (1).png
│ │ ├── instagram.png
│ │ ├── linkedin (1).png
│ │ ├── linkedin.png
│ │ ├── twitter (1).png
│ │ └── twitter.png
├── components
│ ├── About.jsx
│ ├── Carousel.jsx
│ ├── Contact.jsx
│ ├── Experience.jsx
│ ├── Footer.jsx
│ ├── Home.jsx
│ ├── Loader.jsx
│ ├── Navbar.jsx
│ ├── Popup.jsx
│ ├── Service.jsx
│ ├── Stars.jsx
│ ├── TechStack.jsx
│ ├── Testimonial.jsx
│ ├── Work.jsx
│ └── styles
│ │ ├── about.module.css
│ │ ├── carousel.module.css
│ │ ├── contact.module.css
│ │ ├── footer.module.css
│ │ ├── home.module.css
│ │ ├── navbar.module.css
│ │ ├── popup.module.css
│ │ ├── service.module.css
│ │ ├── techstack.module.css
│ │ ├── testimonial.module.css
│ │ └── work.module.css
├── constants
│ └── index.js
├── hoc
│ ├── SectionWrapper.jsx
│ └── index.js
├── index.css
├── main.jsx
└── utils
│ └── motion.js
├── tailwind.config.js
└── vite.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-react"
4 | ],
5 | "plugins": ["@babel/plugin-syntax-jsx"]
6 | }
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest": true
6 | },
7 | "parser": "@babel/eslint-parser",
8 | "parserOptions": {
9 | "ecmaFeatures": {
10 | "jsx": true
11 | },
12 | "ecmaVersion": 2018,
13 | "sourceType": "module"
14 | },
15 | "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"],
16 | "plugins": ["react"],
17 | "rules": {
18 | "react/jsx-props-no-spreading": "off",
19 | "react/no-unknown-property": "off",
20 | "no-underscore-dangle": ["error", { "allow": ["_getIconUrl"] }],
21 | "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
22 | "react/react-in-jsx-scope": "off",
23 | "import/no-unresolved": "off",
24 | "react/no-array-index-key": "off",
25 | "no-shadow": "off",
26 | "linebreak-style": "off",
27 | "max-len": ["error", {
28 | "code": 710,
29 | "ignoreComments": true,
30 | "ignoreUrls": true
31 | }]
32 | },
33 | "ignorePatterns": [
34 | "dist/",
35 | "build/"
36 | ]
37 | }
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["stylelint-config-standard"],
3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
4 | "rules": {
5 | "at-rule-no-unknown": [
6 | true,
7 | {
8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
9 | }
10 | ],
11 | "scss/at-rule-no-unknown": [
12 | true,
13 | {
14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 | }
16 | ],
17 | "csstree/validator": null,
18 | "function-linear-gradient-no-nonstandard-direction": null
19 | },
20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
21 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) [2023] [KaungMyatKyaw]
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
4 |
5 |
Portfolio
29 |
30 |
31 |
32 |
33 |
Portfolio
34 |
35 |
44 | Client
45 |
50 |
51 |
52 |
53 |
54 |
55 | ### Key Features (back to top )
61 |
62 |
63 |
64 | ## 🚀 Live Demo (back to top )
69 |
70 |
71 |
72 | ## 👥 Authors (back to top )
81 |
82 |
83 |
84 | ## 🔭 Future Features (back to top )
90 |
91 |
92 |
93 | ## 🤝 Contributing (back to top )
100 |
101 |
102 |
103 | ## ⭐️ Show your support (back to top )
108 |
109 |
110 |
111 | ## 📝 License (back to top )
116 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Antonio Fernandez
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "homepage": "https://rhaegar121.github.io/Portfolio/",
7 | "scripts": {
8 | "dev": "vite",
9 | "build": "vite build",
10 | "preview": "vite preview",
11 | "predeploy": "npm run build",
12 | "deploy": "gh-pages -d dist"
13 | },
14 | "dependencies": {
15 | "@emailjs/browser": "^3.10.0",
16 | "@react-three/drei": "^9.61.3",
17 | "@react-three/fiber": "^8.12.0",
18 | "framer-motion": "^10.10.0",
19 | "leaflet": "^1.9.4",
20 | "maath": "^0.5.3",
21 | "postcss-custom-properties": "^13.2.1",
22 | "prop-types": "^15.8.1",
23 | "react": "^18.2.0",
24 | "react-dom": "^18.2.0",
25 | "react-icons": "^4.10.1",
26 | "react-leaflet": "^4.2.1",
27 | "react-parallax-tilt": "^1.7.121",
28 | "react-responsive": "^9.0.2",
29 | "react-router-dom": "^6.10.0",
30 | "react-slick": "^0.29.0",
31 | "react-tilt": "^1.0.2",
32 | "react-vertical-timeline-component": "^3.6.0",
33 | "slick-carousel": "^1.8.1"
34 | },
35 | "devDependencies": {
36 | "@babel/core": "^7.22.8",
37 | "@babel/eslint-parser": "^7.22.7",
38 | "@babel/plugin-syntax-jsx": "^7.22.5",
39 | "@babel/preset-react": "^7.22.5",
40 | "@testing-library/jest-dom": "^6.1.2",
41 | "@testing-library/react": "^14.0.0",
42 | "@types/react": "^18.0.28",
43 | "@types/react-dom": "^18.0.11",
44 | "@vitejs/plugin-react": "^3.1.0",
45 | "autoprefixer": "^10.4.14",
46 | "eslint": "^7.32.0",
47 | "eslint-config-airbnb": "^18.2.1",
48 | "eslint-plugin-import": "^2.27.5",
49 | "eslint-plugin-jsx-a11y": "^6.7.1",
50 | "eslint-plugin-react": "^7.32.2",
51 | "eslint-plugin-react-hooks": "^4.6.0",
52 | "gh-pages": "^5.0.0",
53 | "jest": "^29.6.4",
54 | "postcss": "^8.4.21",
55 | "stylelint": "^13.13.1",
56 | "stylelint-config-standard": "^21.0.0",
57 | "stylelint-csstree-validator": "^1.9.0",
58 | "stylelint-scss": "^3.21.0",
59 | "tailwindcss": "^3.3.1",
60 | "vite": "^4.4.2"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { ThemeProvider } from './ThemeContext';
2 | import Navbar from './components/Navbar';
3 | import Home from './components/Home';
4 | import About from './components/About';
5 | import Service from './components/Service';
6 | import TechStack from './components/TechStack';
7 | import Work from './components/Work';
8 | import Testimonial from './components/Testimonial';
9 | import Contact from './components/Contact';
10 | import Footer from './components/Footer';
11 | import StarsCanvas from './components/Stars';
12 |
13 | function App() {
14 | return (
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
29 |
30 |
32 |
35 | );
36 | }
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/src/ThemeContext.jsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useState } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ThemeContext = createContext();
5 |
6 | export const ThemeProvider = ({ children }) => {
7 | const [theme, setTheme] = useState('dark');
8 |
9 | const toggleTheme = () => {
10 | setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
11 | };
12 |
13 | return (
14 |
15 | {children}
16 |
17 | );
18 | };
19 |
20 | export const useTheme = () => useContext(ThemeContext);
21 |
22 | ThemeProvider.propTypes = {
23 | children: PropTypes.node.isRequired,
24 | };
25 |
--------------------------------------------------------------------------------
/src/assets/carousels/car rental screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/car rental screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/car rental screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/car rental screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/car rental screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/car rental screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/carousels/guess the word screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/guess the word screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/guess the word screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/guess the word screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/guess the word screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/guess the word screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/carousels/metrics webapp screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/metrics webapp screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/metrics webapp screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/metrics webapp screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/recipe app screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/recipe app screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/carousels/recipe app screenshot 4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/recipe app screenshot 4.png
--------------------------------------------------------------------------------
/src/assets/carousels/recipe app screenshot 6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/recipe app screenshot 6.png
--------------------------------------------------------------------------------
/src/assets/carousels/space travelers screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/space travelers screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/space travelers screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/space travelers screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/space travelers screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/space travelers screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/carousels/tic tac toe screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tic tac toe screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/tic tac toe screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tic tac toe screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/tic tac toe screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tic tac toe screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/carousels/track budget screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/track budget screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/track budget screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/track budget screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/track budget screenshot 5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/track budget screenshot 5.png
--------------------------------------------------------------------------------
/src/assets/carousels/tvshow screenshot 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tvshow screenshot 1.png
--------------------------------------------------------------------------------
/src/assets/carousels/tvshow screenshot 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tvshow screenshot 2.png
--------------------------------------------------------------------------------
/src/assets/carousels/tvshow screenshot 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/assets/carousels/tvshow screenshot 3.png
--------------------------------------------------------------------------------
/src/assets/contact.svg:
--------------------------------------------------------------------------------
1 |
10 |
11 | About Me
12 |
13 |
14 |
15 | Hey there! I'm
16 | {' '}
17 |
23 | Antonio Fernandez,
24 |
25 | {' '}
26 | Senior Full-Stack Engineer with 9+ years of experience building secure, scalable systems across FinTech and E-commerce industries. Skilled in developing end-to-end platforms using React, Node.js, NestJS, PHP, Java, and .NET Core. Proven record delivering high-volume transactional systems, fraud detection engines, credit onboarding flows, and e-commerce CMS tools. Strong background in Agile delivery, platform migration, and regulatory compliance (KYC, GDPR). Comfortable collaborating with cross-border product teams using modern DevOps and CI/CD tools
27 |
28 |
29 | You can explore my work my
30 | {' '}
31 |
37 | {' '}
38 | GitHub
39 |
40 | {' '}
41 | and view my detailed experience in my
42 | {' '}
43 |
49 | {' '}
50 | resume.
51 |
52 |
53 |
54 |
56 |
57 | Education
58 |
59 |
60 |
61 | Graduated with a Bachelor of Science in computer engineering from
62 | {' '}
63 |
69 | University of Salamanca
70 |
71 | {' '}
72 | (2012-2016), holding a strong GPA of 8.4(/10).
73 |
74 |
75 | Over the past 10 years, I’ve led and delivered enterprise-grade full stack solutions across diverse domains, combining deep technical expertise with proven engineering leadership.
76 | My academic foundation and real-world impact consistently drive teams and products forward — no technical test needed.
77 |
78 |
79 |
18 | {carousel.map((img) => (
19 |
20 |
21 |
24 | );
25 | };
26 |
27 | Carousel.propTypes = {
28 | carousel: PropTypes.arrayOf(PropTypes.string).isRequired,
29 | };
30 |
31 | export default Carousel;
32 |
--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { motion } from 'framer-motion';
3 | import SectionWrapper from '../hoc';
4 | import { fadeIn, textVariant, slideIn } from '../utils/motion';
5 | import contact from '../assets/contact.svg';
6 | import style from './styles/contact.module.css';
7 |
8 | const Contact = () => {
9 | const [form, setForm] = useState({
10 | name: '',
11 | email: '',
12 | message: '',
13 | });
14 |
15 | const handleChange = (e) => {
16 | const { target } = e;
17 | const { name, value } = target;
18 |
19 | setForm({
20 | ...form,
21 | [name]: value,
22 | });
23 | };
24 |
25 | const handleSubmit = (event) => {
26 | event.preventDefault();
27 | const form = event.target;
28 | const isValid = form.checkValidity();
29 | if (isValid) {
30 | // Submit the form
31 | form.submit();
32 | setForm({
33 | name: '',
34 | email: '',
35 | message: '',
36 | });
37 | }
38 | };
39 |
40 | return (
41 | <>
42 |
43 | Get in Touch!
44 |
45 |
46 | I'm always excited to hear about new opportunities and collaborations. Don't hesitate to reach out and let's make something great.
47 |
48 |
98 |
99 | );
100 | };
101 |
102 | export default SectionWrapper(Contact, 'contact', 'my-0');
103 |
--------------------------------------------------------------------------------
/src/components/Experience.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smart-dev613/portfolio-React-Tailwind-/f409821ae83d9ef6f94e1d36a1ee48b58804299d/src/components/Experience.jsx
--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { BsChevronDoubleUp } from 'react-icons/bs';
4 | import { fadeIn } from '../utils/motion';
5 | import { social } from '../constants';
6 | import style from './styles/footer.module.css';
7 |
8 | const Footer = () => (
9 |
50 | );
51 |
52 | export default Footer;
53 |
--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MdOutlineArrowForwardIos } from 'react-icons/md';
3 | import { motion } from 'framer-motion';
4 | import style from './styles/home.module.css';
5 | import { fadeIn, staggerContainer } from '../utils/motion';
6 |
7 | const Home = () => (
8 |
14 |
15 |
16 | Hi, I'm
17 | {' '}
18 |
19 | Antonio Fernandez
20 |
21 |
22 |
23 | Also known as
24 | {' '}
25 |
26 | Antonio
27 |
28 |
29 |
30 | I am a senior full-stack Engineer
31 |
32 |
{
36 | window.scrollTo({
37 | top: window.innerHeight,
38 | behavior: 'smooth',
39 | });
40 | }}
41 | >
42 |
43 | Check out my work
44 |
45 |
46 | Check out my work
47 |
48 |
50 |
52 | );
53 |
54 | export default Home;
55 |
--------------------------------------------------------------------------------
/src/components/Loader.jsx:
--------------------------------------------------------------------------------
1 | import { Html, useProgress } from '@react-three/drei';
2 |
3 | const Loader = () => {
4 | const { progress } = useProgress();
5 | return (
6 |
16 |
25 | {progress.toFixed(2)}
26 | %
27 |
28 |
29 | );
30 | };
31 |
32 | export default Loader;
33 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { motion } from 'framer-motion';
3 | import { useTheme } from '../ThemeContext';
4 | import { fadeIn, staggerContainer } from '../utils/motion';
5 | import { logo, light, dark } from '../assets';
6 | import { navLinks } from '../constants';
7 | import style from './styles/navbar.module.css';
8 |
9 | const Navbar = () => {
10 | const { theme, toggleTheme } = useTheme();
11 | const [active, setActive] = useState('');
12 | const [scrolled, setScrolled] = useState(false);
13 | const [isOpen, setOpen] = useState(false);
14 |
15 | const handleMenuClick = () => {
16 | setOpen(!isOpen);
17 | };
18 |
19 | useEffect(() => {
20 | const handleScroll = () => {
21 | const scrollTop = window.pageYOffset;
22 | if (scrollTop > 780) {
23 | setScrolled(true);
24 | } else {
25 | setScrolled(false);
26 | }
27 | };
28 |
29 | window.addEventListener('scroll', handleScroll);
30 |
31 | return () => {
32 | window.removeEventListener('scroll', handleScroll);
33 | };
34 | }, []);
35 |
36 | return (
37 |
38 |
39 | {
42 | window.scrollTo(0, 0);
43 | }}
44 | whileHover={{ scale: 1.12, backgroundColor: 'var(--dark-blue)', transition: { type: 'spring', damping: 20, stiffness: 300 } }}
45 | className={style.logo_btn}
46 | >
47 |
49 |
50 | {/* desktop navlink */}
51 |
80 |
81 | {/* hamburger menu */}
82 | {
86 | if (e.key === 'Enter') {
87 | handleMenuClick();
88 | }
89 | }}
90 | role="button"
91 | tabIndex={0}
92 | >
93 |
97 |
98 | {/* mobile menu */}
99 |
106 |
107 |
112 | {theme === 'light' ? (
113 |
118 |
119 | {navLinks.map((link, index) => (
120 |
124 | {
131 | setActive(link.name);
132 | handleMenuClick();
133 | }}
134 | >
135 | {link.name}
136 |
137 |
138 | ))}
139 |
140 |
141 |
17 |
18 |
19 |
20 |
21 |
{project.name}
22 |
23 | {project.tech.map((i) => (
24 | {`#${i}`}
25 | ))}
26 |
27 |
{project.desc}
28 |
40 |
41 |
43 | );
44 |
45 | Popup.propTypes = {
46 | handleClose: PropTypes.func.isRequired,
47 | project: PropTypes.objectOf(PropTypes.string).isRequired,
48 | };
49 |
50 | export default Popup;
51 |
--------------------------------------------------------------------------------
/src/components/Service.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react';
3 | import { motion } from 'framer-motion';
4 | import { Tilt } from 'react-tilt';
5 | import { fadeIn, textVariant } from '../utils/motion';
6 | import SectionWrapper from '../hoc';
7 | import style from './styles/service.module.css';
8 | import { services } from '../constants';
9 |
10 | const Service = () => (
11 |
12 |
13 | My Services
14 |
15 |
What I can do for you -
16 |
17 | {/* Services card */}
18 | {services.map((service, index) => (
19 |
20 |
24 |
27 |
28 |
29 |
30 |
31 |
{service.title}
32 | {/*
{service.text}
*/}
33 |
35 |
36 | ))}
37 |
38 |
23 |
24 |
32 |
33 | );
34 | };
35 |
36 | const StarsCanvas = () => {
37 | const [aspectRatio, setAspectRatio] = useState(1);
38 |
39 | useEffect(() => {
40 | const handleResize = () => {
41 | setAspectRatio(window.innerWidth / window.innerHeight);
42 | };
43 | window.addEventListener('resize', handleResize);
44 | return () => window.removeEventListener('resize', handleResize);
45 | }, []);
46 |
47 | return (
48 |
49 |
59 |
65 |
Here are a few technologies I`ve been working with recently:
20 |
21 | {stacks.map((currentStack) => (
22 | handlePageChange(currentStack)}
27 | >
28 | {currentStack}
29 |
30 | ))}
31 |
32 |
33 | {technologies.filter((technology) => technology.stack.includes(stack)).map((tech, index) => (
34 |
42 |
44 | ))}
45 |
59 |
60 | Testimonials
61 |
62 |
What my coding partners say about me -
63 |
64 | {/* Testimonials card */}
65 |
66 | {filterTestimonial.map((testimonial) => (
67 |
74 |
75 |
76 |
77 |
{testimonial.text}
79 |
80 |
81 | {testimonial.name}
82 | {' '}
83 |
84 | (
85 | {testimonial.country}
86 | )
87 |
88 |
89 |
90 |
97 |
99 |
100 |
102 | ))}
103 |
104 |
105 |
110 |
112 |
117 |
119 |
120 |
121 |
25 |
26 | My Recent Works
27 |
28 |
29 | {/* Projects Card */}
30 | {projects.map((project, index) => (
31 |
37 |
39 |
40 |
41 |
{project.name}
42 |
43 | {project.tech.map((i) => (
44 | {`#${i}`}
45 | ))}
46 |
47 |
48 |
handlePopupClick(project)}>
49 | Learn more
50 | Learn more
51 |
52 |
53 |
55 | ))}
56 |
57 | {/* Popup Window */}
58 |
59 | {isOpen && (
60 |
63 |
16 |
17 |
18 |
19 |
20 |
22 | );
23 | };
24 |
25 | export default SectionWrapper;
26 |
--------------------------------------------------------------------------------
/src/hoc/index.js:
--------------------------------------------------------------------------------
1 | import SectionWrapper from './SectionWrapper';
2 |
3 | export default SectionWrapper;
4 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Inline&family=Bungee+Outline&family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | * {
8 | margin: 0;
9 | padding: 0;
10 | box-sizing: border-box;
11 | font-family: 'Calibre', 'Inter', 'San Francisco', 'SF Pro Text', -apple-system, system-ui, sans-serif;
12 | scroll-behavior: smooth;
13 | color-scheme: dark;
14 | }
15 |
16 | ::-webkit-scrollbar {
17 | width: 8.5px;
18 | height: 0;
19 | background-color: var(--dark-blue);
20 | }
21 |
22 | ::-webkit-scrollbar-thumb {
23 | background-color: var(--light-grey);
24 | border-radius: 8px;
25 | }
26 |
27 | .App {
28 | --navy: #030b25;
29 | --cyan: #22abfa;
30 | --white: #dfe7f3;
31 | --grey: #b1bcdc;
32 | --light-grey: #1b243f;
33 | --light-blue: #26517d;
34 | --dark-blue: #020716;
35 | --low-opacity: #000000cd;
36 | }
37 |
38 | .App.light {
39 | --navy: #dfe7f3;
40 | --cyan: #22abfa;
41 | --white: #020716;
42 | --grey: #030b25;
43 | --dark-blue: #fff;
44 | --light-grey: #dfe7f3;
45 | --light-blue: #26517d;
46 | --low-opacity: #ffffffcd;
47 | }
48 |
49 | .body {
50 | background-color: var(--navy);
51 | }
52 |
53 | .star-canvas {
54 | background-color: var(--dark-blue);
55 | }
56 |
57 | .green-pink-gradient {
58 | background: "#00cea8";
59 | background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
60 | background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
61 | }
62 |
63 | .grey-gradient {
64 | background: #3f4e85;
65 | background:
66 | -webkit-linear-gradient(
67 | -90deg,
68 | #3f4e85 0%,
69 | rgba(51, 53, 80, 0) 100%
70 | );
71 | background: linear-gradient(-90deg, #3f4e85 0%, rgba(51, 53, 80, 0) 100%);
72 | }
73 |
74 | .slick-slider {
75 | position: relative;
76 | width: 100%;
77 | margin-bottom: 30px;
78 | }
79 |
80 | .carousel-img {
81 | width: 100%;
82 | height: auto;
83 | margin: 0 auto;
84 | }
85 |
86 | .carousel-img img {
87 | width: 100%;
88 | height: 100%;
89 | object-fit: contain;
90 | }
91 |
92 | .slick-dots li button::before {
93 | font-size: 0.4rem !important;
94 | opacity: 1 !important;
95 | color: var(--white);
96 | }
97 |
98 | .slick-dots li.slick-active button::before {
99 | color: var(--cyan) !important;
100 | }
101 |
102 | .slick-arrow {
103 | top: 100% !important;
104 | z-index: 9;
105 | }
106 |
107 | .slick-prev {
108 | left: 0 !important;
109 | }
110 |
111 | .slick-next {
112 | right: 0 !important;
113 | }
114 |
115 | .slick-prev::before,
116 | .slick-next::before {
117 | font-family: "Montserrat Alternates", sans-serif !important;
118 | position: absolute;
119 | opacity: 1 !important;
120 | padding: 8px 10px 12px 10px;
121 | top: -36px !important;
122 | color: var(--white);
123 | background-color: var(--low-opacity);
124 | }
125 |
126 | .slick-prev::before {
127 | left: 0;
128 | }
129 |
130 | .slick-next::before {
131 | right: 0;
132 | }
133 |
134 | .contact {
135 | width: 100%;
136 | padding-bottom: 40px;
137 | background-color: var(--light-grey);
138 | background-image:
139 | linear-gradient(335deg, var(--dark-blue) 23px, transparent 23px),
140 | linear-gradient(155deg, var(--dark-blue) 23px, transparent 23px),
141 | linear-gradient(335deg, var(--dark-blue) 23px, transparent 23px),
142 | linear-gradient(155deg, var(--dark-blue) 23px, transparent 23px);
143 | background-size: 58px 58px;
144 | background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px;
145 | }
146 |
147 | @media screen and (min-width: 768px) {
148 | .slick-prev::before,
149 | .slick-next::before {
150 | font-size: 1.8rem !important;
151 | top: -45px !important;
152 | }
153 | }
154 |
155 | @media screen and (min-width: 1200px) {
156 | .slick-prev::before,
157 | .slick-next::before {
158 | font-size: 2rem !important;
159 | padding: 10px 12px 14px 12px;
160 | top: -52px !important;
161 | }
162 | }
163 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './index.css';
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 | ,
10 | );
11 |
--------------------------------------------------------------------------------
/src/utils/motion.js:
--------------------------------------------------------------------------------
1 | export const textVariant = (delay) => ({
2 | hidden: {
3 | y: -50,
4 | opacity: 0,
5 | },
6 | show: {
7 | y: 0,
8 | opacity: 1,
9 | transition: {
10 | type: 'spring',
11 | duration: 1.25,
12 | delay,
13 | },
14 | },
15 | });
16 |
17 | export const fadeIn = (direction, type, delay, duration) => {
18 | let hiddenX;
19 | let hiddenY;
20 |
21 | if (direction === 'left') {
22 | hiddenX = 100;
23 | } else if (direction === 'right') {
24 | hiddenX = -100;
25 | } else {
26 | hiddenX = 0;
27 | }
28 |
29 | if (direction === 'up') {
30 | hiddenY = 100;
31 | } else if (direction === 'down') {
32 | hiddenY = -100;
33 | } else {
34 | hiddenY = 0;
35 | }
36 |
37 | return {
38 | hidden: {
39 | x: hiddenX,
40 | y: hiddenY,
41 | opacity: 0,
42 | },
43 | show: {
44 | x: 0,
45 | y: 0,
46 | opacity: 1,
47 | transition: {
48 | type,
49 | delay,
50 | duration,
51 | ease: 'easeOut',
52 | },
53 | },
54 | exit: {
55 | x: 0,
56 | y: 10,
57 | opacity: 0,
58 | },
59 | };
60 | };
61 |
62 | export const zoomIn = (delay, duration) => ({
63 | hidden: {
64 | scale: 0,
65 | opacity: 0,
66 | },
67 | show: {
68 | scale: 1,
69 | opacity: 1,
70 | transition: {
71 | type: 'tween',
72 | delay,
73 | duration,
74 | ease: 'easeOut',
75 | },
76 | },
77 | });
78 |
79 | export const slideIn = (direction, type, delay, duration) => {
80 | let hiddenX;
81 | let hiddenY;
82 |
83 | if (direction === 'left') {
84 | hiddenX = '-100%';
85 | } else if (direction === 'right') {
86 | hiddenX = '100%';
87 | } else {
88 | hiddenX = 0;
89 | }
90 |
91 | if (direction === 'up') {
92 | hiddenY = '100%';
93 | } else if (direction === 'down') {
94 | hiddenY = '-100%';
95 | } else {
96 | hiddenY = 0;
97 | }
98 |
99 | return {
100 | hidden: {
101 | x: hiddenX,
102 | y: hiddenY,
103 | },
104 | show: {
105 | x: 0,
106 | y: 0,
107 | transition: {
108 | type,
109 | delay,
110 | duration,
111 | ease: 'easeOut',
112 | },
113 | },
114 | };
115 | };
116 |
117 | export const staggerContainer = (staggerChildren, delayChildren) => ({
118 | hidden: {},
119 | show: {
120 | transition: {
121 | staggerChildren,
122 | delayChildren: delayChildren || 0,
123 | },
124 | },
125 | });
126 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './index.html',
5 | './src/**/*.{js,ts,jsx,tsx}',
6 | ],
7 | theme: {
8 | extend: {
9 | colors: {
10 | navy: '#030b25',
11 | // navy: '#26517d',
12 | cyan: '#22abfa',
13 | white: '#e6f1ff',
14 | grey: '#b1bcdc',
15 | light_grey: '#1b243f',
16 | dark_blue: '#02091d',
17 | },
18 | },
19 | },
20 | plugins: [],
21 | };
22 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'; // eslint-disable-line
2 | import react from '@vitejs/plugin-react'; // eslint-disable-line
3 |
4 | export default defineConfig({
5 | base: '/',
6 | plugins: [react()],
7 | build: {
8 | rollupOptions: {
9 | output: {
10 | manualChunks(id) {
11 | if (id.includes('node_modules')) {
12 | return id.toString().split('node_modules/')[1].split('/')[0].toString();
13 | }
14 | return null;
15 | },
16 | },
17 | },
18 | },
19 | });
20 |
--------------------------------------------------------------------------------
30 | 
31 |