├── components ├── AppLayout │ ├── index.js │ └── AppLayout.js ├── GoogleAnalytics │ └── index.js ├── BlogItem │ └── index.js └── EmailSubscribeForm │ └── index.js ├── .eslintrc.json ├── public ├── favicon.ico ├── devle-app.jpg ├── assets │ ├── gpt-4.avif │ ├── ai-projects.png │ ├── chatbots-course.png │ └── coming-soon-banner.png ├── abraham-tavarez-logo-mini.png ├── React-Shorts-YouTube-Thumbnail.png ├── efren-tavarez-aws-nyc-Abraham-Tavarez-1000x978.png ├── vercel.svg └── next.svg ├── postcss.config.js ├── pages ├── _document.tsx ├── api │ └── hello.ts ├── _app.js ├── post │ └── [postId].js ├── blogs.js ├── contact.js ├── projects.js ├── index.js └── courses.js ├── .gitignore ├── next.config.js ├── tsconfig.json ├── tailwind.config.ts ├── package.json ├── hooks └── useWindowSize.js ├── README.md ├── styles └── globals.css └── blogsData └── blogs.js /components/AppLayout/index.js: -------------------------------------------------------------------------------- 1 | export * from './AppLayout'; -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/favicon.ico -------------------------------------------------------------------------------- /public/devle-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/devle-app.jpg -------------------------------------------------------------------------------- /public/assets/gpt-4.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/assets/gpt-4.avif -------------------------------------------------------------------------------- /public/assets/ai-projects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/assets/ai-projects.png -------------------------------------------------------------------------------- /public/assets/chatbots-course.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/assets/chatbots-course.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/abraham-tavarez-logo-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/abraham-tavarez-logo-mini.png -------------------------------------------------------------------------------- /public/assets/coming-soon-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/assets/coming-soon-banner.png -------------------------------------------------------------------------------- /public/React-Shorts-YouTube-Thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/React-Shorts-YouTube-Thumbnail.png -------------------------------------------------------------------------------- /public/efren-tavarez-aws-nyc-Abraham-Tavarez-1000x978.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/devp/main/public/efren-tavarez-aws-nyc-Abraham-Tavarez-1000x978.png -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | import { Roboto, Monoton } from "next/font/google"; 3 | 4 | const roboto = Roboto({ 5 | weight: ["400"], 6 | subsets: ["latin"], 7 | variable: '--font-roboto' 8 | }); 9 | const monoton = Monoton({ 10 | weight: ["400"], 11 | subsets: ["latin"], 12 | variable: '--font-monoton' 13 | }); 14 | 15 | export default function App({ Component, pageProps }) { 16 | const getLayout = Component.getLayout || ((page) => page); 17 | 18 | return ( 19 |
20 | {getLayout(, pageProps)} 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | // /** @type {import('next').NextConfig} */ 2 | // const nextConfig = { 3 | // reactStrictMode: true, 4 | // // images: { 5 | // // remotePatterns: [ 6 | // // { 7 | // // protocol: 'https', 8 | // // hostname: 'images.unsplash', 9 | // // // port: '', 10 | // // // pathname: '/account123/**', 11 | // // }, 12 | // // ], 13 | // // }, 14 | // images: { 15 | // domains: ['images.unsplash'], 16 | // }, 17 | // } 18 | 19 | // module.exports = nextConfig 20 | 21 | module.exports = { 22 | reactStrictMode: true, 23 | images: { 24 | domains: ['images.unsplash.com'] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /components/GoogleAnalytics/index.js: -------------------------------------------------------------------------------- 1 | import Script from "next/script"; 2 | 3 | const GoogleAnalytics = ({ ga_id }) => ( 4 | <> 5 | 10 | 22 | 23 | ); 24 | export default GoogleAnalytics; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js", "pages/index.js", "pages/home.js"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | // darkMode: ['class', '[data-mode="dark"]'], 5 | darkMode: 'class', 6 | content: [ 7 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 8 | './components/**/*.{js,ts,jsx,tsx,mdx}', 9 | './app/**/*.{js,ts,jsx,tsx,mdx}', 10 | ], 11 | theme: { 12 | extend: { 13 | colors: { 14 | 'blk-dark': '#181818' 15 | }, 16 | backgroundImage: { 17 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 18 | 'gradient-conic': 19 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 20 | }, 21 | darkMode: 'class' 22 | }, 23 | darkMode: 'class' 24 | }, 25 | plugins: [], 26 | } 27 | export default config 28 | -------------------------------------------------------------------------------- /components/BlogItem/index.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Link from "next/link"; 3 | 4 | export default function BlogItem({title, img, date, metaDescription, postId}) { 5 | return ( 6 |
7 | 14 | 15 |
16 | 20 | {title} 21 | 22 | 23 |

24 | {metaDescription} 25 |

26 | 27 | 28 | On: {date} 29 | 30 |
31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dev-porfolio-2023", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emailjs/browser": "^3.11.0", 13 | "@fortawesome/fontawesome-svg-core": "^6.4.2", 14 | "@fortawesome/free-brands-svg-icons": "^6.4.2", 15 | "@fortawesome/free-solid-svg-icons": "^6.4.2", 16 | "@fortawesome/react-fontawesome": "^0.2.0", 17 | "@types/node": "20.4.9", 18 | "@types/react": "18.2.20", 19 | "@types/react-dom": "18.2.7", 20 | "autoprefixer": "10.4.14", 21 | "eslint": "8.47.0", 22 | "eslint-config-next": "13.4.13", 23 | "next": "13.4.13", 24 | "postcss": "8.4.27", 25 | "react": "18.2.0", 26 | "react-dom": "18.2.0", 27 | "react-icons": "^4.10.1", 28 | "react-mailchimp-subscribe": "^2.1.3", 29 | "tailwindcss": "3.3.3", 30 | "typescript": "5.1.6" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /hooks/useWindowSize.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export function useWindowSize() { 4 | // Initialize state with undefined width/height so server and client renders match 5 | // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ 6 | const [windowSize, setWindowSize] = useState({ 7 | width: undefined, 8 | height: undefined, 9 | }); 10 | 11 | useEffect(() => { 12 | // only execute all the code below in client side 13 | // Handler to call on window resize 14 | function handleResize() { 15 | // Set window width/height to state 16 | setWindowSize({ 17 | width: window.innerWidth, 18 | height: window.innerHeight, 19 | }); 20 | } 21 | 22 | // Add event listener 23 | window.addEventListener("resize", handleResize); 24 | 25 | // Call handler right away so state gets updated with initial window size 26 | handleResize(); 27 | 28 | // Remove event listener on cleanup 29 | return () => window.removeEventListener("resize", handleResize); 30 | }, []); // Empty array ensures that effect is only run on mount 31 | return windowSize; 32 | } -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /pages/post/[postId].js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { blogs } from "../../blogsData/blogs"; 3 | import { AppLayout } from "../../components/AppLayout"; 4 | import Link from "next/link"; 5 | 6 | export default function Post(props) { 7 | const { postContent, img } = props.post; 8 | return ( 9 |
10 |
11 |
12 | Back 13 |
14 | 21 | 22 |
23 |
24 |
25 |
26 |
27 | ); 28 | } 29 | 30 | Post.getLayout = function getLayout(page, pageProps) { 31 | return {page}; 32 | }; 33 | 34 | // first we need to create a list of paths. 35 | // https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths 36 | export const getStaticPaths = async () => { 37 | const paths = blogs.map((post) => ({ 38 | params: { postId: post.postId }, 39 | })); 40 | return { 41 | paths, 42 | fallback: false, // false or "blocking" 43 | }; 44 | }; 45 | 46 | // then we find the post by postId 47 | // https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props 48 | export async function getStaticProps(ctx) { 49 | const post = blogs.find((post) => post.postId === ctx.params.postId); 50 | return { 51 | props: { 52 | post, 53 | }, 54 | }; 55 | } 56 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @layer base { 12 | a:hover { 13 | @apply underline 14 | } 15 | h1, h2, h3, h4, h5, h6 { 16 | @apply my-6 font-bold; 17 | } 18 | 19 | h1 { 20 | @apply text-4xl; 21 | } 22 | 23 | h2 { 24 | @apply text-3xl; 25 | } 26 | 27 | h3 { 28 | @apply text-2xl; 29 | } 30 | 31 | h4 { 32 | @apply text-xl; 33 | } 34 | 35 | h6 { 36 | @apply text-lg; 37 | } 38 | 39 | p { 40 | @apply my-2; 41 | } 42 | 43 | ul, ol { 44 | @apply my-4; 45 | } 46 | 47 | ul { 48 | list-style-type: disc; 49 | } 50 | 51 | ol { 52 | list-style-type: decimal; 53 | } 54 | 55 | li { 56 | @apply my-2; 57 | } 58 | 59 | } 60 | 61 | @layer components { 62 | .btn { 63 | @apply bg-violet-400 font-bold border-b p-1 hover:translate-x-2 mt-2 dark:bg-slate-500 w-[50%] 64 | } 65 | 66 | .nav-link { 67 | @apply font-bold mx-20 border-b p-1 hover:scale-125 hover:text-[#5EC9CC] mt-2 text-white dark:text-slate-900 transition-all 68 | } 69 | 70 | 71 | } 72 | 73 | @media (prefers-color-scheme: dark) { 74 | :root { 75 | --foreground-rgb: 255, 255, 255; 76 | --background-start-rgb: 0, 0, 0; 77 | --background-end-rgb: 0, 0, 0; 78 | } 79 | } 80 | 81 | body { 82 | color: rgb(var(--foreground-rgb)); 83 | background: linear-gradient( 84 | to bottom, 85 | transparent, 86 | rgb(var(--background-end-rgb)) 87 | ) 88 | rgb(var(--background-start-rgb)); 89 | } 90 | 91 | .toggle-checkbox:checked { 92 | right: 0; 93 | border-color: #5EC9CC; 94 | } 95 | .toggle-checkbox:checked + .toggle-label { 96 | background: #5EC9CC; 97 | } 98 | 99 | -------------------------------------------------------------------------------- /components/EmailSubscribeForm/index.js: -------------------------------------------------------------------------------- 1 | import MailchimpSubscribe from "react-mailchimp-subscribe"; 2 | import { useRef } from "react"; 3 | 4 | export default function EmailSubscribeForm({ status, message, onValidated }) { 5 | const email = useRef(); 6 | const name = useRef(); 7 | 8 | const handleSubmit = () => { 9 | email && 10 | name && 11 | email.current.value.indexOf("@") > -1 && 12 | onValidated({ 13 | EMAIL: email.current.value, 14 | NAME: name.current.value 15 | }); 16 | 17 | } 18 | 19 | return ( 20 |
21 |
22 |

Get notified when the next course drops!

23 | 24 | 35 | 36 | 48 |
49 | {status === "sending" && ( 50 |
sending...
51 | )} 52 | {status === "error" && ( 53 |
57 | )} 58 | {status === "success" && ( 59 |
Subscribed !
60 | )} 61 |
62 | 68 | 69 |
70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /pages/blogs.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Inter } from "next/font/google"; 3 | import { AppLayout } from "../components/AppLayout"; 4 | import {blogs} from '../blogsData/blogs'; 5 | import BlogItem from '../components/BlogItem' 6 | 7 | // const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export default function Blogs() { 10 | return ( 11 |
12 |
13 |

