-
Notifications
You must be signed in to change notification settings - Fork 38
/
menu.html
136 lines (85 loc) · 5.2 KB
/
menu.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
---
---
{% include head.html %}
<div class="dn tommenu w-100 h-100 fixed absolute--fill pv5">
<div class="slides h-100 w-100">
<div class="pa2 pa6-l w-75">
<h2 class="w-100 w-50-l dn db-ns">
Hello there!
</h2>
<p>
Thanks for stopping by. I'm Tom Critchlow a strategy consultant in Brooklyn, NY.
</p>
<p>
Shoot me a note on twitter: <a href="https://twitter.com/tomcritchlow">@tomcritchlow</a>
</p>
<ul class="f4 ttu">
<li class="pa2"><a class="no-underline" href="/writing">writing</a></li>
<li class="pa2"><a class=" no-underline" href="/wiki">wiki</a></li>
<li class="pa2"><a class=" no-underline" href="/about">about</a></li>
<li class="pa2"><a class=" no-underline" href="/consulting">consulting</a></li>
<li class="pa2"><a class=" no-underline" href="/now">now</a></li>
<li class="pa2"><a class=" no-underline" href="https://tinyletter.com/tomcritchlow">newsletter</a></li>
</ul>
<div class="scrolltext w-100 absolute tc left-0 dn db-ns">
Scroll right for latest posts:
</div>
<div class="rightarrow">
<i class="fa fa-arrow-right fa-2x"></i>
</div>
</div>
{% for post in site.posts limit:5 %}
<div class="ph3 pt3 mt5 w-75"><a href="{{post.url}}">
<div class="pt4 pt5-l w-two-thirds-ns">
<h1 class="f3 f1-l fw8 lh-solid mv1 posttitle">{{post.title}}</h1>
<h2 class="f4 fw3 lh-copy mv1 subtitle">{{post.subtitle}}</h2>
<div class="f6 f6-s black-50 pv1">{{ post.date | date_to_string }}</div>
</div>
<div class="w-two-thirds-ns pt2">
{{post.content | strip_html| truncatewords: 30}}
</div>
<div class="scrolltext w-100 absolute tc left-0">
View post <br><i class="fa fa-arrow-down fa-2x tomgreen"></i>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
<header class="pv3 pv4-l center mw9 pr6-l pl6-l f3 ph3 ph0-ns lh-copy">
<a class="no-underline" href="/"><brand class="relative">Tom Critchlow</brand></a>
<div class="fr f5 pv2 fw3">
<div class="hamburger hamburger--squeeze">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</div>
</header>
<script>
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
$(".tommenu").toggle();
$("body").toggleClass('noscroll');
});
var $rightarrow = $(".rightarrow");
$rightarrow.on("click", function(e) {
$(".slides").scrollLeft($("body").width());
});
</script>
Here's my blog post on some stuff. Have you had the feeling of being prey inside an algorithmic system?
That system shock that comes from realizing that you’re no longer the user but the prey.
Maybe this is common behaviour - but I recently clicked an Instagram ad (yes, I have a new watch - it’s very on brand for my blog).
I don’t click ads often, in fact I can’t remember the last time I did.
But ever since clicking the watch ad my feed is populated exclusively by watch ads. So many watch ads. There’s an uneasy feeling of the algorithmic sharks circling in the water, they smell blood. A weakness in the user.
Have you had the feeling of being prey inside an algorithmic system?
That system shock that comes from realizing that you’re no longer the user but the prey.
Maybe this is common behaviour - but I recently clicked an Instagram ad (yes, I have a new watch - it’s very on brand for my blog).
I don’t click ads often, in fact I can’t remember the last time I did.
But ever since clicking the watch ad my feed is populated exclusively by watch ads. So many watch ads. There’s an uneasy feeling of the algorithmic sharks circling in the water, they smell blood. A weakness in the user.
https://mediatemple.net/blog/tips/carousels-dont-have-to-be-complicated/
</div>
</div>
</body>
</html>