-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (150 loc) · 9.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta property="og:image" content="https://live.staticflickr.com/65535/50306266396_b8a7816f58_k.jpg?w=640">
<link rel="stylesheet" href="styles/output.css">
<link rel="stylesheet" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<script src="https://kit.fontawesome.com/524d3dfae6.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title> Alexis Sanchez's portfolio </title>
<link rel="shortcut icon" type="image/jpg" href="img/favicon-32x32.png">
</head>
<body class="bg-purple-900">
<div class="grid grid-rows-7 grid-flow-col bg-green-500" id="info-container">
<div class=" sm:fixed sm:top-0 sm:left-0 sm:w-2/5 sm:h-screen justify-center items-center information"
id="hello">
<div class=" w-full h-screen sm:h-full flex flex-col justify-center items-center" id="fixed-info">
<img class="rounded-full h-48 w-48 m-6" src="img/i-pic.jpeg" alt="avatar">
<h2 class="text-3xl font-bold text-gray-700">Alexis Sanchez</h2>
<div class="text-2xl text-purple-700">Fullstack Developer</div>
<div class="text-xl text-gray-700"> psialedev@gmail.com</div>
<div class="flex w-full justify-evenly items-center">
<a target="_blank" href="https://www.linkedin.com/in/alexis-sanchez-dev/"
class=" py-4 text-4xl text-purple-700 hover:text-blue-600">
<i class="fab fa-linkedin"></i></a>
</span>
<a target="_blank" href="https://github.com/Psiale"
class="py-4 text-4xl text-purple-700 hover:text-black">
<i class="fab fa-github"></i></a>
</span>
<a target="_blank" href="https://twitter.com/TFH_"
class=" py-4 text-4xl text-purple-700 hover:text-blue-300">
<i class="fab fa-twitter"></i> </a>
</span>
</div>
</div>
</div>
<div class="grid w-full h-screen bg-purple-300 one p-6 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class="text-gray-700 text-2xl sm:text-5xl w-full break-words tracking-widest">OnStock</p>
</div>
<div class="image flex items-center justify-start">
<img src="img/onstock-desktop.png" class="w-4/5" alt=""></div>
<div class="image flex items-end justify-end">
<img src="img/onstock-mobile.png" class="w-2/4" alt=""></div>
<!-- <div class="tech flex justify-evenly w-full">
<p>HTML</p>
<p>SASS</p>
</div> -->
<div class="live-demo text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank"
href="https://onstock.netlify.app/#/"
class="font-bold hover:text-black tracking-widest cool-link-dark">TRY ME</a>
</div>
<div class="github text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://github.com/Psiale/coffeetory-frontend"
class="font-bold tracking-widest hover:text-black cool-link-dark">REPOSITORY</a>
</div>
</div>
<div class=" grid w-full h-screen bg-purple-500 two p-10 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class=" break-words text-red-100 text-2xl sm:text-5xl tracking-widest">Beer Catalogue</p>
</div>
<div class="image flex items-center justify-start">
<img src="img/beer-desktop.png" class="w-4/5" alt=""></div>
<div class="image flex items-end justify-end">
<img src="img/beer-mobile.png" class="w-2/4" alt=""></div>
<div class="live-demo text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank"
href="https://beer-catalogue.netlify.app"
class="font-bold tracking-widest hover:text-white cool-link">TRY ME</p></a>
</div>
<div class="github text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://github.com/Psiale/beer-react-redux"
class="font-bold tracking-widest hover:text-white cool-link">REPOSITORY</a>
</div>
</div>
<div class=" grid w-full h-screen bg-purple-300 five p-10 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class="break-words text-gray-700 text-2xl sm:text-5xl tracking-widest">PhoneOff</p>
</div>
<div class="image flex items-center justify-start">
<img src="img/phoneoff-desktop.png" class="w-4/5" alt=""></div>
<div class="image flex items-end justify-end">
<img src="img/phoneoff-mobile.png" class="w-2/4" alt=""></div>
<div class="live-demo text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://warm-wave-61802.herokuapp.com"
class="font-bold tracking-widest hover:text-black cool-link-dark">TRY ME</a>
</div>
<div class="github text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://github.com/Psiale/phone-off/"
class="font-bold tracking-widest hover:text-black cool-link-dark">REPOSITORY</a>
</div>
</div>
<div class=" grid w-full h-screen bg-purple-500 four p-10 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class="break-words text-red-100 text-2xl sm:text-5xl tracking-widest">Private Events</p>
</div>
<div class="image flex items-center justify-center">
<img src="img/private-desktop.png" class="w-4/5" alt=""></div>
<div class="live-demo text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target = "_blank" href = "https://guarded-dusk-24319.herokuapp.com/" class= "font-bold tracking-widest cool-link">TRY ME</a>
</div>
<div class="github text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target = "_blank" href = "https://github.com/Psiale/private-events" class= "font-bold tracking-widest cool-link">REPOSITORY</a>
</div>
</div>
<div class=" grid w-full h-screen bg-purple-300 three p-10 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class="break-words text-gray-700 text-2xl sm:text-5xl tracking-widest"> Js TicTacToe </p>
</div>
<div class="image flex items-center justify-start">
<img src="img/tictactoe-desktop.png" class="w-4/5" alt="">
</div>
<div class="image flex items-end justify-end">
<img src="img/tictactoe-mobile.png" class="w-2/4" alt=""></div>
<div class="live-demo text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://got-tictactoe.netlify.app/"
class="font-bold hover:text-gray-900 tracking-widest cool-link-dark">TRY ME</a>
</div>
<div class="github text-gray-700 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://github.com/Psiale/Javascript-Tic-Tac-Toe"
class="font-bold tracking-widest cool-link-dark">REPOSITORY</a>
</div>
</div>
<div class=" grid w-full h-screen bg-purple-500 six p-10 item-grid">
<div class=" text-gray-700 text-7xl w-full title">
<p class="break-words text-red-100 text-2xl sm:text-5xl tracking-widest">Restaurant Page</p>
</div>
<div class="image flex items-center justify-start">
<img src="img/restaurant-desktop.png" class="w-4/5" alt=""></div>
<div class="image flex items-end justify-end">
<img src="img/restaurant-mobile.png" class="w-2/4" alt=""></div>
<div class="live-demo text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank"
href="https://historia-del-cafe-mexicano.netlify.app"
class="font-bold cool-link tracking-widest">TRY ME</a>
</div>
<div class="github text-red-100 text-xs sm:text-md lg:text-lg flex items-center justify-center">
<a target="_blank" href="https://github.com/Psiale/restaurant-webpack-js"
class="font-bold tracking-widest cool-link">REPOSITORY</a>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>