14 | Blogs 15 |

16 |
17 | {blogs && ( 18 | blogs.map(blog => ) 19 | )} 20 |
21 |
22 |
23 | ); 24 | } 25 | 26 | Blogs.getLayout = function getLayout(page, pageProps) { 27 | return {page}; 28 | }; 29 | 30 | 31 | {/*
32 | 33 | 34 |
35 | 36 | How to Start Learning Programming: A Guide for Beginners 37 | 38 | 39 | On: 20 October 2019 40 |
41 |
42 | 43 |
44 | 45 | 46 |
47 | 48 | How to use sticky note for problem solving 49 | 50 | 51 | On: 20 October 2019 52 |
53 |
54 | 55 |
56 | 57 | 58 |
59 | 60 | Morning routine to boost your mood 61 | 62 | 63 | On: 25 November 2020 64 |
65 |
66 | 67 |
68 | 69 | 70 |
71 | 72 | All the features you want to know 73 | 74 | 75 | On: 30 September 2020 76 |
77 |
78 | 79 |
80 | 81 | 82 |
83 | 84 | Minimal workspace for your inspirations 85 | 86 | 87 | On: 13 October 2019 88 |
89 |
90 | 91 |
92 | 93 | 94 |
95 | 96 | What do you want to know about Blockchane 97 | 98 | 99 | On: 20 October 2019 100 |
101 |
*/} -------------------------------------------------------------------------------- /blogsData/blogs.js: -------------------------------------------------------------------------------- 1 | export const blogs = [ 2 | { 3 | postId: "1", 4 | title: "How to Start Learning Programming: A Guide for Beginners", 5 | img: "https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", 6 | date: '03/11/2023', 7 | metaDescription: "Are you interested in learning programming but don't know where to start? In this guide, we'll cover the basics of programming, the best first programming language to learn, and how to become a web developer.", 8 | postContent: "

How to Start Learning Programming: A Guide for Beginners

Are you interested in learning programming but don't know where to start? You're not alone! Programming can seem intimidating, but with the right resources and guidance, anyone can learn how to code. In this guide, we'll cover the basics of programming, the best first programming language to learn, and how to become a web developer.

What is Programming?

Programming is the process of writing instructions for a computer to execute. These instructions are written in a programming language, which is a set of commands that tell the computer what to do. Programming languages are used to create software, websites, and apps.

What is the Best First Programming Language to Learn?

When it comes to learning programming, the best first language to learn is often debated. Some popular choices include Python, JavaScript, and Java. Each language has its own advantages and disadvantages, so it's important to do your research and decide which language is best for you. Python is a great choice for beginners because it is easy to learn and has a wide range of applications. JavaScript is also popular and is used to create interactive websites and apps. Java is a more complex language, but it is widely used and can be used to create a variety of applications.

How to Become a Web Developer

If you're interested in becoming a web developer, the first step is to learn a programming language. Once you have a good understanding of a language, you can start building websites and apps. You'll need to learn HTML, CSS, and JavaScript to create the front-end of a website, and a server-side language such as PHP or Ruby to create the back-end. You'll also need to learn how to use databases and frameworks such as WordPress or Django. Once you have the necessary skills, you can start looking for web development jobs.

Conclusion

Learning programming can seem daunting, but with the right resources and guidance, anyone can learn how to code. The best first programming language to learn is often debated, but popular choices include Python, JavaScript, and Java. To become a web developer, you'll need to learn a programming language, HTML, CSS, JavaScript, and a server-side language. With the right skills and dedication, you can become a successful web developer.

" 9 | }, 10 | { 11 | postId: "2", 12 | title: "How to Prepare for a Full Stack Developer Interview", 13 | img: "https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", 14 | date: '01/11/2023', 15 | metaDescription: "Are you looking to become a full stack developer? If so, you'll need to be prepared for the interview process. Learn how to prepare for a full stack developer interview, including understanding the basics of React, JavaScript, HTML, and CSS, practicing problem-solving, and being prepared to talk about your projects.", 16 | postContent: "

How to Start Learning Programming: A Guide for Beginners

Are you interested in learning programming but don't know where to start? You're not alone! Programming can seem intimidating, but with the right resources and guidance, anyone can learn how to code. In this guide, we'll cover the basics of programming, the best first programming language to learn, and how to become a web developer.

What is Programming?

Programming is the process of writing instructions for a computer to execute. These instructions are written in a programming language, which is a set of commands that tell the computer what to do. Programming languages are used to create software, websites, and apps.

What is the Best First Programming Language to Learn?

When it comes to learning programming, the best first language to learn is often debated. Some popular choices include Python, JavaScript, and Java. Each language has its own advantages and disadvantages, so it's important to do your research and decide which language is best for you. Python is a great choice for beginners because it is easy to learn and has a wide range of applications. JavaScript is also popular and is used to create interactive websites and apps. Java is a more complex language, but it is widely used and can be used to create a variety of applications.

How to Become a Web Developer

If you're interested in becoming a web developer, the first step is to learn a programming language. Once you have a good understanding of a language, you can start building websites and apps. You'll need to learn HTML, CSS, and JavaScript to create the front-end of a website, and a server-side language such as PHP or Ruby to create the back-end. You'll also need to learn how to use databases and frameworks such as WordPress or Django. Once you have the necessary skills, you can start looking for web development jobs.

Conclusion

Learning programming can seem daunting, but with the right resources and guidance, anyone can learn how to code. The best first programming language to learn is often debated, but popular choices include Python, JavaScript, and Java. To become a web developer, you'll need to learn a programming language, HTML, CSS, JavaScript, and a server-side language. With the right skills and dedication, you can become a successful web developer.

" 17 | }, 18 | 19 | ] -------------------------------------------------------------------------------- /pages/contact.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Inter } from "next/font/google"; 3 | import { AppLayout } from "../components/AppLayout"; 4 | import emailjs from '@emailjs/browser'; 5 | import {useRef} from 'react'; 6 | 7 | // const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export default function Contact() { 10 | const formRef = useRef(); 11 | const sendEmail = async (e) => { 12 | e.preventDefault(); 13 | try { 14 | const res = await emailjs.sendForm("service_usjsgia", "contact_template", formRef.current, "lCFaHU7UWsFAHhH4t"); 15 | console.log(res); 16 | } catch (e) { 17 | console.log(e); 18 | } 19 | } 20 | return ( 21 |
24 |
25 |
26 |
27 |

28 | Get in touch 29 |

30 |
31 |
37 |
38 |
39 |
40 | 46 | 56 |
57 |
58 | 64 | 74 |
75 |
76 |
77 | 83 | 93 |
94 |
95 | 101 | 110 |
111 |
112 | 119 |
120 |
121 |
122 |
123 |
124 |
125 | ); 126 | } 127 | 128 | Contact.getLayout = function getLayout(page, pageProps) { 129 | return {page}; 130 | }; -------------------------------------------------------------------------------- /pages/projects.js: -------------------------------------------------------------------------------- 1 | import { AppLayout } from "../components/AppLayout"; 2 | import { faChalkboardUser } from "@fortawesome/free-solid-svg-icons"; 3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 4 | 5 | export default function Projects() { 6 | return ( 7 |
8 |

9 | Projects 10 |

11 | 12 |
13 | {/* BETA PROJECT */} 14 |
15 |
16 | open ai logo 21 | 22 |

23 | With Compose Beta Version SAAS 24 |

25 |

26 | Chat GPT-4 AI-powered SAAS solution to help you get your tasks 27 | done in minutes.{" "} 28 | 29 | Created with OpenAI, NextJS, Auth0 and MongoDB. 30 | 31 |

32 | 36 |
37 | 41 | 42 | Visit{" "} 43 | 44 |
45 | 46 |
47 |
48 | 49 | {/* MOBILE APP */} 50 |
51 |
52 | open ai logo 57 |

58 | Devle Mobile App 59 |

60 |

61 | Keep learning tech while having fun with Devle, FREE on iOS & 62 | Android.{" "} 63 | 64 | Created with React Native, JavaScript and Kotlin. 65 | 66 |

67 |
68 | 73 | 88 |
89 |
Download on the
90 |
91 | Mac App Store 92 |
93 |
94 | 95 | 100 | 115 |
116 |
Get in on
117 |
118 | Google Play 119 |
120 |
121 | 122 |
123 |
124 |
125 |
126 |
127 | ); 128 | } 129 | 130 | Projects.getLayout = function getLayout(page, pageProps) { 131 | return {page}; 132 | }; 133 | -------------------------------------------------------------------------------- /components/AppLayout/AppLayout.js: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import { useRouter } from "next/router"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | import Logo from "../../public/abraham-tavarez-logo-mini.png"; 6 | import { FaLinkedin, FaGithub, FaMoon, FaYoutube } from "react-icons/fa6"; 7 | import { useWindowSize } from "../../hooks/useWindowSize"; 8 | import GoogleAnalytics from "../GoogleAnalytics"; 9 | 10 | export const AppLayout = ({ children }) => { 11 | const [showDropDown, setShowDropDown] = useState(false); 12 | const router = useRouter(); // router 13 | const size = useWindowSize(); 14 | 15 | // handle dark mode 16 | const toggleRef = useRef(); 17 | const handleChange = () => { 18 | if (toggleRef.current.checked) { 19 | toggleRef.current.style.right = 0; 20 | toggleRef.current.style.left = ""; 21 | document.documentElement.classList.add("dark"); 22 | } else { 23 | document.documentElement.classList.remove("dark"); 24 | toggleRef.current.style.left = 0; 25 | toggleRef.current.style.right = ""; 26 | } 27 | }; 28 | 29 | return ( 30 |
31 |
32 | {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? ( 33 | 34 | ) : null} 35 |
36 | 37 | logo image 44 | 45 | {/* DROPDOWM MENU */} 46 | {/* ********* NAVIGATION BAR AND DROP DOWN **************** */} 47 | {size.width < 1100 && ( 48 | 164 | )} 165 |
166 |
167 | {size.width > 1100 && ( 168 | 221 | )} 222 |
223 | {/* TOGGLE BUTTON */} 224 |
225 |
226 | 234 | 235 | 239 | 242 |
243 |
244 |
245 | {children} 246 | {/*
247 |
248 |
Abraham Tavarez
249 |
All rights reserved | {Date()}
250 |
251 |
*/} 252 |
253 | ); 254 | }; 255 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Inter } from "next/font/google"; 3 | import { AppLayout } from "../components/AppLayout"; 4 | import MyPhoto from "../public/efren-tavarez-aws-nyc-Abraham-Tavarez-1000x978.png"; 5 | import { FaLinkedin, FaGithub, FaYoutube } from "react-icons/fa6"; 6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 7 | import { faChalkboardUser } from "@fortawesome/free-solid-svg-icons"; 8 | import Link from "next/link"; 9 | 10 | const inter = Inter({ subsets: ["latin"] }); 11 | 12 | export default function Home() { 13 | return ( 14 |
17 | {/* Left SECTION */} 18 |
19 |
20 |

21 | Abraham E Tavarez 22 |

23 | my photo 29 | {/* SOCIAL LINKS */} 30 | 31 |
32 | 37 | 38 | 39 | 40 | 45 | 46 | 47 | 52 | 53 | 54 |
55 | 56 |
57 |

58 |

59 | Hello I'm{" "} 60 | Abraham 🐛 61 |

62 | I enjoy building and maintaining applications. 63 |

64 | 65 |

66 | Cloud and I.T. 67 |

68 | 69 |

70 | Manage and maintain the organization' IT infrastructure, 71 | including servers, networks, and systems, to ensure uninterrupted 72 | operations and data security on premises and the cloud. 73 |

74 | 75 |

Developer

76 | 77 |

78 | Develop and maintain responsive web applications using React and 79 | React Native, ensuring seamless user experiences across various 80 | devices and browsers. 81 |

82 | 83 |

84 | Tech Instructor 85 |

86 | 87 |

88 | Deliver engaging and comprehensive technical training sessions, 89 | leveraging in-depth knowledge of the subject matter to effectively 90 | convey complex concepts to learners. 91 |

92 |
93 |
94 |
95 | 96 | {/* WHOAMI SECTION */} 97 |
98 |
99 |

Professional Summary

100 |

101 | Experienced React Frontend Developer with a passion for crafting 102 | dynamic and visually appealing user interfaces. Proficient in 103 | translating design concepts into responsive and engaging web 104 | applications using modern web technologies. Adept at collaborating 105 | with cross-functional teams to deliver high-quality software 106 | solutions that enhance user experiences. Skilled in optimizing 107 | application performance, staying up-to-date with industry trends, 108 | and continuously refining development processes. Ready to contribute 109 | creativity and technical expertise to drive innovation and elevate 110 | user-centric frontend development. 111 |

112 |
113 | 114 | 115 | {/* RECENT PROJECTS SECTION */} 116 |
117 |

118 | Feature Projects 119 |

120 | 121 |
122 |
123 | 124 | open ai logo 125 | 126 | 127 |

128 | With Compose Beta Version SAAS 129 |

130 |

131 | Chat GPT-4 AI-powered SAAS solution to help you get your tasks done 132 | in minutes. Created with OpenAI, NextJS, Auth0 and MongoDB. 133 |

134 | 138 |
139 | 143 | 144 | Visit{" "} 145 | 146 |
147 | 148 | 149 |
150 |
151 | 152 | {/* MOBILE APP */} 153 |
154 |
155 | open ai logo 160 |

161 | Devle Mobile App 162 |

163 |

164 | Keep learning tech while having fun with Devle, FREE on iOS & 165 | Android.{" "} 166 | 167 | Created with React Native, JavaScript and Kotlin. 168 | 169 |

170 |
171 | 176 | 191 |
192 |
Download on the
193 |
194 | Mac App Store 195 |
196 |
197 | 198 | 203 | 218 |
219 |
Get in on
220 |
221 | Google Play 222 |
223 |
224 | 225 |
226 |
227 |
228 |
229 |
230 |
231 | ); 232 | } 233 | 234 | Home.getLayout = function getLayout(page, pageProps) { 235 | return {page}; 236 | }; 237 | -------------------------------------------------------------------------------- /pages/courses.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { AppLayout } from "../components/AppLayout"; 3 | import ComingSoon from "../public/assets/coming-soon-banner.png"; 4 | import ReactShorts from "../public/React-Shorts-YouTube-Thumbnail.png"; 5 | import GPT4 from "../public/assets/gpt-4.avif"; 6 | import ChatbotsProjects from '../public/assets/chatbots-course.png'; 7 | import AIProjects from '../public/assets/ai-projects.png'; 8 | import MailchimpSubscribe from "react-mailchimp-subscribe"; 9 | import EmailSubscribeForm from "../components/EmailSubscribeForm"; 10 | 11 | export default function Courses() { 12 | return ( 13 |
14 |

15 | Free Courses 16 |

17 | 18 |
19 | {/* CARD */} 20 |
21 |
22 |
23 | Picture of the author 29 |
30 |

31 | Building Intelligent Bots! 32 |

33 |
34 |

35 | $200 36 |

37 |

FREE

38 |
39 |

40 | Develop Intelligent Bots using NextJS, and OpenAI GPT4 models. 41 |

42 | 43 | 50 | View on YouTube 51 | 52 | {/* 57 | Download app 58 | */} 59 |
60 |
61 |
62 |
63 | 64 | {/* CARD */} 65 |
66 |
67 |
68 | Picture of the author 74 |
75 |

76 | NextJS AI Projects 77 |

78 |
79 |

80 | $200 81 |

82 |

FREE

83 |
84 |

85 | Become a AI Web Developer by building real life AI Web Applications. 86 |

87 | 88 | 95 | View on YouTube 96 | 97 | {/* 102 | Download app 103 | */} 104 |
105 |
106 |
107 |
108 | 109 | {/* CARD */} 110 |
111 |
112 |
113 | Picture of the author 119 |
120 |

121 | NextJS Crash Course 122 |

123 |
124 |

125 | $200 126 |

127 |

FREE

128 |
129 |

130 | Beginner friendly NextJS Course go From 0 to hero! 131 |

132 | 133 | 139 | View on YouTube 140 | 141 | {/* 146 | Download app 147 | */} 148 |
149 |
150 |
151 |
152 | 153 | {/* CARD */} 154 |
155 |
156 |
157 | Picture of the author 163 |
164 |

165 | "React Shorts" Full React Course 166 |

167 |
168 |

169 | $200 170 |

171 |

FREE

172 |
173 |

174 | Beginner friendly React Course! Take a fresh looks at React. 175 |

176 | 177 | 183 | View on YouTube 184 | 185 | {/* 190 | Download app 191 | */} 192 |
193 |
194 |
195 |
196 | 197 | {/* JS and TS Course CARD */} 198 |
199 |
200 |
201 | Picture of the author 207 |
208 |

209 | 210 | Backend Development! 211 | 212 |

213 |
214 |

215 | $200 216 |

217 |

FREE

218 |
219 |

220 | Develop Cloud Based Applications using Amazon AWS! 221 |

222 | 223 | 230 | View On YouTube 231 | 232 | {/* 237 | Download app 238 | */} 239 |
240 |
241 |
242 |
243 | 244 | 245 | {/* JS and TS Course CARD */} 246 |
247 |
248 |
249 | Picture of the author 255 |
256 |

257 | 258 | Cloud Developer: React & Amazon AWS 259 | 260 |

261 |
262 |

263 | $200 264 |

265 |

FREE

266 |
267 |

268 | Develop Cloud Based Applications using Amazon AWS! 269 |

270 | 271 | 277 | Coming Soon! 278 | 279 | {/* 284 | Download app 285 | */} 286 |
287 |
288 |
289 |
290 | 291 | {/* NEWSLETTER */} 292 | {/* ( 295 | subscribe(formData)} 299 | /> 300 | )} 301 | /> */} 302 | 303 | {/* JS and TS Course CARD */} 304 |
305 |
306 |
307 | Picture of the author 313 |
314 |

315 | 316 | React Native: Mobile Development 317 | 318 |

319 |
320 |

321 | $200 322 |

323 |

FREE

324 |
325 |

326 | Launch your own cross mobile apps for Android and iOS using 327 | React Native! 328 |

329 | 330 | 336 | Coming Soon! 337 | 338 | {/* 343 | Download app 344 | */} 345 |
346 |
347 |
348 |
349 | 350 | {/* JS and TS Course CARD */} 351 |
352 |
353 |
354 | Picture of the author 360 |
361 |

362 | 363 | TypeScript for JavaScript Developers 364 | 365 |

366 |
367 |

368 | $200 369 |

370 |

FREE

371 |
372 |

373 | Learn fast by converting JavaScript apps to TypeScript apps! 374 |

375 | 376 | 382 | Coming Soon! 383 | 384 | {/* 389 | Download app 390 | */} 391 |
392 |
393 |
394 |
395 |
396 |
397 | ); 398 | } 399 | 400 | Courses.getLayout = function getLayout(page, pageProps) { 401 | return {page}; 402 | }; 403 | --------------------------------------------------------------------------------