-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (169 loc) · 9.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="icon" href="1.png" class="img rounded-circle img-fluid img-responsive">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/Personal.css">
<!-- Title -->
<title>Jared Furtado</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<a href="https://github.com/jjf2009/jjf2009.github.io" class="navbar-brand">
<img src="J.png" class="img rounded-circle img-fluid img-responsive" style="width: 5rem;" alt="Logo">
<span class="fw-bold">Jared Furtado</span>
</a>
<!-- Toggle button for mobile nav -->
<button class="navbar-toggler custom" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav-link -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav color-gray">
<li class="nav-item"><a href="#Home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#About" class="nav-link">About</a></li>
<li class="nav-item"><a href="#Exp" class="nav-link">Experience</a></li>
<li class="nav-item"><a href="#Projects" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
<li class="nav-item d-md-none text-white"><a href="#Resume" class="nav-link">Resume</a></li>
<li class="nav-item ms-2 d-none d-md-inline rounded-2"><a href="#Resume" class="btn btn-secondary">Download Resume</a></li>
</ul>
</div>
</div>
</nav>
<!-- Home -->
<section class="bg-light mt-5" id="Home">
<div class="container-lg">
<div class="text-center">
<img src="Boss.png" alt="Jared's Image" class="img rounded-circle img-fluid img-responsive mt-5 pt-5" style="width: 18rem;">
<h2>Hi, Jared Here</h2>
<p class="lead text-muted">I'm a <span id="demo"></span></p>
</div>
</div>
</section>
<!-- About -->
<section id="About" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>About</h2>
<p class="lead text-muted">
Hey! I'm <b>Jared Furtado</b>, a student at Goa College of Engineering and a passionate developer. I’m learning the MERN stack and cloud computing, and I'm always exploring new technologies. As a freelancer, I've tackled diverse projects, building dynamic web apps and sleek user interfaces. I dream of starting my own tech startup one day, blending my love for coding with my entrepreneurial spirit. Goa's vibrant culture fuels my creativity and ambition. Let's connect and create something amazing together! 🚀
</p>
</div>
</div>
</section>
<!-- Experience -->
<section id="Exp" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Experience</h2>
<div class="card">
<div class="card-body">
No <b>Experience</b> at present, would love to work with you!
</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="Projects" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Projects</h2>
<p class="lead text-muted">Explore my projects, where I've brought ideas to life using the MERN stack, cloud computing, and more. Each project showcases my passion for development and problem-solving.</p>
</div>
</div>
<div class="row my-5 align-items-center justify-content-center g-3">
<div class="col-lg-4 col-xl-3" style="width: 18rem;">
<div class="card border-2 border-primary">
<div class="card-body text-center py-4">
<h4 class="card-title">Project:1</h4>
<p class="lead subtitle">Tribute Page</p>
<img src="Project1.jpg" class="card-img-top" alt="Tribute Page">
<p class="card-text mx-5 text-muted d-none d-lg-block">Made using basic HTML and CSS</p>
<a href="https://steve-jobs-tribute.vercel.app/" class="btn btn-outline-primary btn-lg mt-3">Visit</a>
<a href="https://github.com/jjf2009/Steve_Jobs_Tribute" class="btn btn-outline-primary btn-lg mt-3">Github</a>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-3" style="width: 18rem;">
<div class="card border-2 border-primary">
<div class="card-body text-center py-4">
<h4 class="card-title">Project:2</h4>
<p class="lead subtitle">Palindrome Checker</p>
<img src="Project2.jpg" class="card-img-top" alt="Form">
<p class="card-text mx-5 text-muted d-none d-lg-block">Made Using Javascript</p>
<a href="https://palindrome-checker-chi.vercel.app/" class="btn btn-outline-primary btn-lg mt-3">Visit</a>
<a href="https://github.com/jjf2009/Palindrome_Checker" class="btn btn-outline-primary btn-lg mt-3">Github</a>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-3" style="width: 18rem;">
<div class="card border-2 border-primary">
<div class="card-body text-center py-4">
<h4 class="card-title">Project:3</h4>
<p class="lead subtitle">Roman Numeral Converter</p>
<img src="Project3.jpg" class="card-img-top" alt="Number" style="width: 15rem;">
<p class="card-text mx-5 text-muted d-none d-lg-block">Made Usign Javascript</p>
<a href="https://roman-number-converter-delta.vercel.app/" class="btn btn-outline-primary btn-lg mt-3">Visit</a>
<a href="https://github.com/jjf2009/Roman_Number_Converter-" class="btn btn-outline-primary btn-lg mt-3" target="_blank">Github</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="Contact">
<div class="text-center">
<h2>Contact</h2>
<div class="container p-4 pb-0">
<section class="mb-4">
<a class="btn" href="https://x.com/JF2009_official" role="button"><i class="bi bi-twitter-x"></i></a>
<a class="btn" href="#!" role="button"><i class="bi bi-envelope-fill"></i></a>
<a class="btn" href="https://www.linkedin.com/in/jared-furtado/" role="button"><i class="bi bi-linkedin"></i></a>
<a class="btn" href="https://github.com/jjf2009" role="button"><i class="bi bi-github"></i></a>
</section>
</div>
</div>
</section>
<script>
var i = 0;
var j = 0;
var txt = ['Developer 💻', 'Freelancer 🌟', 'Innovator 🚀', 'MERN Stack Enthusiast ⚛️', 'Cloud Explorer ☁️', 'Tech Lover 💡', 'Future Entrepreneur 💼', 'Goa-Based 🌴', 'Problem Solver 🔧', 'Startup Dreamer 🌟'];
var speed = 100; // Speed for typing effect
function typeWriter() {
if (i < txt[j].length) {
document.getElementById("demo").innerHTML += txt[j].charAt(i);
i++;
setTimeout(typeWriter, speed);
} else {
setTimeout(eraseText, 1000); // Delay before erasing text
}
}
function eraseText() {
if (i >= 0) {
var currentText = txt[j].substring(0, i);
document.getElementById("demo").innerHTML = currentText;
i--;
setTimeout(eraseText, speed);
} else {
j = (j + 1) % txt.length; // Move to the next text in array
setTimeout(typeWriter, 100); // Delay before typing next text
}
}
// Initialize typing effect
setTimeout(typeWriter, 100);
</script>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>