-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtwitterclone.html
More file actions
149 lines (138 loc) · 5.68 KB
/
twitterclone.html
File metadata and controls
149 lines (138 loc) · 5.68 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<!-- Typekit Project Link -->
<!-- <link rel="stylesheet" href="https://use.typekit.net/dta7tim.css"> -->
<!-- Main Stylesheet -->
<link rel="stylesheet" href="styles/styles.css" />
<!-- Animate on Scroll (AOS) -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<!-- Boostrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha256-XDbijJp72GS2c+Ij234ZNJIyJ1Nv+9+HH1i28JuayMk=" crossorigin="anonymous"></script> -->
<!-- Inter Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap"
rel="stylesheet"
/>
<!-- Preload Images -->
<link rel="preload" as="image" href="img/twitterclonewhite.png" />
<title>Twitter Clone</title>
<link rel="shortcut icon" type="image/jpg" href="img/favicon.png" />
</head>
<body>
<header>
<!-- Main Navbar -->
<nav class="navbar navbar-expand py-3">
<div id="mainNavbar" class="collapse navbar-collapse justify-content-center">
<a href="index.html#projects-gallery" class="nav-link active" style="position: absolute; left: 1rem"
><div class="nav-link-glare"></div>
Return to Projects</a
>
<ul class="navbar-nav pb-1 py-lg-0">
<li class="nav-item my-2 m-lg-0 px-1 px-lg-2 px-xl-3">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item my-2 m-lg-0 px-1 px-lg-2 px-xl-3">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container-fluid p-0 m-0" syle="margin-top: 0 !important">
<div
class="projects-container flex-column align-items-center flex-xxl-row justify-content-center row px-xxl-5 py-5"
>
<div
class="projects-column-left col-12 col-xxl-5 mb-4 mb-xxl-0 px-5 px-xxl-0 d-flex justify-content-start flex-row"
>
<div>
<div
id="project-animation-order-1"
class="projects-text-container text-center text-xxl-start p-4"
>
<!-- <div class="text-center text-xxl-start"> -->
<div
id="jackson-pools"
class="project-subtitle text-center text-xxl-start"
style="background-color: #f9f7f5"
>
<span class="project-subtitle">FULL STACK PROJECT</span>
</div>
<div class="project-title mb-2 text-center text-xxl-start">Twitter Clone</div>
<div class="project-text text-center text-xxl-start px-5 px-xxl-0">
This is a personal project I created to imitate some of the functions of the social
media platform, Twitter. A user can input their username and a tweet body and post
it to the main feed. Any user visiting the site is then able to view these tweets
that others have posted.
<br /><br />
The primary purpose of this project was to practice using some components of the
MERN stack to create a backend for a website. Specifically, the backend for this
site is created with Express, Node, and MongoDB. Functionality created with Express
runs on top of Node and handles requests from the frontend and responds with
information like tweets and usernames. All tweets submitted from the frontend are
stored and retrieved in a MongoDB database by utilizing Mongoose. The frontend was
then written in HTML, CSS, and JavaScript to submit and display tweets to users.
</div>
<!-- </div> -->
</div>
<div class="d-flex">
<a
href="https://github.com/sheehan-j/twitter-clone"
target="_blank"
style="flex: 1; margin-right: 0.25rem"
>
<div id="project-animation-order-2" class="link-card py-3 mt-3">
<div class="link-card-glare"></div>
<div class="transparent-rectangle-resume-1"></div>
<div class="transparent-rectangle-resume-2"></div>
<div class="transparent-rectangle-resume-3"></div>
<div class="project-link-text text-center w-100">Link to GitHub Repo</div>
</div>
</a>
<a
href="https://twitter.jordansheehan.com/"
target="_blank"
style="flex: 1; margin-left: 0.25rem"
>
<div id="project-animation-order-2" class="link-card py-3 mt-3">
<div class="link-card-glare"></div>
<div class="transparent-rectangle-resume-1"></div>
<div class="transparent-rectangle-resume-2"></div>
<div class="transparent-rectangle-resume-3"></div>
<div class="project-link-text text-center w-100">Link to Site</div>
</div>
</a>
</div>
</div>
</div>
<div
class="projects-column-right col-12 col-xxl-6 mt-4 mt-xxl-0 px-2 px-xxl-0 d-flex justify-content-center"
data-aos-delay="0"
style="position: relative"
>
<img src="img/twitterclonewhite.png" class="project-page-image" />
<div class="project-image-background"></div>
</div>
</div>
</div>
</main>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>