Skip to content

Website #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Website #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f833573
Add files via upload
seasea19 Nov 1, 2021
71fe23c
Update index.html
seasea19 Nov 1, 2021
5159e83
Update style.css
seasea19 Nov 1, 2021
e9ecb50
Update script.js
seasea19 Nov 1, 2021
f9a6446
Update index.html
seasea19 Nov 1, 2021
26fcd93
New
seasea19 Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Alcinord, Chelsea - Resume 07_2022-1 (1) (1) (3).pdf
View file
Open in desktop
Binary file not shown.
Binary file added Phoenix.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
301 changes: 301 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
</head>

<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<!-- navbar section -->
<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
<div class="container">
<div class="logo">
<a href="#">Portfo<span>lio</span></a>
</div>
<div class="row justify-content-center mb-2">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="Alcinord, Chelsea - Resume 07_2022-1 (1) (1) (3).pdf"
target="_blank"
>Resume</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Chelsea Alcinord</div>
<!-- <div class="text-3">And I'm a/an <span class="typing"></span></div> -->
<a href="#"> Contact me</a>
</div>
</div>
</section>

<!-- about section start -->
<h1 id="hometext" class="font-weight-bold">
꧁𖤍𖤓 Welcome to my portfolio 𖤓𖤍꧂
</h1>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column left">
<img
alt="chelsea smiling"
src="https://www.theopencode.org/wp-content/uploads/2020/09/Chelsea-Alcinord.jpg"
)
no-repeat
center;
/>
</div>
<div class="column right">
<div class="text">
I'm Chelsea and I'm a/an <span class="typing-2"></span>
</div>
<p>
I am a recent graduate at John Jay College of Criminal Justice. I
always had a relationship with computer and never realized i would
sooner or later walk the path of a computer science student as
well learning programming languages. I have a profound interest in
Cybersecurity, Hacking and AI. I am hoping to learn them in the
future.
</p>
</div>
</div>
</div>
</section>

<!-- skills section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My skills & experiences.</div>
<p>
I use C++ more because of school while I picked other skills such
as Python, Html and more from Hackathons. I also worked in the
past as a front desk and Gameroom attendant at school. My tasks as
a gameroom attendant were to supervise the gameroom where students
come and go as well to maintain and keep an inventory of all games
and equipment. As a front desk, my tasks were to answer questions
about the school's departments and activities from Walk-in
students and customers and to answer Phone Calls. I also worked as
a wintern (intern in winter) at Verizon. Our task was to find a
solution to prioritize their wokrs to avoid late submission works
meaning delays and overworking. This past summer I interned as a
front end web developer where I redesigned the Vngle website using
React.js, Gatsby, and CSS to better show news coverage in a team
of 4 developers. I Built and designed a browser cookies banner to
display on the landing page with “accept” and “refuse” functions,
I also Co-designed the homepage: created a sticky header .
Futhermore, I Built and designed two pages called “Content
Creative Services” and “Become a Vngler”: added animations on the
Ally page and created the forms in all pages by making users be
able to send messages to the company’s email.
</p>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>60%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>C++</span>
<span>90%</span>
</div>
<div class="line c"></div>
</div>
<div class="bars">
<div class="info">
<span>Python</span>
<span>40%</span>
</div>
<div class="line python"></div>
</div>
</div>
</div>
</div>
</section>

<!-- Portfolio section start -->
<section class="portfolio" id="portfolio">
<div class="max-width">
<h2 class="title">Portfolio</h2>
<div class="portfolio-content">
<div class="column left"></div>
</div>
</div>
</section>

<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<p>
If you have any questions and want to get in touch with me, please
email me or use the box.
</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">Alcinord Chelsea</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">New York, United States</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">[email protected]</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required />
</div>
<div class="field email">
<input type="email" placeholder="Email" required />
</div>
</div>
<div class="field">
<input type="text" placeholder="Subject" required />
</div>
<div class="field textarea">
<textarea
cols="30"
rows="10"
placeholder="Message.."
required
></textarea>
</div>
<div class="button-area">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>

<!-- footer section start -->
<footer id="footer">
<span>Created By Chelsea Alcinord. 🦋All rights reserved🦋</span>
<div class="container-fluid">
<!-- social media icons -->
<div class="social-icons mt-4">
<a
ref="https://www.facebook.com/chelsea.alcinord/"
target="_blank"
rel="noopener"
><i class="fab fa-facebook"></i
></a>
<a
ref="https://www.instagram.com/sea2_sea6/"
target="_blank"
rel="noopener"
><i class="fab fa-instagram"></i
></a>
<a
ref="https://www.linkedin.com/in/chelsea-alcinord-b94972194/"
target="_blank"
rel="noopener"
><i class="fab fa-linkedin"></i
></a>
<a ref="https://github.com/seasea19" rel="noopener" target="_blank"
><i class="fab fa-github"></i
></a>
</div>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
73 changes: 73 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
$(document).ready(function(){
$(window).scroll(function(){
// sticky navbar on scroll script
if(this.scrollY > 20){
$('.navbar').addClass("sticky");
}else{
$('.navbar').removeClass("sticky");
}

// scroll-up button show/hide script
if(this.scrollY > 500){
$('.scroll-up-btn').addClass("show");
}else{
$('.scroll-up-btn').removeClass("show");
}
});

// slide-up script
$('.scroll-up-btn').click(function(){
$('html').animate({scrollTop: 0});
// removing smooth scroll on slide-up button click
$('html').css("scrollBehavior", "auto");
});

$('.navbar .menu li a').click(function(){
// applying again smooth scroll on menu items click
$('html').css("scrollBehavior", "smooth");
});

// toggle menu/navbar script
$('.menu-btn').click(function(){
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});

// typing text animation script
// var typed = new Typed(".typing", {
// strings: ["Generation USA Student", "Entrepreneur", "Cybersecurity Enthusiast", "Hacking Learner", "soon to be a web developer"],
// typeSpeed: 100,
// backSpeed: 60,
// loop: true
// });

var typed = new Typed(".typing-2", {
strings: ["Generation USA Student", "Entrepreneur", "Cybersecurity Enthusiast", "Hacking Learner", "soon to be a web developer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

// owl carousel script
$('.carousel').owlCarousel({
margin: 20,
loop: true,
autoplay: true,
autoplayTimeOut: 2000,
autoplayHoverPause: true,
responsive: {
0:{
items: 1,
nav: false
},
600:{
items: 2,
nav: false
},
1000:{
items: 3,
nav: false
}
}
});
});
Loading